A Twig extension to generate images placeholder

v2.0.0 2022-10-23 17:53 UTC

This package is auto-updated.

Last update: 2023-01-23 22:58:23 UTC


Build Coverage PHP Version Downloads Latest Stable Version License

Twig Image Placeholder Extension

A Twig extension to generate images placeholder

Inspired by simple-svg-placeholder


You can install the extension using Composer:

composer require kerox/twig-image-placeholder-extension


If you are using Symfony Flex you're done.

Otherwise, add the following lines to your services.yaml


  Kerox\TwigImagePlaceholder\SvgPlaceholderExtension: null


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

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

$twig = new \Twig\Environment($loader);


The following functions are available



{{ svg_placeholder() }}


{{ svg_placeholder(150, 150) }}


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


{{ 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,">

Options Reference

Option Type Default Description
text string,null,false Placeholder dimensions The text to display. If set to false, element text will not be added to the svg.
fontFamily string sans-serif The font to use for the text. For data URIs, this needs to be a system-installed font.
fontWeight string bold
fontSize float 20% of the shortest image dimension, rounded down.
dy float 35% of the fontSize Adjustment applied to the dy attribute of the text element so it will appear vertically centered.
bgColor string #ddd The background color of the image. Defaults to #ddd.
textColor string rgba(0,0,0,0.5) The color of the text. For transparency, use an rgba or hsla color value.
class string If provide, add a class attribute to the svg element.