Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.

#1 10. November 2012 16:25

jeff1980
Server-Pate
Ort: Dortmund
Registriert: 26. November 2010
Beiträge: 604

Flexible Lösung für HiDPI-Geräte (aka Retina)

Immer öfter finden hier ja auch Diskussionen zu mobilen Endgeräten statt. Viele dieser Geräte haben ja schon extrem hochauflösende Displays oder - wie Apple sie nennt - Retina-Displays.
Das Sie Segen und Fluch zugleich sind, darf ich jetzt am eigenen Leib erfahren. Ein neues Notebook war fällig und aufgrund der extremen Schärfe und des enormen Platzes (bis zu 1920x1200px) sitze ich jetzt an einem Retina-MacBook.

Aus Neugier und quasi als "Proof of concept" habe ich bei einem Projekt versucht, alles auf Retina auszulegen. Die Bilder liegen nun doppelt vor - einmal in der normalen und einmal in der doppelten Auflösung. Es gibt ja viele Ansätze - ich habe mich für eine Mischung aus http://retinajs.com und http://www.i-do-this.com/blog/56/How-to … r-prefixes entschieden.

Retina.js sorgt dafür, dass alle Bilder im HTML-Content angepasst werden (es wird ein @2x im Dateinamen ergänzt). Die UDT-Lösung habe ich für meine Bedürfnisse so umgebaut, dass das auf http://retinajs.com angesprochene Stylesheet dabei heraus kommt, allerdings ohne LessCSS zu verwenden. Ich habe es direkt in ein PlugIn ausgelagert, da UDT's (wie ich ja hier gelernt habe) nicht mehr im Backend verarbeitet werden und ich so evtl. Probleme umgehen wollte.
Das PlugIn sieht nun so aus:

[== php ==]
<?
function smarty_cms_function_css_retina($params, &$smarty) {
$selector=$params['selector'];
$filename=$params['filename'];
$fileext=$params['fileext'];
$width=$params['width'];
$height=$params['height'];
$config = cmsms()->GetConfig();
$root_url=$config['root_url'];
 
echo <<<EOT
$selector {
	background-image: url($root_url/uploads/images/$filename.$fileext);
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
$selector {
	background-image: url($root_url/uploads/images/$filename@2x.$fileext);
	background-size: $width $height;
	}
}
EOT;
}

function smarty_cms_help_function_css_retina() {
?>
<p>Use it like this:</p>
<pre>[[css_retina selector='#test' filename='bild' fileext='jpg' width='200px' height='100px']]</pre>
<p>Result is:</p>
<pre>
#test {
	background-image: url(http://www.domain.de/uploads/images/bild.jpg);
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
#test {
	background-image: url(http://www.domain.de/uploads/images/bild@2x.jpg);
	background-size: 200px 100px;
	}
}</pre>
<?
}

?>

Wenn man das Ganze in eine Datei namens function.css_retina.php abspeichert und in den PlugIns-Ordner von CMSmadesimple kopiert, kann es in der CSS-Datei dann wie folgt aufgerufen werden:

[== smarty ==]
[[css_retina selector='#test' filename='bild' fileext='jpg' width='200px' height='100px']]

Dadurch wird dieser Code generiert:

[== css ==]
#test {
	background-image: url(http://www.domain.de/uploads/images/bild.jpg);
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
#test {
	background-image: url(http://www.domain.de/uploads/images/bild@2x.jpg);
	background-size: 200px 100px;
	}
}

Es ist sicher nicht die perfekte Lösung, aber es funktioniert schon mal. Hier der Beweis.

Da es sicher Verbesserungsvorschläge gibt - immer her damit!

Offline

#2 14. November 2012 05:23

cyberman
Moderator
Ort: Dohna / Sachsen
Registriert: 13. September 2010
Beiträge: 6.878
Webseite

Re: Flexible Lösung für HiDPI-Geräte (aka Retina)


1. Wie bekomme ich hier schnelle Hilfe?
2. HowTo: Fehlersuche bei CMS/ms
---
„First they ignore you, then they laugh at you, then they fight you, then you win.“ Mahatma Ghandi

Offline

#3 14. November 2012 11:55

jeff1980
Server-Pate
Ort: Dortmund
Registriert: 26. November 2010
Beiträge: 604

Re: Flexible Lösung für HiDPI-Geräte (aka Retina)

