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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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

   View Slide

5. Real Values.
   Erlaubte Seitenverhältnisse
   

   View Slide

6. Real Values.
   Fokuspunkt
   'config' => [
   'type' => 'imageManipulation',
   'cropVariants' => [
   'desktop' => [
   'focusArea' => [
   'x' => 1 / 3,
   'y' => 1 / 3,
   'width' => 1 / 3,
   'height' => 1 / 3
   ]
   ]
   ]
   ]
   

   View Slide

7. Real Values.
   Fokuspunkt
   

   View Slide

8. Real Values.
   Cover Areas
   'config' => [
   'type' => 'imageManipulation',
   'cropVariants' => [
   'desktop' => [
   'coverAreas' => [
   [
   'x' => 0.05,
   'y' => 0.85,
   'width' => 0.9,
   'height' => 0.1
   ]
   ]
   ]
   ]
   ]
   

   View Slide

9. Real Values.
   Cover Areas
   

   View Slide

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

    View Slide

11. Real Values.
    Crop Variants
    

    View Slide

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)
    

    View Slide

13. Real Values.
    ➋ Responsive Images
    •srcset-Attribut: Unterschiedliche Bildgrößen
    
    •sizes-Attribut: Welche Größe wird wann verwendet?
    
    •picture-Tag: Art Direction und neue Dateitypen
    

    

    

    
    

    View Slide

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
    

    View Slide

15. Real Values.
    ViewHelper
    •srcset-Attribut: Unterschiedliche Bildgrößen
    
    •sizes-Attribut: Welche Größe wird wann verwendet?
    
    •breakpoints-Attribut: Art Direction
    
    

    View Slide

16. Real Values.
    Demo
    

    View Slide

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

    View Slide

18. Real Values.
    Links
    Extension
    github.com/sitegeist/sms-responsive-images
    sitegeist
    @sitegeist_de / techblog.sitegeist.de
    Simon Praetorius
    @s2bproject / @somethingphp
    

    View Slide

19. Real Values.
    Vielen Dank!
    

    View Slide