Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.
Seiten: 1
#1 10. November 2012 16:25
- jeff1980
- Server-Pate
- Ort: Dortmund
- Registriert: 26. November 2010
- Beiträge: 630
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
- Andynium
- Moderator
- Ort: Dohna / SN / Deutschland
- Registriert: 13. September 2010
- Beiträge: 7.017
- Webseite
Re: Flexible Lösung für HiDPI-Geräte (aka Retina)
Das ganze mal ohne Javascript
Offline
#3 14. November 2012 11:55
- jeff1980
- Server-Pate
- Ort: Dortmund
- Registriert: 26. November 2010
- Beiträge: 630
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
- Andynium
- Moderator
- Ort: Dohna / SN / Deutschland
- Registriert: 13. September 2010
- Beiträge: 7.017
- 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 ?
Offline
#5 14. November 2012 13:31
- Janl
- Server-Pate
- Ort: Freistadt, Österreich
- Registriert: 13. Dezember 2010
- Beiträge: 1.227
- 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
Mir ist es ein wenig zu komplex aber es ist eine gute Lösung.
mfg
Jan
Ubuntu 16.04 KDE - Kubuntu 18.04 / win10 (1 duo-boot laptop)- LAMP
Raspi 4b mit Ubuntu 20.04 (64bit) und Mate.
Offline
#6 14. November 2012 14:32
- jeff1980
- Server-Pate
- Ort: Dortmund
- Registriert: 26. November 2010
- Beiträge: 630
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
- arbeitet mit CMS/ms
- Ort: Fränkische Schweiz
- Registriert: 15. Dezember 2010
- Beiträge: 1.152
- 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 ?
+1
Offline
#8 18. April 2013 12:28
- Andynium
- Moderator
- Ort: Dohna / SN / Deutschland
- Registriert: 13. September 2010
- Beiträge: 7.017
- Webseite
Re: Flexible Lösung für HiDPI-Geräte (aka Retina)
Denn wie schon öfter wird Apple hier nur den Grundstein gelegt haben und weitere Notebooks werden folgen.
Bei Toshiba heisst die Retina jetzt Pixelpure
Offline
#9 18. April 2013 13:31
- jeff1980
- Server-Pate
- Ort: Dortmund
- Registriert: 26. November 2010
- Beiträge: 630
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.927
- 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 ?
+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
Seiten: 1