mblode/svgplaceholder

A plugin which generates an invisible SVG of specific dimensions for use when lazyloading images in Craft CMS templates.

SVG Placeholder plugin for Craft CMS 3.x

A plugin which generates an invisible SVG of specific dimensions for use when lazyloading images in Craft CMS templates., _(*1)

Requirements

This plugin requires Craft CMS 3.0.0-beta.23 or later., _(*2)

Installation

To install the plugin, follow these instructions., _(*3)

1. Open your terminal and go to your Craft project:, _(*4)

   cd /path/to/project

2. Then tell Composer to load the plugin:, _(*5)

   composer require mblode/svgplaceholder

3. In the Control Panel, go to Settings → Plugins and click the “Install” button for svgplaceholder., _(*6)

Usage

{{ craft.svgplaceholder.generate({height:500,width:'300'}) }}

Optionally add a background color with the fill attribute:, _(*7)

{{ craft.svgplaceholder.generate({height:500,width:'300'},'#CCCCCC') }}

Example

When used with Lazysizes and a macro:, _(*8)

_macros/utilities.html, _(*9)

{% macro lazyLoadImage(element, transform) %}
        {% cache using key element.id %}
            <img class="lazyload" src="{{ craft.svgplaceholder.generate({ height: element.height(transform), width: element.width(transform) }) }}" data-src="{{ element.url(transform) }}" alt="{{ element.title }}">
        {% endcache %}
{% endmacro %}

index.html, _(*10)

{% import '_macros/utilities' as utils %}

...

{{ utils.lazyLoadImage(image, 'imageTransformName') }}

Brought to you by Matthew Blode, _(*11)

Based on the Craft CMS 2 plugin: SVG Placeholder, _(*12)