Picture Preset

When using the Picture module, a backport of the Drupal 8 Responsive Image module, one has to create combinations of:

1. breakpoints,
2. image styles / effects,
3. picture mappings.

The more combinations, the harder it is to set things up and maintain it using the UI.

Picture Preset allows site builders to define custom presets containing all these data in one single array using hook_picture_preset_info() and hook_picture_preset_info_alter() hooks.

Presets are purely defined in code. To make use of Drupal core's image handling, Picture Preset does automatically create / update / delete image styles / effects, but does not create breakpoints for the Breakpoints module or picture mappings for the Picture module.

Example implementation from this module's picture_preset.api.php file:

/**
 * Implements hook_picture_preset_info().
 *
 * @return
 *   Array with picture presets.
 */
function hook_picture_preset_info() {
  $presets = array();

  // Viewport width: 100% wide and scaled.
  $presets['vw_100p_scaled'] = array(
    // Define a human readable title for this effect.
    'title' => '100% wide scaled',
    // Define a set of breakpoints.
    'breakpoints' => array(
      // The key of a breakpoint can be anything.
      'sm' => array(
        // Define the media query.
        'media' => '(max-width: 30em)',
        // Define an array with image effects.
        'effects' => array(
          // Add a scale image effect. For default image effects:
          // @link https://api.drupal.org/api/drupal/modules%21image%21image.effects.inc/7
          'image_scale_effect' => array('width' => 480, 'height' => 999),
        ),
      ),
      'md' => array(
        'media' => '(max-width: 48em)',
        'effects' => array(
          'image_scale_effect' => array('width' => 768, 'height' => 999),
        ),
      ),
      'md_plus' => array(
        'media' => '(max-width: 60em)',
        'effects' => array(
          // Use weights to change image effects' order.
          'image_scale_effect' => array(
            'width' => 960,
            'height' => 999,
            'weight' => 20,
          ),
          'image_crop_effect' => array(
            'width' => 600,
            'height' => 600,
            'anchor' => 'center-center',
            'weight' => 10,
          ),
        ),
      ),
      'lg' => array(
        'media' => '(max-width: 75em)',
        'effects' => array(
          'image_scale_effect' => array('width' => 1200, 'height' => 999),
        ),
      ),
      'lg_plus' => array(
        'media' => '(max-width: 999em)',
        'effects' => array(
          'image_scale_effect' => array('width' => 1920, 'height' => 999),
        ),
      ),
    ),
  );

  return $presets;
}