Embed Size (px)
Citation preview
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' => [
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,
]
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
