Responsive Images mit TYPO3 – Ergebnisse des T3DD Workshops

Mit Responsive Web Design (RWD) passen sich die Layouts von Webseiten ideal an die jeweiligen Ausgabegeräte an. Die Geschwindigkeit, mit der sich dieser neue Trend bei Webdesignern und deren Kunden durchsetzen konnte, ist – zumindest für Deutschland – erstaunlich. Doch damit die Technologie voll ausgenutzt werden kann, müssen auch die Bilder einer Webseite „responsiv“ werden. Dafür gibt es verschiedene Ansätze, die die Ausgabe von Bildern im Code sehr unterschiedlich handhaben.

Bisher war beim Content Management System TYPO3 die Kontrolle über die Bildausgabe per TypoScript nur sehr eingeschränkt möglich. Für die zukünftige Entwicklung ist es daher wichtig, eine flexible Bildeinbindung in die nächste Release-Version zu integrieren. So können zukünftig Webentwickler und TYPO3-Integratoren denjenigen Ansatz wählen, der am besten zu ihrem Designkonzept passt.

Das war die Zielsetzung unseres Workshops auf den TYPO3 Developer Days 2013 in Hamburg. Erste Ergebnisse zur Integration in die nächste LTS-Version von TYPO3 6.2 wurden erreicht. Als zusätzliches Schmankerl fiel sogar auch noch eine Extension ab, die die flexible Ausgabe von Responsive Images mit TYPO3 auch in alten Versionen ermöglicht.

Workshop-Zusammenfassung

Wir hatten für die TYPO3 Developer Days in Hamburg einen Workshop vorbereitet, um in der nächsten TYPO3 Long Term Support Version (6.2 LTS) das Rendering der Bilder für Responsive Webdesign nutzbar zu machen. Innerhalb eines Tages hat das Workshop-Team gemeinsam die derzeit angewendeten Methoden für responsive Images analysiert und einen entsprechenden Vorschlag für die Implementierung in TYPO3 erarbeitet.

Hintergrund Responsive Images mit TYPO3

Status bis 6.2

In den aktuellen TYPO3 Versionen (bis 6.1) wird ein Bild immer mit einem
<img alt="" />
Tag im HTML erzeugt. Zur Umsetzung eines responsive Webdesigns muss eine Lösung gefunden werden, die sich flexibel auf die Breiten und Auflösungen der Anzeigegeräte anpasst. Aktuelle Lösungen (stand Juli 2013) basieren dabei auf folgenden HTML Konstruktionen, zur entsprechenden Anzeige der Bilder wird dann via Javascript das DOM Modell der Seite dynamisch angepasst:

  • Bild ohne Größen und Weiten, die verschiedenen Auflösungen werden dabei als zusätzliche Attribute eingebunden
    <img alt=".." src="small.jpg" data-medium="medium.jpg" data-1="1.jpg" />
  • Bild ohne Größen und Weien, die verschiedenen Auflösungen werden dabei als srcset Attribut genutzt
    <img alt="foo" src="1.jpg" srcset="1.jpg, 2.jpg 800w" />
  • HTML5 Picture Tag
    <img alt="Description of image subject." src="small.jpg" />
  • Noscript Tag zur Übergabe der verschiedenen Bilder in Kombination eines Bild ohne Größen und Weiten
    <noscript data-large="Koala.jpg" data-small="Koala-small.jpg" data-small-highres="Koala.jpg" data-alt="Koala">
    <img src="Koala.jpg" alt="Koala" />
    </noscript>

 

Umsetungsvorschlag aus dem Workshop

Im Workshop ist eine Lösung erarbeitet worden, die im TYPO3 Core eine Flexibilität beim Imagerendering nachrüstet. Sofern der Integrator keine speziellen Konfigurationen vornimmt, erzeugt TYPO3 weiterhin den normalen HTML Code. Der Nutzer hat aber die Möglichkeit ein alternatives Rendering zu wählen, das Rendering selbst ist dabei eine TypoScript-Konfiguration die in der Systemextension css_styled_content bereits konfiguriert ist. Durch eine TypoScript-Ergänzung kann man dies auch um ein eigenes abweichendes Rendering ergänzen, bzw. nachrüsten wenn sich im Bereich Responsive Webdesign weitere Ansätze ergeben.

Status

Die Anpassung im Core ist bereits während des Workshops als Change für TYPO3 angelegt worden, zur Dokumentation steht jetzt auch ein entsprechendes Issue auf forge.typo3.org zur Verfügung.

Als nächstes soll die Anpassung im css_styled_content finalisiert werden, so dass in den nächsten Wochen ein entsprechender Patch für den Core erstellt werden kann. Weitere Informationen zu dem Projekt (in englisch) sind im Etherpad von TYPO3 vermerkt.

UPDATE:

Inzwischen wurden die Arbeiten in einem weiteren Workshop vertieft:
Status Responsive Images für TYPO3 6.2 LTS

Share on Facebook15Tweet about this on TwitterShare on Google+12Pin on Pinterest0

Über Ingo Schmitt

Spricht Typoscript, php, und sql. Perl und bash verhandlungssicher.Besitzt java Grundkenntnisse.
Ist als CTO in der Geschäftsleitung zuständig für Entwicklung und Betrieb und bloggt hier über alles was technisch interessant ist.

Homepage: http://www.marketing-factory.de

      Profile:
    • googleplus
    • linkedin
    • skype
    • twitter