rtp_imgquery

Reaktionsfähige Bilder für TYPO3

rtp_imgquery ist eine TYPO3-Erweiterung, die dem TypoScript IMAGE-Objekt, den standardmäßigen Bildinhaltselementen ("Text & Images", "Images Only") sowie den Standard-Bildbetrachtungshilfen Smarty und Fluid reaktionsschnell und fluid-Bildtechniken hinzufügt.

Es wurde entwickelt, um:

• Bieten Sie einfache und leistungsstarke Anpassungsmöglichkeiten.
• Kombinieren Sie reaktionsschnelle Bild- und fluid-Bildtechniken.
• Laden Sie nur ein einzelnes Bild und vermeiden Sie das Rendern von Rennbedingungen.
• Arbeiten Sie ohne zusätzliche Javascript-Bibliotheken (z.B. jQuery).
• Führen Sie diese so schnell wie möglich aus.
• Arbeiten Sie ohne Javascript (anmutige Degradierung).

Vorgehensweise

Die Erweiterung verwendet eine modifizierte Version der Noscript-Technik. Anstatt das richtige Bild nach dem DOM ready Event (siehe Noscript-Beispiel) zu laden, fügt es das richtige Bild mit document.write ein, während die Seite noch geladen ist. Darüber hinaus erhalten die Bilder über das Style-Attribut eine Breite von 100% und sind somit fluid.

So funktioniert es

1. Basierend auf den vordefinierten Haltepunkt-/Breiteneinstellungen für ein Bild erstellt die Erweiterung eine Liste der zu generierenden Bildversionen.
2. Die Extension weist TYPO3 an, diese Bilder vorzubereiten.
3. Die Erweiterung füllt ein HTML/JavaScript-Snippet mit der Liste der Bildversionen und fügt dieses Snippet anstelle des ursprünglichen Image-Tags ein.
4. Das HTML/JavaScript-Schnipsel entscheidet, welche Bildversion beim Laden der Seite angewendet werden soll.

Das Layout des HTML-Snippets und den Inline-JavaScript-Code, den die Erweiterung verwendet, finden Sie unter Ressourcen/Private/Templates.

Installation

1. Klonen Sie die Erweiterung in Ihren typo3conf Erweiterungsordner:

   git clone git://github.com/rtp-ch/rtp_imgquery.git typo3conf/ext/rtp_imgquery

2. Installieren Sie die Erweiterung mit dem Erweiterungsmanager.

3. Fügen Sie das TypoScript-Setup zu Ihrer Vorlage hinzu: Vorlage > Info/Modify > Includes > Include static (von Erweiterungen) > Responsive Images (rtp_imgquery).

Konfiguration

Grundlegende Beispiele

Die folgenden Beispiele erstellen die vier Versionen des Images fileadmin/images/myimage.jpg.

TypoScript

10 = BILD
10.file = fileadmin/images/myimage.jpg
10.datei.width = 800
10.haltepunkt = 1200
10.haltepunkte = 600:500, 400:280, 320:160

Das Inhaltsobjekt IMAGE wurde um Haltepunktoptionen erweitert. Die Einstellung "Haltepunkt" definiert den Standard Haltepunkt für das IMAGE-Objekt. Die Einstellung "Haltepunkte" enthält zusätzliche Anweisungen zur Bildschirmbreite / Bildbreite.

Text & Bilder Inhaltselement

Die Erweiterung TypoScript in Konfiguration/TypoScript/ enthält Standard Haltepunkteinstellungen für Bildinhaltselemente.

Smarty Plugin

{Bild
    file = "fileadmin/images/myimage.jpg"
    datei.breite = "800"
    haltepunkt = 1200
    haltepunkte = 600:500, 400:280, 320:160
}

Da die smarty-Erweiterung TypoScript bereits versteht, gibt es kein spezielles reaktionsschnelles Bild-Plugin für smarty. Jede gültige TypoScript IMAGE-Einstellung kann als Parameter an das Bild-Plugin übergeben werden.

Konfigurationsoptionen

Deaktivieren des Fluid CSS-Stils

Die Erweiterung fügt Inline-CSS in Bilder ein, um sie zu fluid style="width: 100%; height: auto;" zu machen. Dieses Verhalten kann deaktiviert werden, indem der Style-Wert der Haltepunkt-Konfiguration deaktiviert wird:

styles.content.breakpoints.style.style =

FAQ

Ändern der Bildqualität für Haltepunkte

Ist es möglich, die Bildqualität für bestimmte Haltepunkte zu ändern? Ja. Das folgende Beispiel definiert im Bild mit Haltepunkten in TypoScript und setzt eine geringere Bildqualität für den Haltepunkt 320.

10 = BILD
10.file = fileadmin/images/myimage.jpg
10.datei.width = 800
// Der Standard Haltepunkt ist 1200
10.haltepunkt = 1200
// Definiert die Bildbreiten für die Haltepunkte 600, 400 und 320
10.haltepunkte = 600:400,400,400:280,320:160
// Nach 320 wollen wir eine geringere Bildqualität als die Standardeinstellungen von TYPO3
10.haltepunkte.320.file = GIFBUILDER
10.haltepunkte.320.Datei {
    format = jpg
    qualität = 60
}

Empfohlene Lektüre

• Reaktionsfähige IMGs ? Teil 1, von Jason Grigsby
• Reaktionsfähige IMGs Teil 2 ? ? Detaillierter Blick auf Techniken, von Jason Grigsby
• Reaktionsfähige IMGs Teil 3? Zukunft des IMG-Tags, von Jason Grigsby
• Google-Tabelle, die verschiedene Lösungen betrachtet, von Jason Grigsby
• Erstellung von reaktionsschnellen Bildern mit dem Noscript-Tag, von Mairead Buchan
• Demo des Noscript-Ansatzes, von Antti Peisa
• Reaktionsfähige Bilder: Wie sie fast funktioniert haben und was wir brauchen