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.