Erweiterungen > retina_image

Retina Image

[retina_image]

Miniaturbild

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.

Version
1.3.1
Typ
Frei
Freigabedatum
12.05.2014
Kategorie
Plugin
Lizenz
LGPL
Copyright
© 2014 Lingo4you
Autor
Lingo4you (lingo4u) http://www.lingolia.com
Freigabe-Notizen und Änderungs-Log für 1.3.1
Andere Versionen

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
Version Funktion
 
Total Funktion
0.00
Version Bedienung
 
Total Bedienung
0.00
Version Qualität
 
Total Qualität
0.00
Version Wertung
 
Total Wertung
0.00 (0 Stimmen)
Version Downloads
60
Total Downloads
209
Version Install.
503
Total Install.
1146
Version Updates
174
Total Updates
423
Abhängigkeiten dieser Erweiterung
Von dieser abhängige andere Erweiterungen
Name
Version von
Version bis
Contao
3.1.0
3.3.0-RC1
Name
Version von
Version bis
Paket
Grösse
Datum
125903
20.07.2016 05:06