Image Styles Builder

Image Styles Builder allows a developer to quickly create image styles in bulk, based on definition files.

The goal of this package is to enable the rapid creation of image styles by declaring them in a custom module file definition (YAML).

The primary aim of Image Styles Builder is to allow Frontend to declare many necessary image-styles and provide to Backend
developers a way to document and define those styles to be generated or flushed at any moment.

Use Image Styles Builder if

• You need to generate Drupal Images Styles quickly without using the UI
• You receive a definition/lists of Images Styles to generate from another co-worker/team
• You have a lot of Images Styles to generate at once
• You want to be able to generate Images Styles and Rollback them easily
• You want to be able to fetch a collection of Image Styles in Twig (must previously be defined with this module)

Getting Started

We highly recommend you to install the module using `composer` as a dev dependency.

Caution, If you desire to use the Twig Filter on production, then install the module a s root dependency instead of dev dependency.

composer require --dev drupal/image_styles_builder

Usage

Generating & Rollback of Image Styles

1. Create your own custom module that will contain your image styles definition(s).
2. Create your derivative definition file yourmodule.image_styles_builder_derivatives.yml:
   

   default:
     id: default
     label: Default
     suffix: dft
     styles:
       9_2_64x14:
         effects:
           -
             type: 'scale_and_crop'
             data:
               width: 64
               height: 14
       9_2_640x142:
         effects:
           -
             type: 'scale_and_crop'
             data:
               width: 640
               height: 142
       9_2_640x142_webp:
         effects:
           -
             type: 'scale_and_crop'
             data:
               width: 640
               height: 142
           -
             type: 'image_convert'
             data:
               extension: 'webp'
       16_10_64x40:
         effects:
           -
             type: 'scale_and_crop'
             data:
               width: 64
               height: 40
       16_10_128x80:
         effects:
           -
             type: 'scale_and_crop'
             data:
               width: 128
               height: 80
           -
             type: 'image_scale'
             data:
               width: 64
       original_64:
         effects:
           -
             type: 'image_scale'
             data:
               width: 64
   

3. Run the generate command to build your image styles in bulk.
   

   drush isb:gen
   

4. (optional) Export the new image styles configuration.
5. (optional) Rollback previously generated Image styles with the flush command.
   

   drush isb:flush
   

Fetch Image Styles in Twig

Once generated, you may want to fetch your image styles by definition. This is possible throughout the isb_image_styles Twig function.

Twig Example code

{% styles = isb_image_styles('default') %}
{{ styles|json_encode }}

Caution, If you desire to use the Twig Filter on production, then install the module a s root dependency instead of dev dependency.

Exposed Drush Commands

This module is shipped with drush commands to assist you in your workflow.

Generate Command

The Generate command will create new image styles (and skip existing ones) by discovering all the derivatives files (*.image_styles_builder_derivatives.yml)

drush isb:gen

Flush Command

The Flush command will delete every image styles that have been created during a previous isb:gen.
The discovery operation will be based on all the derivatives files (*.image_styles_builder_derivatives.yml):

drush isb:flush

Versions

Dependencies

The Drupal 9 version of Image Styles Builder requires nothing !
Feel free to use it.

Image Styles Builder requires PHP 7.4+ to works properly.

Similar modules

• Image Style Generate allows a site administrator to quickly create image styles in bulk, based on a defined set of rules and patterns.

Supporting organizations

This project is sponsored by Antistatique. We are a Swiss Web Agency, Visit us at www.antistatique.net or Contact us.