RESPONSIVE IMAGES TYPO3 CROP VARIANTENDAS SIZES ATTRIBUT Das sizes Aribu t erweitert den u nd w ird...

RESPONSIVE IMAGES&

TYPO3 CROP VARIANTEN /   / Dirk Döring @faulancr in2code

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

ÄNDERUNG DER AUFLÖSUNGBandbreite sparen, insbesondere mobil bei kleinerenBildern, folglich:Schneller LadezeitenHöhere Bildqualität bei HighRes Bildern

ART DIRECTIONÄnderung am DetailgehaltÄnderung des Seitenformat

ÄNDERUNG DER AUFLÖSUNG

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; }

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">

DAS SRCSET ATTRIBUT – MOBILEMobile: der Viewport entspricht ungefähr der

Bildbreite. Unser srscet a�ribut grei� und funk�oniert.

DAS SRCSET ATTRIBUT – DESKTOPDesktop: Der Viewport ist größer als die gewünschte

Bildbreite. Unser srscet a�ribut grei� nicht.

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">

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">

ART DIRECTION

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>

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>

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

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>

CROPVARIANT?CROPVARIANT!

Auf den cropVariant Paramter können wir per fluidsowohl im f:image oder f:uri ViewHelper zugreifen. 

Aber Woher kommt der Wert?

CROPVARIANT IN TYPO3Seit TYPO3 8 lassen sich redak�onell über das "Image‐Manipula�on" Tool im Backend Crop‐Varianten über

folgende Wege vordefinieren.

TypoScriptTCA

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

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' => [

WAS TUT ES?Rambo 3 - It Turns Blue

TYPO3 BILD MANIPULATIONMIt den crop Varianten bekommen wir im Backend die

Möglichkeit, dem Redakteur Vorgaben für denBildzuschni� mitzugeben.

TYPO3 BILD MANIPULATION

BILD MANIPULATION - COVER AREAS

BILD MANIPULATION - FOCUS AREAS

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,

]

DEMO TIMECropVariants Demo

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.

FRAGEN?

DANKE