[retina_image] Hochauflösende Bilder für iPad, iPhone, Macbook Pro Retina und Co.

[cont77]

Funktioniert auch. Wenn ich das Logo auch als semikolon_logo@2x.jpg ablege, muss ich ihm nicht mal die entsprechende class vergeben!

Aber trotzdem noch mal nachgefragt.

Wenn das Logo (emikolon_logo.jpg) eh schon im Format 446 x 125 in der Dateiverwaltung liegt, wird das Logo sowieso - also auch ohne Retina Erweiterung - auch bei Retina-Bildschirmen optimal scharf angezeigt, oder?

Anders gefragt: Contao lädt immer das Originalbild, oder rechnet Contao Bilder runter und verringert somit auch die Dateigröße, wenn diese kleiner eingebunden werden?

Danke & Grüße

[Babelfisch]

Wenn du das Bild generell mit der doppelten Auflösung auslieferst, sieht es auf Retina-Display natürlich immer scharf aus. Allerdings müssen dann auch alle anderen Nutzer 4× so große Bilder laden und das ist meist nicht gewünscht.

Wenn du ein Bild direkt einbindest, dann kommt Contao gar nicht zum Zug und das Bild wird so wie angegeben ausgeliefert. Wird es über einen Insert-Tag oder ein Inhaltselement eingebunden und verkleinert, dann erkennst du das auch daran, dass im HTML-Quellcode nicht das eigentliche Bild, sondern eine generierte Version aus dem Ordner /assets/images/… eingebunden wird. In diesem Fall würde dann retina_images auch gleich die @2x-Version generieren.

Gruß

[cont77]

OK. Super Erklärung. Danke!

[yukay]

HAllo!

Vielen Dank erstmal für die tolle Erweiterung, funktioniert echt super.
Bis auf eine Sache:
Wie ist es mit den Bildern, die in der Colorbox geladen werden?
Da hab ich leider noch keine Lösung gefunden.
Arbeite gerade an einer Seite, mit einer recht großen Galerie und brauche dafür eine Lösung!

[Babelfisch]

Habe ich noch nicht probiert aber werden denn die großen Bilder überhaupt skaliert oder werden dort nicht die Originale eingebunden? Bei letzterem kann natürlich kein extra Retina-Bild erzeugt werden, da keine höhere Auflösung mehr vorhanden ist.

Gruß

[yukay]

Also es ist nicht nur bei der Colorbox, sondern generell beim Inhaltselement Bild.
Ich hab es wie folgt gemacht.

-> Inhaltselement Bild
-> Bild liegt in 2 Versionen in der DV. Version1.jpg= 800x400px Version2@2x.jpg= 1600x800px
-> Im Inhaltselement das kleinere Bild gewählt, weil ich ja nicht möchte, dass die Betrachter mit normaler Auflösung (was sicherlich die meisten sind) das Große Bild laden müssen
-> Vorschaubild nur 200px
-> dann "Großansicht/neues Fenster gewählt


Leider funktioniert das auf diesem Wege nicht.
Ich bin zwar kein PHP Crack, aber vermute mal, dass dein Script die Rückmeldung bekommt, dass noch genügend Ressourcen in der Version 1 vorhanden sind und somit für das erzeugen einer Retinafähigen Vorschaugrafik die Version 2 nicht benötigt wird.
Der Ursprung der verkleinerten Vorschaugrafiken liegt somit bei Retina-betrachtern auch bei Version 1 und beinhalten dann natürlich auch einen Link zur Version 1.

Wie könnte ich das Problem lösen?

Könnte ich deine Extension vielleicht irgendwie so anpassen, das wenn ein Retina-betrachter erkannt wird, sofort auch die dazugehörigen @2x Grafiken ausgegeben werden, ohne zu schauen, ob das jeweilige Bild noch genügend Ressourcen hat?

Oder eine andere Idee?

[Babelfisch]

Das gehst du falsch an, denn die unterschiedlichen Auflösungen nimmt dir ja meine Erweiterung ab. Du brauchst ein Bild, welches mindestens 2x so groß ist, wie es angezeigt werden soll. Du hast also bspw. bild.jpg mit 1200x600 Pixeln im files-Ordner. Jetzt bindest du es einfach in einem Inhaltselement mit bspw. 400x200 Pixeln Größe ein. Contao erstellt jetzt eine skalierte Kopie /assets/images/bild-234jh23kjh43.jpg mit 400x200 Pixeln und diese wird im FE angezeigt. Meine Erweiterung legt nun automatisch ein Bild /assets/images/bild-234jh23kjh43@2x.jpg mit 800x400 Pixeln an und sorgt durch ein kleines JavaScript, dass ein Retina-Gerät diese Grafik läd.

