minifranske/lazy-load-placeholder

Create placeholders for lazy loading images for instance based on the dominant image color

0.0.2 2021-04-15 10:16 UTC

Requires

• ksubileau/color-thief-php: ^1.3.0
• typo3/cms-core: >=9.5.0

GPL-2.0+

• extension
• images
• placeholder
• typo3
• lazyloading
• dominant-color

README

This extension adds metadata extractor that detects/calculates the dominant color of an images after upload. The dominant color can be used in FE rendering of images to fill the empty places of the lazy loaded images.

Features:

• metadata extractor to pick/store the dominant color of every uploaded image
• llp:lazyImage viewhelper that can be used as replacement of f:image the src becomes a data:image/svg+xml;base64 string that holds a svg placeholder image in the dominant color the real image is added to data-src
• property dominant_color is added to the properties of every image object {image.properties.dominant_color}

This extension is inspired by the blog Dominant Colors for Lazy-Loading Images and uses ksubileau/color-thief-php to detect the dominant color of the image.