https://github.com/mblode/svgplaceholder

A plugin which generates an invisible SVG of specific dimensions for use when lazyloading images in Craft CMS templates.
https://github.com/mblode/svgplaceholder

Last synced: about 1 year ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/mblode/svgplaceholder
• Owner: mblode
• License: mit
• Created: 2017-09-08T06:16:45.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2023-11-03T22:04:55.000Z (over 2 years ago)
• Last Synced: 2025-02-28T00:36:28.749Z (over 1 year ago)
• Language: PHP
• Homepage:
• Size: 14.6 KB
• Stars: 10
• Watchers: 3
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# 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.

## Requirements

This plugin requires Craft CMS 3.0.0-beta.23 or later.

## Installation

To install the plugin, follow these instructions.

1. Open your terminal and go to your Craft project:

        cd /path/to/project

2. Then tell Composer to load the plugin:

        composer require mblode/svgplaceholder

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

## Usage

```

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

```

Optionally add a background color with the fill attribute: 

```

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

```

## Example

When used with Lazysizes and a macro:

*_macros/utilities.html*

```

{% macro lazyLoadImage(element, transform) %}

        {% cache using key element.id %}

            

        {% endcache %}

{% endmacro %}

```

*index.html*

```

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

...

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

```

---

Brought to you by [Matthew Blode](https://matthewblode.com)

Based on the Craft CMS 2 plugin: [SVG Placeholder](https://github.com/daltonrooney/svgplaceholder)