Bearbeiten von „TYPO3 - Responsive Images“

== Kurzeinführung ==
Quelle: http://t3n.de/magazin/typo3-6-2-lts-responsive-images-235194/

Derzeit aktuelle HTML-Lösungen binden die verschiedenen Bildgrößen im HTML als Ressource ein. Meist kommt dabei zusätzlicher JavaScript-Code zum Einsatz, um das DOM-Objekt der Seite entsprechend des Breakpoints zu modifizieren oder um einen Fallback für ältere Browser zu erstellen. Die drei gängigsten und am weitesten verbreiteten Lösungen sind dabei:

'''Picture Tag'''
<syntaxhighlight lang="html">
<picture alt="responsive image"> 
 <source xsrc="large.jpg" media="(min-width:1600px), (min-resolution: 136dpi) and (min-width:800px)">
 <source xsrc="medium.jpg" media="(min-width:800px), (min-resolution: 136dpi) and (min-width:400px)">
 <source xsrc="small.jpg">
 <!-- fallback --> 
 <img xsrc="small.jpg" alt="responsive image">
</picture>
</syntaxhighlight>

'''Srcset Attribute'''
<syntaxhighlight lang="html">
<img alt="responsive image" xsrc="small.jpg" srcset="large.jpg 1600w, large.jpg 800w 1.95x, medium.jpg 800w, medium.jpg 400w 1.95x">
</syntaxhighlight>

'''Data Attribute'''
<syntaxhighlight lang="html">
<img alt="responsive image" xsrc="small.jpg" data-large="large.jpg“ data-large-1.95x="large.jpg“ data-medium="medium.jpg“ data-medium-1.95x="large.jpg“>
</syntaxhighlight>

== Umsetzung über css_styled_content ==
Quelle: http://t3n.de/magazin/typo3-6-2-lts-responsive-images-235194/

Ab 6.2 sind über„css_styled_content“ bereits diese drei Lösungen vorbereitet. Ein Integrator muss nur noch eine passende JavaScript-Bibliothek auswählen und implementieren, dann stehen Responsive Images im Frontend zur Verfügung. Welche Responsive-Images-Lösung zum Einsatz kommen soll, lässt sich über die Konstante „styles.content.imgtext.layoutKey“ auswählen. Mögliche Werte sind dabei:

Werte der Konstante '''styles.content.imgtext.layoutKey'''
<pre>
Default	Rendering ohne Responsive Images
srcset	Rendering als Srcset Attribute
picture	Rendering als Picture Tag
data	Rendering als Data Attribute
</pre>

Nachdem die Konstante gesetzt ist, erstellt TYPO3 für jedes eingebundene Bild zwei verschiedene Auflösungen: zwei Bilder mit 600 Pixel Breite, eins für normale Displays und eins für ein Retina-Display.