Walther-Präzision mit neuem Internetauftritt

Tutorial: TYPO3 Responsive Images mit dem picture Tag

Grundvoraussetzungen für dieses Tutorial ist eine TYPO3 LTS 6.2 Installation, in der eine Seite mit einem Bild-Element angelegt wurde.

Für dieses Tutorial haben wir einige Dateien vorbereitet und als Zip-Datei zum Download angehängt. Diese Dateien müssen nach dem Entpacken in Filelist hochgeladen werden. Dabei sollte die Ordnerstruktur, wenn möglich, erhalten bleiben. Anderenfalls müssen im TypoScript die Pfade angepasst werden.

Diese Dateien sorgen für eine responsive Ausgabe des Bildes im Frontend. Weitere Funktionen sind nicht enthalten, können aber hinzugefügt werden. Solltet ihr die vorgestellte Technik in eine bestehende Website integrieren wollen, ist nur wichtig, dass jQuery in Version 1.7.2 oder neuer/höher vorliegt. Weiterhin ist es wichtig, dass die jquery-picture.js von http://jquerypicture.com/ integriert wird. Der Aufruf aus der app.js kann an sinnvoller Stelle in Euren Code übernommen werden. Die Settings in der CSS Datei können bei Bedarf an das eigene Projekt angepasst werden.

Der Schnelldurchlauf

In der Rootseite müssen wir mit dem Template Modul ein TypoScript Template hinzufügen, indem wir den Button ‚Create template for a new site‘ klicken.

Im Feld Constants des Template Datensatzes muss das Image Layout wie folgt umgestellt werden:
styles.content.imgtext.layoutKey = picture

In dem resultierenden Template editieren wir das Setup und ersetzen den enthaltenden Code durch:

page = PAGE
page.10 < styles.content.get
page.includeCSS.10 = fileadmin/css/responsive.css
page.includeJS.10 = fileadmin/js/jquery-1.10.2.min.js
page.includeJS.20 = fileadmin/js/jquery-picture.js
page.includeJS.30 = fileadmin/js/app.js

tt_content.image.20.maxW = 320

tt_content.image.20.1.sourceCollection {
small.maxW = 480
smallRetina.maxW = 480
}

tt_content.image.20.1.sourceCollection {
default.maxW = 320
default.mediaQuery = (max-device-width: 479px)

medium.maxW = 900
medium.mediaQuery = (max-device-width: 999px)

large.maxW = 1200
large.mediaQuery = (min-device-width: 1000px)
}

Im Template Datensatz muss dann noch in Includes > Include Static die ‚CSS Styled Content (css_styled_content)‘ ausgewählt sein.

Sollte alles geklappt haben, wird im Frontend Quelltext das Bild wie im folgenden Beispiel ausgegeben:

HTML Code

Doch was macht der ganze Code im Einzelnen?

Die Konstante sorgt dafür, dass als Tag für Images nicht mehr das Standard-Tag <img alt=““ /> ausgegeben wird sondern:
styles.content.imgtext.layoutKey = picture

Im Setup wird dann eine rudimentäre Seite konfiguriert, die die mitgelieferten Resourcen lädt und den Inhalt der Spalte ‚Normal‘ ausgibt:

page = PAGE
page.10 < styles.content.get
page.includeCSS.10 = fileadmin/css/responsive.css
page.includeJS.10 = fileadmin/js/jquery-1.10.2.min.js
page.includeJS.20 = fileadmin/js/jquery-picture.js
page.includeJS.30 = fileadmin/js/app.js

Im nächsten Schritt wird die Bildgröße gemäß dem Konzept „mobile-first“ auf die kleinste Variante eingestellt:
tt_content.image.20.maxW = 320

Jetzt zu etwas Grundlagentheorie:

Wir gehen in diesem Beispiel davon aus, dass ein Browser noch kein <picture> ausgeben kann, weil das W3C noch keine Entscheidung für einen Standard getroffen hat. Deshalb verwenden wir einen so genannten „Polyfill“, der dem Browser die Funktionalität mittels Javascript beibringt. Bei abgeschaltetem Javascript wird in jedem Fall das kleinste Bild ausgegeben.

Als Nächstes werden die verschiedenen Bildgrößen und MediaQueries für die Breakpoints konfiguriert. In TYPO3 6.2 sind die Größen small und smallRetina mitgeliefert. Deren default-Größen sind:
– small: 200x
– smallRetina: 200px und Density 2

Diese Größen haben wir angepasst:

tt_content.image.20.1.sourceCollection {
small.maxW = 480
smallRetina.maxW = 480
}

Die Größen medium, large und default sind TYPO3 nicht bekannt und dienen nur der Veranschaulichung, dass auch abweichende Angaben angelegt werden können.

tt_content.image.20.1.sourceCollection {
default.maxW = 320
default.mediaQuery = (max-device-width: 479px)
medium.maxW = 900
medium.mediaQuery = (max-device-width: 999px)
large.maxW = 1200
large.mediaQuery = (min-device-width: 1000px)
}

Share on Facebook21Tweet about this on TwitterShare on Google+2Pin on Pinterest0

Über Sebastian Fischer

TYPO3 Senior Developer, CleanCode Connoisseur, Running Addicted

      Profile:
    • twitter