README

Twig Image Placeholder Extension

A Twig extension to generate images placeholder

Inspired by simple-svg-placeholder

Installation

You can install the extension using Composer:

composer require kerox/twig-image-placeholder-extension

Symfony

If you are using Symfony Flex you're done.

Otherwise, add the following lines to your services.yaml

services:
  ...

  Kerox\TwigImagePlaceholder\SvgPlaceholderExtension: null

Standalone

If you use Twig as standalone, then you need to add the extension manually

$extension = new \Kerox\TwigImagePlaceholder\SvgPlaceholderExtension();

$twig = new \Twig\Environment($loader);
$twig->addExtension($extension);

Usage

The following functions are available

SvgExtension
- svg_placeholder()
- svg_placeholder_uri()

Examples

Default

{{ svg_placeholder() }}

Size

{{ svg_placeholder(150, 150) }}

Colors

{{ svg_placeholder(300, 150, {
    bgColor: '#0f1c3f' , 
    textColor: '#7fdbff'
}) }}

Text

{{ svg_placeholder(300, 150, {
   text: 'Foo Bar'
}) }}

Or Without:

{{ svg_placeholder(300, 150, {
   text: false
}) }}

Data URI

<img src="{{ svg_placeholder_uri() }}">

will output

<img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22150%22%20viewBox%3D%220%200%20300%20150%22%3E%3Crect%20fill%3D%22%23ddd%22%20width%3D%22300%22%20height%3D%22150%22%3E%3C%2Frect%3E%3Ctext%20fill%3D%22rgba%280%2C0%2C0%2C0.5%29%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20font-weight%3D%22bold%22%20dy%3D%2210.5%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3E300x150%3C%2Ftext%3E%3C%2Fsvg%3E">

kerox / twig-image-placeholder-extension

Maintainers

Details