Drupal Image Style Generator

Allows to generate drupal image styles, based on the theme.breakpoints.yml in the theme.

configure the width and spect ratio of styles per breakpoint: .xs .sm .md .lg .xl

imageStyles:
  header_location:
    label: 'Header Standort'
    aspectRatio: 0.59
    width: 545

col_8:
  label: 'Col 8'
  aspectRatio: 0.48
  width: 545

Usage

Can be used in your script (grunt or gulp):

const gen = require('drupal-image-style-generator');
const themeName = 'myTheme';
const themePath = './web/themes/custom/' + themeName;

gen({
    themePath: themePath,
    themeName: themeName,
    syncFolder: './config/sync',
    gridSize: 100,
});

Options

themePath: Relative path to the theme - needs to contain the theme.breakpoints.yml

themeName: the name of the theme

syncFolder: Relative path to the sync folder

gridSize: (Default: 0) Number to which grid the images are rounded up. In the worst case, the image is gridSize - 1 px to big for the breakpoint, but a higher grid will result in lower individual image styles.

convertTo: (Default: null) enables the image_convert style - allowed values are png, jpg, jpeg, jpe, gif, webp

clearCropTypes: (Default: null) If set to true, unused crop.type.aspect_*.yml files will be removed. This can cause a lot of trouble and require you to remove all existing crop definition entities. Should not be done in a live site.

drupal-image-style-generator

Drupal Image Style Generator

Usage

Options