For generating image styles on the fly, defined securely in twig.

With this module you will be enable to auto generate the correct image styles based upon a new twig function twigImage()

Features

Generating image styles on the fly defined in twig
Supporting crops
Additional rest service for decoupled setup

Installation

Install twig_image with composer
Enable the 'Twig image' module and desired sub-modules in 'Extend'.
(/admin/modules)
Define a image field (with in the display the default image style for fallback)

You render a responsive image with the following example:

{{ twigImage({
    image: content.field_image,
    sources: [
        {
            crop: 'portrait',
            width: 800,
            height: 400,
            media: '(min-width: 800em)',
            multipliers: [2]
        },
        {
            crop: 'landscape',
            width: 500,
            height: 400,
            media: '(min-width: 1200em)'
        }
    ],
    attributes: create_attribute().addClass('test').setAttribute('id', 'testid'),
    imgAttributes: create_attribute({
        'class': ['extraclass2'],
        id: 'uniqueId',
        loading: 'lazy',
        alt:'alt text override'
    }),
}) }}

Recommendations

Use config_ignore and add "image.style.twig_image*" to the blacklist, so they are ignored on importing.

Additional Requirements

No additional requirements, only image module from core.

Supported modules/libraries

Crop
WebP
Config Ignore

Similar projects

Easy responsive image

Twig image

Issues