End-of-Life
Die Erweiterungsverwaltung für Contao 3 wird Ende Mai 2022 endgültig eingestellt!
Die Erweiterungen für Contao 4 findest du unter extensions.contao.org.
Erweiterungen > retina_image
Retina Image
[retina_image]
Hochaufgelöste Bilder für MacBook Pro Retina oder iPad und SVG-Bilder
Diese Erweiterung erzeugt automatisch zu jedem skalierten Bild ein zweites @2x-Bild mit der doppelten Auflösung. Sofern das Ausgangsbild die notwendige Größe hat, werden im Cache-Verzeichnis system/html jeweils ein normal skaliertes und ein gleichnamiges doppelt so großes Bild erstellt, welches vor der Endung den Zusatz @2x hat.
Über ein kleines Javascript werden dann bei den passenden Geräten wie dem iPad 3, iPhone 4 oder MacBook Pro Retina die Bilder mit der hochauflösenden Variante – sofern vorhanden – ausgetauscht.
Nach der Installation der Erweiterung muss über die Systemwartung der Cache in system/html gelöscht werden, damit die Bilder neu erzeugt werden.
Liegen für andere Bilder wie bspw. Layoutgrafiken die hochauflösenden Bilder mit dem Zusatz @2x im gleichen Verzeichnis wie das Ausgangsbild, werden auch diese Bilder automatisch eingebunden.
background-image
Wenn Bilder über CSS mit eingebunden werden, können auch diese (halb)automatisch an das Retina-Display angepasst werden. Die Bilder müssen wie gehabt mit dem Zusatz @2x.jpg vorliegen. Zusätzlich muss dem Element mit dem Hintergrundbild die Klasse at2x zugewiesen werden. Außerdem muss im CSS die Größe des Bildes mit background-size definiert werden. Bei einem 200x100 Pixel großem Bild image.jpg würde dann also zusätzlich ein 400x200 Pixel großes Bild image@2x.jpg im gleichen Verzeichnis liegen. Inline würde das Element dann so in etwa definiert werden:
div class="at2x" style="background-image:url(files/image.jpg); background-size:200px 100px;"
Scalable Vector Graphics – SVG
Die Erweiterung ermöglicht es auch, SVG-Bilder einzubinden. Dazu muss in den System-Einstellungen von Contao unter *Dateien und Bilder* bei *Unterstützte Bildformate* und unter *Datei-Upload* bei *Erlaubte Upload-Dateitypen* die Endung svg hinzugefügt werden. Danach können in jedem Standard-Inhaltselement wie *Bild* oder *Text* auch SVG-Bilder ausgewählt und eingebunden werden. Die Erweiterung sorgt dafür, dass die Größenangaben und das Seitenverhältnis richtig gesetzt werden. Wichtig ist, dass die XML-Dateien entwender eine viewBox oder Größenangaben width und height haben und das in PHP simplexml verfügbar ist.
1.3.x
- Unterstützung für Scalable Vector Graphics (SVG-Bilder)
1.2.x
- beim Verschieben des Browsers zwischen Retina- und Non-Retina-Displays werden die Bilder jetzt ausgetauscht
- verbesserte Unterstützung von InsertTags ab Contao 3.1
1.1.x
- externe Style-Definitionen mit einbezogen
- Unterstützung von background-image (siehe Beschreibung)
- Contao 3 Anpassungen
1.0.x
- fix zur Kompatibilität mit PHP 5.2
- der InsertTag image wirde jetzt ebenfalls korrekt ersetzt
- Statt über ein PHP-/Javascript-Mix zu testen, ob @2x-Bilder vorhanden sind, werden die Bilder jetzt komplett im HTML-Quelltext mit der Klasse at2x getaggt.
- initiale Version