![Page 1: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/1.jpg)
RESPONSIVE IMAGES&
TYPO3 CROP VARIANTEN / / Dirk Döring @faulancr in2code
![Page 2: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/2.jpg)
WARUM RESPONSIVE IMAGES?Der Einsatz von responsiven Bildern im Web gehörtinzwischen zum Standard‐Repertoire modernen
Webdesign. Es gibt zwei Hauptgründe für responsiveBilder
1. ÄNDERUNG DER AUFLÖSUNG
2. ART DIRECTION
![Page 3: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/3.jpg)
ÄNDERUNG DER AUFLÖSUNGBandbreite sparen, insbesondere mobil bei kleinerenBildern, folglich:Schneller LadezeitenHöhere Bildqualität bei HighRes Bildern
![Page 4: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/4.jpg)
ART DIRECTIONÄnderung am DetailgehaltÄnderung des Seitenformat
![Page 5: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/5.jpg)
ÄNDERUNG DER AUFLÖSUNG
![Page 6: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/6.jpg)
DER <IMG> TAG<img> wird immer benö�gt
Im CSS alle Bilder dem Contentbereich anpassen
<img src="image.jpg" class="image__rwd" alt="Responsive Image">
img{ max-width: 100%; height: auto; }
![Page 7: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/7.jpg)
DAS SRCSET ATTRIBUTDas srcset A�ribut erweitert <img> um weitere Bilderin unterschiedlicher Auflösung. Der Wert hinter demBild gibt dem Browser die Größe des Bildes an.
Problem: Der Browser entscheidet welches Bild genommen wird. Er zieht dazu denViewport und Pixeldichte heran.
<img src="mtug-portrait_160.jpg" srcset=" mtug-portrait_320.jpg 320w, mtug-portrait_640.jpg 640w, mtug-portrait_960.jpg 960w" alt="Responsive Image">
![Page 8: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/8.jpg)
DAS SRCSET ATTRIBUT – MOBILEMobile: der Viewport entspricht ungefähr der
Bildbreite. Unser srscet a�ribut grei� und funk�oniert.
![Page 9: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/9.jpg)
![Page 10: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/10.jpg)
DAS SRCSET ATTRIBUT – DESKTOPDesktop: Der Viewport ist größer als die gewünschte
Bildbreite. Unser srscet a�ribut grei� nicht.
![Page 11: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/11.jpg)
![Page 12: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/12.jpg)
DAS SIZES ATTRIBUTDas sizes A�ribut erweitert den <img> und wirdbenö�gt, wenn man Breitenangaben macht.
Die komma‐separierte Liste beschreibt die Größe des Bildes in Rela�on zum Viewport.
<img src="mtug-portrait_160.jpg" srcset=" mtug-portrait_320.jpg 320w, mtug-portrait_640.jpg 640w, mtug-portrait_960.jpg 960w" sizes=" (max-width: 640px) 100vw, (max-width: 960px) 33vw, 640px" alt="Responsive Image">
![Page 13: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/13.jpg)
DAS SIZES ATTRIBUT
(max‐width: 640px) 100vw Ist der Viewport kleiner als 640px, ist das Bild 100% des Viewports breit.
(max‐width: 960px) 33vw Ist der Viewport kleiner als 960px und größer als 640px, ist das Bild 33% des Viewports
breit.
640px Sind keine MediaQueries gegeben oder gül�g, ist der Viewport also größer als 900px, ist
das Bild 640px.
<img sizes=" (max-width: 640px) 100vw, (max-width: 960px) 33vw, 640px">
![Page 14: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/14.jpg)
ART DIRECTION
![Page 15: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/15.jpg)
DER <PICTURE> TAGDer <picture> Tag erlaubt uns dem Browser exaktmitzuteilen, welches Bild bei welcher Auflösung
genommen werden soll, da es auf weitere <source>zugreifen kann.
Hinweis: Jedes <source> kann wiederum media und sizes A�ribute enthalten. Hierdurchkann das Picture Konstrukt sehr komplex werden.
<picture> <source srcset="mtug-portrait_960.jpg" media="(min-width: 960p <source srcset="mtug-portrait_640.jpg" media="(min-width: 640p <source srcset="mtug-portrait_320.jpg"> <img src="mtug-portrait_320.jpg" alt="alternative text"> </picture>
![Page 16: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/16.jpg)
DER <SOURCE> TAGDem <source> Tag lassen sich nun auch für bes�mmteViewports völlig unterscheidliche Bilder mitgeben, die
dann um sizes und Auflöung erweitern lassen.
Wie können wir das jetzt in TYPO3 nutzen?
<picture> <source srcset="mtug-landscape.jpg, mtug-landscape_2x.jpg 2x" <source srcset="mtug-portrait_640.jpg, mtug-portrait_640_2x.jp <img src="mtug-landscape.jpg" alt="alternative text"> </picture>
![Page 17: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/17.jpg)
TYPO3 8 (LTS)Ausgehend von Fluid‐Styled Content werden Bilder
mit dem f:media Viewhelper gerendert.
Ausgabe
<f:media file="{file}" width="{dimensions.width}" height="{dim</f:media>
<img src="mtug-landscape.jpg" width="1920" height="1080" class="im
![Page 18: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/18.jpg)
![Page 19: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/19.jpg)
FLUID TO THE RESCUEWir erstellen mit fluid unser eigenes <picture>
Element<picture> <source srcset="{f:uri.image(image:file,width:'1920',cropVari <source srcset="{f:uri.image(image:file,width:'1200', cropVar <source srcset="{f:uri.image(image:file,width:'768', cropVari <source srcset="{f:uri.image(image:file,width:'480', cropVari <f:image image="{file}" cropvariant="phone" width="480" alt="</f:image></picture>
![Page 20: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/20.jpg)
CROPVARIANT?CROPVARIANT!
Auf den cropVariant Paramter können wir per fluidsowohl im f:image oder f:uri ViewHelper zugreifen.
Aber Woher kommt der Wert?
![Page 21: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/21.jpg)
CROPVARIANT IN TYPO3Seit TYPO3 8 lassen sich redak�onell über das "Image‐Manipula�on" Tool im Backend Crop‐Varianten über
folgende Wege vordefinieren.
TypoScriptTCA
![Page 22: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/22.jpg)
CROPVARIANTS MIT TYPOSCRIPTTCEFORM.sys_file_reference.crop.config.cropVariants { default { title = Desktop allowedAspectRatios { 16:9 { title = 16:9 value = 1.77778 }
4:3 { title = 4:3 value = 1.33333 }
NaN { title = Frei
![Page 23: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/23.jpg)
CROPVARIANTS MIT TCA
Vorteil: anwendbar auf unterschiedliche Content Types
$GLOBALS['TCA']['tt_content']['types']['textmedia'] ['columnsOverrides']['assets']['config'] ['overrideChildTca']['columns']['crop']['config'] = [ 'cropVariants' => [ 'desktop' => [ 'title' => 'Hero', 'allowedAspectRatios' => [ '16:9' => [ 'title' => '1600:900', 'value' => 1600 / 900 ] ], ], 'landscape' => [ 'title' => 'Landscape mit Cover Areas',
'allowedAspectRatios' => [
![Page 25: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/25.jpg)
TYPO3 BILD MANIPULATIONMIt den crop Varianten bekommen wir im Backend die
Möglichkeit, dem Redakteur Vorgaben für denBildzuschni� mitzugeben.
![Page 26: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/26.jpg)
TYPO3 BILD MANIPULATION
![Page 27: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/27.jpg)
BILD MANIPULATION - COVER AREAS
![Page 28: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/28.jpg)
![Page 29: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/29.jpg)
BILD MANIPULATION - FOCUS AREAS
![Page 30: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/30.jpg)
![Page 31: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/31.jpg)
TCA
Easy
'cropVariants' => [ 'hero_focus' => [ 'title' => 'Hero Focus goldener Schnitt', 'allowedAspectRatios' => [ '16:9' => [ 'title' => '1600:900', 'value' => 1600 / 900 ] ], 'coverAreas' => [ [ 'x' => 1 / 4, 'y' => 0, 'width' => 1 / 4, 'height' => 1,
]
![Page 33: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/33.jpg)
FAZITFür die meisten Bilder genügt es die Auflösung zuändernMit srcset gibt man dem Browser die Möglichkeitenan die Hand, das op�male Bild für die Auflösung undGröße zu wählenMit dem <picture> Element und media A�ributenlässt sich gezielt der Bildinhalt je nach Auflösungsteuern.
![Page 34: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/34.jpg)
FRAGEN?
![Page 35: RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird benögt , wenn m an Breitenangaben m ac ht . Die komma‐separierte](https://reader034.vdokument.com/reader034/viewer/2022042105/5e82ee4155aaae52fa0c83ca/html5/thumbnails/35.jpg)
DANKE