Download the PHP package blueways/bw-placeholder-images without Composer
On this page you can find all versions of the php package blueways/bw-placeholder-images. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download blueways/bw-placeholder-images
More information about blueways/bw-placeholder-images
Files in blueways/bw-placeholder-images
Package bw-placeholder-images
Short Description Inline SVG placeholder images with lazy loading
License MIT
Informations about the package bw-placeholder-images
TYPO3 Extension: Placeholder Images
Generates SVG inline placeholder images from FAL Media elements. The Foundation Interchange plugin is configured to resolve the right responsive image. The SVG placeholder consists of three gradients with 9 different colors from the original FAL image to make it look more natural.
The color extrection code is based on Frans Saris lazy_load_placeholder TYPO3 extension. Lazy loading code inspired by Mika Tuupola. SVG inline compression is done like Taylor Hunt explained it in his blog post.
Requirements
- TYPO3 v8.0+
- Foundation 6 (or Foundation.Interchange Plugin)
Installation
This extension is installable only via composer.
- include TypoScript template
Configuration
The Javascript File is automatically included via . This can be disabled by unsetting
Useage
The color extraction starts automatically after uploading any or image via FAL.
Viewhelper
Register the viewhelpers in any fluid template.
bw:lazyImage
This viewhelper acts like the normal viewhelper, however there is an svg image output of the referenced or . The final images are added via in Foundation Interchange style.
Example with different crop variants:
bw:lazyPlaceholder
Acts like viewhelper.
Foundation Interchange can handle responsive background images, this viewhelper helps to generate the nessecary Output of an image resource path.
Example without crop variant and only one final image for all sizes:
Attention: The Tag needs to be rendered with single quotes.
TODO
- include dependencies in package
- make fallback color editable via typoscript
- animate image switch
All versions of bw-placeholder-images with dependencies
ksubileau/color-thief-php Version ^1.3.0
ext-json Version *
typo3/cms-filemetadata Version ^10.0 || ^11.0