Das betrifft aber nur Bilder in der CSS-Datei - das habe ich ja so umgesetzt (mit Hilfe des UDT's). Das Javascript ist für die Bilder im Inhalt die per img-Tag eingebunden werden (auf der angesprochenen Seite z.B. die Icons). Dafür hab ich bis jetzt noch keine andere (bessere) Lösung gefunden. Es gibt noch eine per Cookie und htaccess - aber die war nicht wirklich elegant einzubauen.

Offline

#4 14. November 2012 13:03

cyberman
Moderator
Ort: Dohna / Sachsen
Registriert: 13. September 2010
Beiträge: 6.878
Webseite

Re: Flexible Lösung für HiDPI-Geräte (aka Retina)

Lukas, wäre das nicht eine schöne Ergänzung für deine Toolbox, also zu der AutoLightbox noch ein AutoRetina big_smile ?


1. Wie bekomme ich hier schnelle Hilfe?
2. HowTo: Fehlersuche bei CMS/ms
---
„First they ignore you, then they laugh at you, then they fight you, then you win.“ Mahatma Ghandi

Offline

#5 14. November 2012 13:31

Janl
Server-Pate
Ort: Freistadt, Österreich
Registriert: 13. Dezember 2010
Beiträge: 1.081
Webseite

Re: Flexible Lösung für HiDPI-Geräte (aka Retina)

Hallo,

Wo es um anpassbare Bilder geht aht folgende Link eine gute Ansatz

http://adaptive-images.com/

Mir ist es ein wenig zu komplex aber es ist eine gute Lösung.

mfg
Jan


Ubuntu 16.04 mit KDE - LAMP

Offline

#6 14. November 2012 14:32

jeff1980
Server-Pate
Ort: Dortmund
Registriert: 26. November 2010
Beiträge: 604

Re: Flexible Lösung für HiDPI-Geräte (aka Retina)

Das geht in die Richtung des Ansatzes, den ich zuerst getestet habe - js, cookie, php und htaccess - find ich aber noch etwas besser, da es nicht nur auf HiDPI sondern auch auf die Gerätegröße reagiert - toll für Seiten, die viele Aufrufe über Mobilgeräte haben oder wo es um Bildpräsentation geht und die Bilder immer gut aussehen müssen (Fotografen usw.).
Aber für eine "normale" Webseite ist es mir irgendwie zu viel, was da zusammenpassen muss. Vielleicht mache ich mir auch zu viele Gedanken ...
Hab mir die Seite aber mal gespeichert - habe bald ein Projekt, wo es passen könnte.

AutoRetina für die ToolBox fänd ich cool. Dann wäre CMSms eines der ersten, wenn nicht das erste, CMS, dass eine quasi-out-of-the-box-Lösung für die zukünftige Gerätegeneration anbietet. Denn wie schon öfter wird Apple hier nur den Grundstein gelegt haben und weitere Notebooks werden folgen.

Offline

#7 14. November 2012 14:48

faglork
CMS/ms-Profi
Ort: Fränkische Schweiz
Registriert: 15. Dezember 2010
Beiträge: 1.151
Webseite

Re: Flexible Lösung für HiDPI-Geräte (aka Retina)

cyberman schrieb:

Lukas, wäre das nicht eine schöne Ergänzung für deine Toolbox, also zu der AutoLightbox noch ein AutoRetina big_smile ?

+1

Offline

#8 18. April 2013 12:28

cyberman
Moderator
Ort: Dohna / Sachsen
Registriert: 13. September 2010
Beiträge: 6.878
Webseite

Re: Flexible Lösung für HiDPI-Geräte (aka Retina)

jeff1980 schrieb:

Denn wie schon öfter wird Apple hier nur den Grundstein gelegt haben und weitere Notebooks werden folgen.

Bei Toshiba heisst die Retina jetzt Pixelpure wink

http://www.golem.de/news/kirabook-luxus … 98797.html


1. Wie bekomme ich hier schnelle Hilfe?
2. HowTo: Fehlersuche bei CMS/ms
---
„First they ignore you, then they laugh at you, then they fight you, then you win.“ Mahatma Ghandi

Offline

#9 18. April 2013 13:31

jeff1980
Server-Pate
Ort: Dortmund
Registriert: 26. November 2010
Beiträge: 604

Re: Flexible Lösung für HiDPI-Geräte (aka Retina)

Cool, dachte ich mir, dass da langsam Bewegung rein kommt - besonders nachdem Google ja auch sein Chromebook Pixel vorgestellt hat.

Was ich spannend finde, sind die Preise. Es wird ja immer getönt, dass Apple so teuer ist. Ein vergleichbares MacBook Pro Retina 13" kostet ca. 200$ mehr. Hat zwar keine "eingebaute" 2-Jahres-Garantie, aber dafür noch ein 16:10-Display.

Hab selbst das MBPr 15" mit 16:10 und viele Kunden z.B. ein 17" 16:9 - die scheinen mir immer kleiner, als meins. Das kann es doch irgendwie nicht sein. Aber ich schweife ab ...

Übrigens kommt auf die Frage, ob eine Webseite auch für Retina-Displays ausgelegt werden soll, immer häufiger die Antwort "Ach, Sie meinen mein iPad (wahlweise auch Nexus 10 o.ä.)? Ja, gerne."

Offline

#10 14. April 2015 20:13

nockenfell
Moderator
Ort: Lenzburg, Schweiz
Registriert: 09. November 2010
Beiträge: 2.814
Webseite

Re: Flexible Lösung für HiDPI-Geräte (aka Retina)

faglork schrieb:
cyberman schrieb:

Lukas, wäre das nicht eine schöne Ergänzung für deine Toolbox, also zu der AutoLightbox noch ein AutoRetina big_smile ?

+1

Muss ich mir anschauen. Zum Einbinden braucht es eigentlich keine ToolBox. Diese ermöglicht es nur ein klein wenig einfacher zu integrieren. Die Anpassung am .htaccess muss dennoch selber vorgenommen werden.


[dieser Beitrag wurde mit 100% recycled bits geschrieben]
Mein Blog  /   Diverse Links rund um CMS Made Simple
Module: btAdminer, ToolBox

Offline