Responsive Images

&

TYPO3 crop varianten

Dirk Döring / @faulancr / in2code

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

Änderung der Auflösung

  • Bandbreite sparen, insbesondere mobil bei kleineren Bildern, folglich:
  • Schneller Ladezeiten
  • Hö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ötigt


                        Responsive Image
                

Im CSS alle Bilder dem Contentbereich anpassen


                        img{
                            max-width: 100%;
                            height: auto;
                        }
                

Das srcset Attribut

Das srcset Attribut erweitert <img> um weitere Bilder in unterschiedlicher Auflösung. Der Wert hinter dem Bild gibt dem Browser die Größe des Bildes an.


                Responsive Image
                

Problem: Der Browser entscheidet welches Bild genommen wird. Er zieht dazu den Viewport und Pixeldichte heran.

Das srcset Attribut – Mobile

Mobile: der Viewport entspricht ungefähr der Bildbreite. Unser srscet attribut greift und funktioniert.

Das srcset Attribut – Desktop

Desktop: Der Viewport ist größer als die gewünschte Bildbreite. Unser srscet attribut greift nicht.

Das sizes Attribut

Das sizes Attribut erweitert den <img> und wird benötigt, wenn man Breitenangaben macht.


                Responsive Image
                

Die komma-separierte Liste beschreibt die Größe des Bildes in Relation zum Viewport.

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ültig, ist der Viewport also größer als 900px, ist das Bild 640px.

Art Direction

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.


                    
                        
                        
                        
                        alternative text
                    
                

Hinweis: Jedes <source> kann wiederum media und sizes Attribute enthalten. Hierdurch kann das Picture Konstrukt sehr komplex werden.

Der <source> Tag

Dem <source> Tag lassen sich nun auch für bestimmte Viewports völlig unterscheidliche Bilder mitgeben, die dann um sizes und Auflöung erweitern lassen.


                    
                        
                        
                        alternative text
                    
                

Wie können wir das jetzt in TYPO3 nutzen?

TYPO3 8 (LTS)

Ausgehend von Fluid-Styled Content werden Bilder mit dem f:media Viewhelper gerendert.


                    
                

Ausgabe


                    alternative text
                

FLUID to the rescue

Wir erstellen mit fluid unser eigenes <picture> Element


                    
                        
                        
                        
                        
                        
                    
                

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?

cropVariant in TYPO3

Seit TYPO3 8 lassen sich redaktionell über das "Image-Manipulation" Tool im Backend Crop-Varianten über folgende Wege vordefinieren.

  • TypoScript
  • TCA

cropVariants mit TypoScript


                    TCEFORM.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
                                    value = 0.0
                                }
                            }
                        }

                        tablet < .default
                        tablet {
                            title = Tablet
                        }

                        phone < .default
                        phone {
                            title = Phone
                        }
                    }
                

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' => [
                                    '1400:800' => [
                                        'title' => '1400:800',
                                        'value' => 1400 / 800
                                    ]
                                ],
                                'coverAreas' => [
                                    [
                                        'x' => 0,
                                        'y' => 0,
                                        'width' => 1,
                                        'height' => 0.1,
                                    ],
                                    [
                                        'x' => 0,
                                        'y' => 0.9,
                                        'width' => 1,
                                        'height' => 0.1,
                                    ]
                                ],
                            ],
                            'tablet' => [
                                'title' => 'Tablet',
                                'allowedAspectRatios' => [
                                    '600:600' => [
                                        'title' => '1 : 1',
                                        'value' => 1 / 1
                                    ]
                                ]
                            ],
                            'mobile' => [
                                'title' => 'mobile',
                                'allowedAspectRatios' => [
                                    '3:4' => [
                                        'title' => '3:42',
                                        'value' => 300 / 400
                                    ]
                                ]
                            ],
                            '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,
                                    ],
                                ],
                                'focusArea' => [
                                    'x' => 1 / 2,
                                    'y' => 0,
                                    'width' => 1 / 4,
                                    'height' => 1,
                                ],
                            ]
                        ],
                    ];
                

Vorteil: anwendbar auf unterschiedliche Content Types

Was tut es?

TYPO3 Bild Manipulation

MIt den crop Varianten bekommen wir im Backend die Möglichkeit, dem Redakteur Vorgaben für den Bildzuschnitt mitzugeben.

TYPO3 Bild Manipulation

Bild Manipulation - Cover Areas

Bild Manipulation - Focus Areas

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,
                                    ],
                                ],
                                'focusArea' => [
                                    'x' => 1 / 2,
                                    'y' => 0,
                                    'width' => 1 / 4,
                                    'height' => 1,
                                ],
                            ]
                        ]
                

Easy

Demo Time

CropVariants Demo

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 optimale Bild für die Auflösung und Größe zu wählen
  • Mit dem <picture> Element und media Attributen lässt sich gezielt der Bildinhalt je nach Auflösung steuern.

Fragen?

Danke