Responsive Images mit TYPO3 8.7

Slides zu meinem Talk über Responsive Images in Verbindung mit den neuen Cropping-Funktionen in TYPO3 8.7.
#t3chh #t3muh

Transcript

1. Real Values. Simon Praetorius
 Kleine Bilder, große Wirkung Responsive Images mit TYPO3 8.7
2. Real Values. ➊ TYPO3 8.7 Feature: #75880 - Implement multiple cropping variants in image manipulation tool https://goo.gl/NceJGL Feature: #79812 - Allow overriding cropVariants for Image Manipulation https://goo.gl/JwjCd6 Feature: #79883 - Add cropVariant support to TypoScript rendering of images https://goo.gl/aC4Qkk
3. Real Values. ➊ TYPO3 8.7 •Konfiguration mehrerer Seitenverhältnisse •Setzen eines Fokuspunkts („focus area“) •Definieren von „cover areas“ •unterschiedliche Versionen eines Bildes („crop variants“) •Definition im TCA und per TSconfig
4. Real Values. Erlaubte Seitenverhältnisse 'config' => [ 'type' => 'imageManipulation', 'cropVariants' => [ 'desktop' => [ 'allowedAspectRatios' => [ '16:9' => [ 'title' => 'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.ratio.16_9', 'value' => 16 / 9 ], '4:3' => [ 'title' => 'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.ratio.4_3', 'value' => 4 / 3 ], 'NaN' => [ 'title' => 'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.ratio.free', 'value' => 0.0 ] ] ] ] ]
5. Real Values. Erlaubte Seitenverhältnisse
6. Real Values. Fokuspunkt 'config' => [ 'type' => 'imageManipulation', 'cropVariants' => [ 'desktop' => [ 'focusArea' => [ 'x' => 1 / 3, 'y' => 1 / 3, 'width' => 1 / 3, 'height' => 1 / 3 ] ] ] ]
7. Real Values. Fokuspunkt
8. Real Values. Cover Areas 'config' => [ 'type' => 'imageManipulation', 'cropVariants' => [ 'desktop' => [ 'coverAreas' => [ [ 'x' => 0.05, 'y' => 0.85, 'width' => 0.9, 'height' => 0.1 ] ] ] ] ]
9. Real Values. Cover Areas
10. Real Values. Crop Variants 'config' => [ 'type' => 'imageManipulation', 'cropVariants' => [ 'mobile' => [ 'title' => 'Mobile', 'allowedAspectRatios' => [ '1:1' => [ 'title' => 'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.ratio.1_1', 'value' => 1 ] ] ], 'desktop' => [ 'title' => 'Desktop', 'allowedAspectRatios' => [ '16:9' => [ 'title' => 'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.ratio.16_9', 'value' => 16 / 9 ] ] ] ] ]
11. Real Values. Crop Variants
12. Real Values. ➋ Responsive Images •sparen Bandbreite •optimieren Ladezeiten •liefern hochaufgelöste Bilder für HighDPI-Screens •bieten zusätzliche gestalterische Möglichkeiten
 (Art Direction)
13. Real Values. ➋ Responsive Images •srcset-Attribut: Unterschiedliche Bildgrößen <img srcset="image@400.jpg 400w, image@800.jpg 800w"> •sizes-Attribut: Welche Größe wird wann verwendet? <img sizes="(min-width: 1000px) 1000px, 100vw"> •picture-Tag: Art Direction und neue Dateitypen <picture>
 <source srcset="desktop.jpg" media="(min-width: 1000px)">
 <img src="mobile.jpg">
 </picture>
14. Real Values. ➌ Responsive Images mit TYPO3 •Extension: sms_responsive_images
 github.com/sitegeist/sms-responsive-images •erweiterte Fluid-ViewHelper •ImageViewHelper •MediaViewHelper •Basis-Konfiguration für fluid_styled_content •Demo-PlugIn
15. Real Values. ViewHelper •srcset-Attribut: Unterschiedliche Bildgrößen <sms:media srcset="400, 800" /> •sizes-Attribut: Welche Größe wird wann verwendet? <sms:media sizes="(min-width: 1000px) 1000px, 100vw" /> •breakpoints-Attribut: Art Direction <sms:media breakpoints="{ 0: {cropVariant: 'desktop', media: '(min-width: 1000px)', srcset: '1000, 1500'}, 1: {cropVariant: 'mobile', srcset: '400, 800'} }" />
16. Real Values. Demo
17. Real Values. Bonus: Best-Practices •picturefill.js einsetzen •reine HighDPI-Optimierung häufig kontraproduktiv •picture für besondere Elemente •srcset/sizes für die Masse •nicht übertreiben ;-)
18. Real Values. Links Extension github.com/sitegeist/sms-responsive-images sitegeist @sitegeist_de / techblog.sitegeist.de Simon Praetorius @s2bproject / @somethingphp
19. Real Values. Vielen Dank!