ed.sukharev/twig-picture-extension

A Twig extension to generate picture tags

1.0.0 2019-05-10 08:59 UTC

Requires

• php: >=5.3.3
• twig/twig: >=1.0,<=1.36.0

Requires (Dev)

• doctrine/instantiator: ~1.0.5
• phpdocumentor/reflection-docblock: ~2.0.5
• phpunit/phpunit: ~4.8

Suggests

• ext-fileinfo: Allows for more precise MIME type generation

MIT

• Eduard Sukharev

• twig
• images
• pictures

README

A custom twig extension to add tags with multiple source type to aid new image types adoption (WebP now).

Installation

Add the library to your app's composer.json:

    "require": {
        "ed.sukharev/twig-picture-extension": "~1.0",
        ...
    }

Add the extension to the Twig_Environment:

use PictureExtension\Twig\Extension\Picture;

$twig = new Twig_Environment(...);

$twig->addExtension(new Picture());

Usage

The extension provides a picture twig function, which generates a picture tag with a set of sources and fallback img tag:

{{ picture('/img/path/filename.png', 'My image alt text') }}

Which creates following output:

<picture>
    <source srcset="/img/path/filename.webp" type="image/webp">
    <source srcset="/img/path/filename.png" type="image/png">
    <img src="/img/path/filename.png" alt="My image alt text">
</picture>

Arguments

The picture function accepts 3 arguments:

picture($filename, $imgAlt, $imgClasses = [])

• filename: The filename of original image. Picture function substitutes the extension with appropriate when needed.
• alt: This is alternative text to be shown when image not available. Required so that you don't forget to add it.
• imgClasses: Array of strings to be added to class attribute of fallback img tag.

Symfony2

Add a service manually

# app/config/config.yml

services:
    pciture_extension.twig.picture:
        class: PictureExtension\Twig\Extension\Picture
        tags:
            - { name: twig.extension }