RESPONSIVE IMAGES TYPO3 CROP VARIANTEN. Dirk Döring / in2code

Transkript

1 RESPONSIVE IMAGES & TYPO3 CROP VARIANTEN Dirk Döring / in2code

2 WARUM RESPONSIVE IMAGES? Der Einsatz von responsiven Bildern im Web gehört inzwischen zum Standard Repertoire modernen Webdesign. Es gibt zwei Hauptgründe für responsive Bilder 1. ÄNDERUNG DER AUFLÖSUNG 2. ART DIRECTION

3 ÄNDERUNG DER AUFLÖSUNG Bandbreite sparen, insbesondere mobil bei kleineren Bildern, folglich: Schneller Ladezeiten Höhere Bildqualität bei HighRes Bildern

4 ART DIRECTION Änderung am Detailgehalt Änderung des Seitenformat

5 ÄNDERUNG DER AUFLÖSUNG

6 DER <IMG> TAG <img> wird immer benö gt <img src="image.jpg" class="image rwd" alt="responsive Image"> Im CSS alle Bilder dem Contentbereich anpassen img{ max-width: 100%; height: auto; }

7 DAS SRCSET ATTRIBUT Das srcset A ribut erweitert <img> um weitere Bilder in unterschiedlicher Auflösung. Der Wert hinter dem Bild gibt dem Browser die Größe des Bildes an. <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"> Problem: Der Browser entscheidet welches Bild genommen wird. Er zieht dazu den Viewport und Pixeldichte heran.

8 DAS SRCSET ATTRIBUT MOBILE Mobile: der Viewport entspricht ungefähr der Bildbreite. Unser srscet a ribut grei und funk oniert.

9

10 DAS SRCSET ATTRIBUT DESKTOP Desktop: Der Viewport ist größer als die gewünschte Bildbreite. Unser srscet a ribut grei nicht.

11

12 DAS SIZES ATTRIBUT Das sizes A ribut erweitert den <img> und wird benö gt, wenn man Breitenangaben macht. <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"> Die komma separierte Liste beschreibt die Größe des Bildes in Rela on zum Viewport.

13 DAS SIZES ATTRIBUT <img sizes=" (max-width: 640px) 100vw, (max-width: 960px) 33vw, 640px"> (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.

14 ART DIRECTION

15 DER <PICTURE> TAG Der <picture> Tag erlaubt uns dem Browser exakt mitzuteilen, welches Bild bei welcher Auflösung genommen werden soll, da es auf weitere <source> zugreifen kann. <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> Hinweis: Jedes <source> kann wiederum media und sizes A ribute enthalten. Hierdurch kann das Picture Konstrukt sehr komplex werden.

16 DER <SOURCE> TAG Dem <source> Tag lassen sich nun auch für bes mmte Viewports völlig unterscheidliche Bilder mitgeben, die dann um sizes und Auflöung erweitern lassen. <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> Wie können wir das jetzt in TYPO3 nutzen?

17 TYPO3 8 (LTS) Ausgehend von Fluid Styled Content werden Bilder mit dem f:media Viewhelper gerendert. <f:media file="{file}" width="{dimensions.width}" height="{dim </f:media> Ausgabe <img src="mtug-landscape.jpg" width="1920" height="1080" class="im

18

19 FLUID TO THE RESCUE Wir 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>

20 CROPVARIANT? CROPVARIANT! Auf den cropvariant Paramter können wir per fluid sowohl im f:image oder f:uri ViewHelper zugreifen. Aber Woher kommt der Wert?

21 CROPVARIANT IN TYPO3 Seit TYPO3 8 lassen sich redak onell über das "Image Manipula on" Tool im Backend Crop Varianten über folgende Wege vordefinieren. TypoScript TCA

22 CROPVARIANTS MIT TYPOSCRIPT TCEFORM.sys_file_reference.crop.config.cropVariants { default { title = Desktop allowedaspectratios { 16:9 { title = 16:9 value = } 4:3 { title = 4:3 value = } NaN { title = Frei

23 CROPVARIANTS MIT TCA $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' => [ Vorteil: anwendbar auf unterschiedliche Content Types

24 Rambo 3 - It Turns Blue WAS TUT ES?

25 TYPO3 BILD MANIPULATION MIt den crop Varianten bekommen wir im Backend die Möglichkeit, dem Redakteur Vorgaben für den Bildzuschni mitzugeben.

26 TYPO3 BILD MANIPULATION

27 BILD MANIPULATION - COVER AREAS

28

29 BILD MANIPULATION - FOCUS AREAS

30

31 TCA '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, ] Easy

32 DEMO TIME CropVariants Demo

33 FAZIT Für die meisten Bilder genügt es die Auflösung zu ändern Mit srcset gibt man dem Browser die Möglichkeiten an die Hand, das op male Bild für die Auflösung und Größe zu wählen Mit dem <picture> Element und media A ributen lässt sich gezielt der Bildinhalt je nach Auflösung steuern.

34 FRAGEN?

35 DANKE