Du brauchst also im Normalfall nicht selber extra @2x-Bilder erstellen und musst dich auch nicht ums Einbinden kümmern.

Gruß

[yukay]

ok, aber wie mache ich das dann mit den "Großansichten im neuen Fenster"?
Da hab ich doch keinen Einfluss darauf, wie groß dieses ausgegeben wird, oder?


Also ich möchte eine Galleriefunktion...kleine Vorschaubilder, einmal draufklicken, Bild groß, wenn möglich noch in einer Colorbox.

[Babelfisch]

Da musst bzw. kannst du normalerweise gar nichts machen. Das Bild wird von Contao in der Originalauflösung eingebunden und wenn diese größer als die darstellbare Auflösung ist, wird es auf Retina-Displays auch schärfer angezeigt. Da kann man nicht viel machen und du musst halt entsprechend große Bilder vorliegen haben.

Gruß

[yukay]

Ok, das Problem ist leider, dass die großen Bilder auf normalen Displays irgendwie unscharf dargestellt werden :-(

Naja, trotzdem Danke für die schnellen Antworten...

Gruss

Erik

[Babelfisch]

Das ist ein generelles Problem von skalierten Bilder auf Retina-Displays. Wenn du das lösen willst, musst du mal schauen, ob du per Template-Anpassung oder anderen Wegen die ColorBox auf eine bestimmte Größe begrenzen kannst. Damit habe ich mich aber auch noch nicht beschäftigt und das hat auch eher indirekt was mit meiner Erweiterung zu tun.

Gruß

[yukay]

Also ich meinte, dass die Großen Retina Bilder auf dem 15" Macbook schwammig aussehen, habe aber gerade festgestellt, dass es nur im Safari so ist.
Sachen gibt´s..... *kopfschüttel*

[yukay]

So, habe die Erweiterung jetzt schonmal ein paar Tage im Einsatz und muss dir mal ein dickes Lob dalassen!
Funktioniert einwandfrei!
Endlich gestochen scharfe Grafiken auf den Retina Displays!

[StefanSchleich]

Die Unterstützung für SVG-Grafiken in der neusten Version finde ich super, vor allem, weil Contao das eigentlich von Haus aus können sollte. Ich finde aber, dass die Funktion in einer eigenständigen Extension besser aufgehoben wäre, da sie ja, wenn man es genau nimmt, erst mal nichts mit dem Thema Retina zu tun hat. Ausserdem wäre sie dann vermutlich auch besser zu finden.

Was meinst du?

[yukay]

Hallo, habe Darstellungsprobleme mit meiner Seite und vermute mal, dass es an der Erweiterung liegt :-(

www.lorenziane.de - Klickt mal drauf, um sie auf dem Desktop zu sehen.

Auch diversen Retina-Geräte sieht die Seite allerdings manchmal so aus:

IMG_1664.jpg

Der Bogen oben ist unscharf und das Logo viel zu groß und unten aber abgehackt. Nach unten raus werden dann nur noch unscharfe Konturlinien des Logos weitergeführt.

Die Startseite sieht meistens normal aus und wenn man dann in den Shop geht oder so, kommt dann meistens diese Darstellung.

Was kann das sein? Denke halt, dass es die Erweiterung ist, es kommt mir nämlich so vor, als ob er die @2x version auch übergroß darstellt.

Wo könnte ich den Hebel ansetzen? werd gerade nicht schlau draus.
Hat die ganze Zeit funktioniert. Jetzt plötzlich diese Darstellung.

[Babelfisch]

Deine Seite ist nicht verfügbar, also kann ich es mir leider nicht anschauen. Allerdings liefert die Erweiterung nur ein @2x Bild aus und ändert an der Größe gar nichts.

Meine Vermutung ist die, dass du für die betroffenen Bilder manuell class="at2x" gesetzt hast, jedoch keine width- und height-Angaben gemacht hast. Das kann dann nicht funktionieren. Du musst also immer width und height setzen, damit die @2x-Bilder auf Retina-Display schärfer und nicht größer dargestellt werden.

Gruß

[yukay]

Sorry, war noch im wartungsmodus.
Jetzt sollte es gehen.
Doch hab Breite und Höhe definiert. Unten das paypallogo und die Social Media icons hab ich ja auch auf diese Weise eingebaut.
Sie werden korrekt dargestellt und vorher hab sah das Logo auch super aus. Und jetzt plötzlich sieht es so aus.
Der grüne Bogen ist auch unscharf.
Bin da echt mit meinem Latein etwas am Ende :-(

[yukay]

Ich habe gerade bemerkt, dass nach dem Bereinigen der Daten in der Conto-Systemwartung alles in Ordnung ist, aber ein paar Stunden später kehrt das Darstellungsproblem leider wieder zurück.
Jemand eine Idee?

[yukay]

Achso...wenn man richtig nah reinzoomt, sehen die Kanten des Logos auch aus, wie angefressen

Ich habe gerade mit jemanden telefoniert, der ein Samsung Galaxy Tab hat. Bei ihm wird das Logo auch vergrößert dargestellt. Wie bei mir auf dem iPad. Auf der Startseite normal und auf den Unterseiten vergrößert.

Allerdings hat er die Unschärfe nicht. Das Logo und der Bogen sehen trotzem scharf aus.

[yukay]

Ich muss leider schon wieder nerven:

Ich hab wieder einen Darstellungsfehler festgestellt. Dieses Mal im Backend.

Auf Retina Displays sehen die Symbole meines Wysiwyg Editor so aus:

IMG_1665_red.jpg

Auf nem normalen Display sieht auch alles normal aus.

Hier ist doch irgendwas oberfaul. Kann das mit der Erweiterung zusammenhängen?

[Webstylerin]

Hallöchen Babelfisch und hallo Rest der Contao-Community.

Ich habe [retina_image] schon erfolgreich eingesetzt und will da nun für drei neue Projekte tun, allerdings irritiert mit der Umstand, dass die Erweiterung nur bis Version 3.3.0-RC1 freigegeben ist, da ja schon die 3.4 released ist. Ich hab leider schon öfters Probleme mit Erweiterungen gehabt die ich eingesetzt habe und die dann einfach nicht mehr weiter entwickelt wurden.

Daher die Frage: Wie sieht es mit [retina_images]? Gibt es einfach keinen Grund etwas anzupassen weil es auch in neueren Versionen einwandfrei funktikoniert? Hängt die Entwicklung aus irgend einem Grund? Wenn ja, kann man dagegen etwas tun?

LG
Nicole

[Kahmoon]

Braucht es die Erweiterung denn bei 3.4 noch? Hier kann man retina Bilder ja mit dem Core abdecken -> http://bit.ly/1A7QxXG

VG
Frank

[Webstylerin]

Ach wie geil. Ich muss gestehen, ich hatte bisher nicht die Zeit mich genauer mit den neuen Features der 3.4 zu befassen da ich aktuell hauptsächlich mit der LTS-Version arbeite und für den Rest noch die 3.3 nutze bis die 3.4 etwas weiter fortgeschritten ist.

Aber dann hat sich meine Frage ja erledigt, dann nehm ich für die 3.2er noch [retina_images] und für die Seite die die aktuellste Contao-Version nutzen hat sich das ja dann erledigt.

Lieben Dank Frank!

Grüßle
Nicole

[Kahmoon]

Ich weiss auch nur das es das gibt...verstanden habe ich es leider noch nicht ganz

[yukay]

Soweit wie ich das jetzt verstehe, deckt die Funktion im Core allerdings nicht die CSS-Grafiken ab, oder?
Das fand ich auch sehr gut, mit der Erweiterung. Habe auch schon ein Projekt damit umgesetzt und war letztendlich sehr zufrieden. Wird die Erweiterung auf der 3.4. noch laufen?

[yukay]

Hab es mal getestet! Erweiterung läuft auch wunderbar unter Contao 3.4!

[Webstylerin]

Hallo Zusammen!

Hat schon jemand Erfahrungen mit der Erweiterung und Contao 3.5.0?

Ich fange jetzt mit den ersten 3.5er Projekten an und werde auch die integrierte Lösung für die Bildgrößen nutzen (auch wenn ich da noch nicht ganz durchsteige), aber die funktioniert ja nur für direkte Bilder. Ich bräuchte aber natürlich auch die Funktion für CSS-Hintergründe. :/

Viele Grüße
Nicole

[Dublay]

Hallo,

ich habe eine Frage zur Benutzung dieser Erweiterung, da es bei mir nicht zu funktionieren scheint.

Szenario A:
Ich habe ein Element Text, in das ich ein Bild in doppelter Auflösung einfüge. -> im FE wird der Pfad nicht ersetzt, es wird das Bild aus dem Ordner files/img geladen, wie es eingebunden ist.

Szenario B:
Ich habe ein Element Text, in das ich ein Bild in doppelter Auflösung einfüge. Dem Bild gebe ich über den HTML-Knopf die Klasse "at2x" -> im FE wird der Pfad nicht ersetzt, es wird das Bild aus dem Ordner files/img geladen, wie es eingebunden ist.

Szenario 3:
Ich binde ein Bild über ein Modul ein und nutze das normale HTML-Gerüst <img src="files/img/bild1.jpg" class="at2x"/>. Das Bild liegt in doppelter Auflösung vor. Im FE wird der Pfad nicht ersetzt, das große Bild wird angezeigt.

Habe ich das Prinzip vielleicht falsch verstanden?

[Dublay]

Ich muss meine vorherige Aussage noch erweitern: Mit o.g. Einstellungen sind die Bilder auf einem Retina-Display nicht sichtbar - es erscheint einfach nix. Dafür wird laut Quelltext im Ordner img auf dateiname@2x.jpg zugegriffen.

So wirklich klar wird mir die Arbeitsweise der Erweiterung nicht - ich verstehe eigentlich immer weniger. Ich dachte, es wird eine neue Version vom Bild erstellt und temporär gespeichert und nicht der Dateipfad bei Retina-Geräten um @2x ergänzt.

[Webstylerin]

Ich muss meine vorherige Aussage noch erweitern: Mit o.g. Einstellungen sind die Bilder auf einem Retina-Display nicht sichtbar - es erscheint einfach nix. Dafür wird laut Quelltext im Ordner img auf dateiname@2x.jpg zugegriffen.

So wirklich klar wird mir die Arbeitsweise der Erweiterung nicht - ich verstehe eigentlich immer weniger. Ich dachte, es wird eine neue Version vom Bild erstellt und temporär gespeichert und nicht der Dateipfad bei Retina-Geräten um @2x ergänzt.

Hallo Dublay, dein Post ist zwar schon ne Weile her, möchte das hier aber trotzdem kurz erklären: Du musst bei [retina_images] immer selbst beide Versionen des Bildes erstellen und ins selbe Verzeichnis hochladen. Egal ob per <img> eingebunden oder per background-image via CSS. Bei Bildern musst du dann nichts weiter machen, bei Hintergrundbildern musst du dem Element die Klasse "at2x" geben und in der CSS die Größe des Hintergrundbildes angeben. (Soweit alles aus meiner Erinnerung.)

Wenn du aber eh 3.5 nutzt kannst du auch die Bildgrößen von Contao nutzen, dann erstellt Contao die benötigten Bilder in den verschiedenen Größen automatisch. Geht aber nur mit Bildern, nicht mit Hintergründen.

Bin eigentlich nur hier um sicherzustellen, dass die Erweiterung unter 3.5 läuft (Update von 3.2), aber das scheint sie ja zu tun.

Viele Grüße
Nicole

[Babelfisch]

Nicole hat's schon richtig erklärt. Bei allen Bildern, die nicht über ein Contao Inhaltselement oder einen InsertTag eingebunden sind, muss der Autor selbst eine entsprechende @2x-Datei zur Verfügung stellen. Die Erweiterung kann das nicht machen, weil sie das a) da nur mit vielen (schmutzigen) Tricks machen könnte und b) die Ausgangsgrafik ja sowieso im Normalfall nur die notwendige Größe hat und nichts da es, woraus ich eine Grafik mit doppelter Auflösung erstellen kann.

Bei allen anderen Grafiken, die bspw. über das Inhaltselement Bild oder über einen InsertTag eingebunden werden und wo die Ausgangsgrafik mindestens die doppelte Auflösung der eingestellten Bildgröße hat, wird dagegen automatisch eine temporäre @2x-Grafik erzeugt und eingebunden.

Ist aber auch alles in der Beschreibung zur Erweiterung so erklärt.

Gruß