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

jeff1980 · 10. November 2012 16:25

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:

Hier klicken, um den Code zum Kopieren zu markieren

[== 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:

Hier klicken, um den Code zum Kopieren zu markieren

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

Dadurch wird dieser Code generiert:

Hier klicken, um den Code zum Kopieren zu markieren

[== 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!

Andynium · 14. November 2012 05:23

Das ganze mal ohne Javascript

http://www.elmastudio.de/programmierung … ptimieren/

jeff1980 · 14. November 2012 11:55

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.

Andynium · 14. November 2012 13:03

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

Janl · 14. November 2012 13:31

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

jeff1980 · 14. November 2012 14:32

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.

faglork · 14. November 2012 14:48

cyberman schrieb:

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

+1

Andynium · 18. April 2013 12:28

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

jeff1980 · 18. April 2013 13:31

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."

nockenfell · 14. April 2015 20:13

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 ?
+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.

Forum für CMS/made simple

#1 10. November 2012 16:25

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

#2 14. November 2012 05:23

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

#3 14. November 2012 11:55

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

#4 14. November 2012 13:03

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

#5 14. November 2012 13:31

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

#6 14. November 2012 14:32

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

#7 14. November 2012 14:48

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

#8 18. April 2013 12:28

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

#9 18. April 2013 13:31

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

#10 14. April 2015 20:13

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

Fußzeile des Forums