28. 04. 2015, 10:50

Hallo,

bisher habe ich nur mit adaptive images (http://adaptive-images.com/) gearbeitet, um Bilder nach breakpoints in einer bestimmten Größe anzeigen zu lassen. Wenn ich die integrierte responsive images Funktionalität von Typo3 6.2.x nutzen möchte, blicke ich nicht mehr durch, wie geht das?

Laut einigen Suchergebnissen verwendet man bei Typo3 scheinbar eine Kombination aus scrset und picturefill von Scott Jehl. scrset kann man über "Templates" -> "Kontanten Editor" -> "Rendering-type for responsive image." einstellen. Wenn man ohne picturefill scrset verwendet, dann sieht man bei einem eingefügten Bild-Text-Element bereits einen Effekt, nämlich, dass das Bild beim größer oder kleiner werden des Bildschirms fließend kleiner oder größer wird. Folgenderweise sieht der Quellcode von meinem eingefügten Bild aus:

  1. ><img src="fileadmin/user_upload/testbildv2.jpg" srcset="fileadmin/_processed_/csm_testbildv2_5b0f99b576.jpg 600w,fileadmin/_processed_/csm_testbildv2_72e45b5d2e.jpg 600w 2x" alt="">

Jetzt möchte ich aber gleich zu Beginn die responsive images Funktionalität richtig verwenden. Einige klagen bei srcset darüber, dass sowohl die großen und kleinen Bilder bei dem Öffnen der Webseite geladen werden und dass alte Browser die Funktionalität nicht erkennen.

Bei folgendem Beitrag liefert Matthias Eberlein scheinbar einen guten Ansatz (https://forum.typo3.org/index.php/t/203412/-typo3-german-6-2-und-responsive-images). Er fügt im Head-Bereich picturefill.min.js ein, dann einen einen längeren Typoscript-Code im Setup des Haupttemplates (Browserabfrage und verschiedene Breakpoints) und dann folgendes:

  1. styles.content.imgtext.layoutKey = picturefill

Doch scheint bei mir Typo3 den layoutKey "picturefill" nicht zu erkennen.

Kann mir einer einen Hinweis geben, wie ich weiter voran komme und welcher Workflow sich etabliert hat?

Beste Grüße
Tolga