kerox/twig-image-placeholder-extension

A Twig extension to generate images placeholder

v1.0.0 2020-03-21 09:14 UTC

This package is auto-updated.

Last update: 2020-06-05 18:36:52 UTC


README

Build Coverage Code Quality PHP Version Downloads Latest Stable Version License

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\SvgExtension: ~

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

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

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.