Inline SVG placeholder images with lazy loading

Installs: 436

Dependents: 0

Suggesters: 0

Security: 0


v1.1.1 2019-12-17 07:53 UTC

This package is auto-updated.

Last update: 2021-11-17 12:05:37 UTC


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.


  • TYPO3 v8.0+
  • Foundation 6 (or Foundation.Interchange Plugin)


This extension is currently composer based. The next version will have shipped dependencies to install in non composer TYPO3 installations.

  • install dependencies `composer require ksubileau/color-thief-php`
  • install Extension via Extension Manager
  • select static typoscript template


The Javascript File is automatically included via `includeJSFooterLibs`. This can be disabled by unsetting

plugin.bw_placeholder_images.settings.placeholderImagesJS = EXT:bw_placeholder_images/Resources/Public/JavaScript/placeholderImages.js


The color extraction starts automatically after uploading any `jpg, jpeg, giforpng` image via FAL.


Register the viewhelpers in any fluid template.

{namespace bw=Blueways\BwPlaceholderImages\ViewHelpers}


This viewhelper acts like the normal `<f:image />viewhelper, however there is an svg image output of the referencedsrcorimage`. The final images are added via `additionalAttributes` in Foundation Interchange style.

Example with different crop variants:

    additionalAttributes="{data-lazy-interchange: '
        [{f:uri.image(image:mediaElement,maxWidth:\'600\', cropVariant:\'small\')}, small],
        [{f:uri.image(image:mediaElement,maxWidth:\'500\', cropVariant:\'medium\')}, medium],
        [{f:uri.image(image:mediaElement,maxWidth:\'450\', cropVariant:\'large\')}, large]


Acts like `<f:uri.image />` 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:

    style='background-image: url("{bw:lazyPlaceholder(src:'{}')}");'
    data-lazy-interchange="[{f:uri.image(src:'{}', maxWidth:'640')}, small]"

Attention: The `style=''` Tag needs to be rendered with single quotes.


  • include dependencies in package
  • make fallback color editable via typoscript
  • animate image switch