responsive_image.module

<?php

/**
 * @file
 * Responsive image display formatter for image fields.
 */

use Drupal\Component\Utility\SafeMarkup;
use Drupal\Component\Utility\Unicode;
use Drupal\Core\Routing\RouteMatchInterface;
use \Drupal\Core\Template\Attribute;
use Drupal\image\Entity\ImageStyle;
use Drupal\Core\Url;
use Drupal\responsive_image\Entity\ResponsiveImageStyle;
use Drupal\Core\Image\ImageInterface;
use Drupal\breakpoint\BreakpointInterface;

/**
 * The machine name for the empty image breakpoint image style option.
 */
const RESPONSIVE_IMAGE_EMPTY_IMAGE = '_empty image_';

/**
 * Implements hook_help().
 */
function responsive_image_help($route_name, RouteMatchInterface $route_match) {
  switch ($route_name) {
    case 'help.page.responsive_image':
      $output = '';
      $output .= '<h3>' . t('About') . '</h3>';
      $output .= '<p>' . t('The Responsive Image module provides an image formatter and breakpoint mappings to output responsive images using the HTML5 picture tag. For more information, see the <a href="!responsive_image">online documentation for the Responsive Image module</a>.', array( '!responsive_image' => 'https://www.drupal.org/documentation/modules/responsive_image')) . '</p>';
      $output .= '<h3>' . t('Uses') . '</h3>';
      $output .= '<dl>';
      $output .= '<dt>' . t('Defining responsive image styles') . '</dt>';
      $output .= '<dd>' . t('By creating responsive image styles you define the image styles that are being used to output images at certain breakpoints. On the <a href="!responsive_image_style">Responsive image styles</a> page, click <em>Add responsive image style</em> to create a new style. First chose a label and a breakpoint group and click Save. After that you can choose the image styles that will be used for each breakpoint. Image styles can be defined on the <a href="!image_styles">Image styles page</a> that is provided by the <a href="!image_help">Image module</a>. Breakpoints are defined in the configuration files of the theme. See the <a href="!breakpoint_help">help page of the Breakpoint module</a> for more information.', array('!responsive_image_style' => \Drupal::url('entity.responsive_image_style.collection'), '!image_styles' => \Drupal::url('entity.image_style.collection'),'!image_help' => \Drupal::url('help.page', array('name' => 'image')), '!breakpoint_help' => \Drupal::url('help.page', array('name' => 'breakpoint')))) . '</dd>';
      $output .= '<dt>' . t('Using responsive image styles in Image fields') . '</dt>';
      $output .= '<dd>' . t('After defining responsive image styles, you can use them in the display settings for your Image fields, so that the site displays responsive images using the HTML5 picture tag. Open the Manage display page for the entity type (content type, taxonomy vocabulary, etc.) that the Image field is attached to. Choose the format <em>Responsive image</em>, click the Edit icon, and select one of the responsive image styles that you have created. For general information on how to manage fields and their display see the <a href="!field_ui">Field UI module help page</a>. For background information about entities and fields see the <a href="!field_help">Field module help page</a>.', array('!field_ui' => (\Drupal::moduleHandler()->moduleExists('field_ui')) ? \Drupal::url('help.page', array('name' => 'field_ui')) : '#','!field_help' => \Drupal::url('help.page', array('name' => 'field')))) . '</dd>';
      $output .= '</dl>';
      return $output;

    case 'entity.responsive_image_style.collection':
      return '<p>' . t('A responsive image style associates an image style with each breakpoint defined by your theme.') . '</p>';
  }
}

/**
 * Implements hook_theme().
 */
function responsive_image_theme() {
  return array(
    'responsive_image' => array(
      'variables' => array(
        'uri' => NULL,
        'attributes' => array(),
        'responsive_image_style_id' => array(),
      ),
    ),
    'responsive_image_formatter' => array(
      'variables' => array(
        'item' => NULL,
        'item_attributes' => NULL,
        'url' => NULL,
        'responsive_image_style_id' => NULL,
      ),
    ),
  );
}

/**
 * Prepares variables for responsive image formatter templates.
 *
 * Default template: responsive-image-formatter.html.twig.
 *
 * @param array $variables
 *   An associative array containing:
 *   - item: An ImageItem object.
 *   - item_attributes: An optional associative array of HTML attributes to be
 *     placed in the img tag.
 *   - responsive_image_style_id: A responsive image style.
 *   - url: An optional \Drupal\Core\Url object.
 */
function template_preprocess_responsive_image_formatter(&$variables) {
  $variables['responsive_image'] = array(
    '#type' => 'responsive_image',
    '#responsive_image_style_id' => $variables['responsive_image_style_id'],
  );
  $item = $variables['item'];
  $attributes = array();
  // Do not output an empty 'title' attribute.
  if (Unicode::strlen($item->title) != 0) {
    $attributes['title'] = $item->title;
  }
  $attributes['alt'] = $item->alt;
  $attributes += $variables['item_attributes'];
  if (($entity = $item->entity) && empty($item->uri)) {
    $variables['responsive_image']['#uri'] = $entity->getFileUri();
  }
  else {
    $variables['responsive_image']['#uri'] = $item->uri;
  }

  foreach (array('width', 'height') as $key) {
    $variables['responsive_image']["#$key"] = $item->$key;
  }
  $variables['responsive_image']['#attributes'] = $attributes;
}

/**
 * Prepares variables for a responsive image.
 *
 * Default template: responsive-image.html.twig.
 *
 * @param $variables
 *   An associative array containing:
 *   - uri: The URI of the image.
 *   - width: The width of the image (if known).
 *   - height: The height of the image (if known).
 *   - attributes: Associative array of attributes to be placed in the img tag.
 *   - responsive_image_style_id: The ID of the responsive image style.
 */
function template_preprocess_responsive_image(&$variables) {
  // Make sure that width and height are proper values
  // If they exists we'll output them
  // @see http://www.w3.org/community/respimg/2012/06/18/florians-compromise/
  if (isset($variables['width']) && empty($variables['width'])) {
    unset($variables['width']);
    unset($variables['height']);
  }
  elseif (isset($variables['height']) && empty($variables['height'])) {
    unset($variables['width']);
    unset($variables['height']);
  }

  $image = \Drupal::service('image.factory')->get($variables['uri']);
  $responsive_image_style = ResponsiveImageStyle::load($variables['responsive_image_style_id']);
  // Retrieve all breakpoints and multipliers and reverse order of breakpoints.
  // By default, breakpoints are ordered from smallest weight to largest:
  // the smallest weight is expected to have the smallest breakpoint width,
  // while the largest weight is expected to have the largest breakpoint
  // width. For responsive images, we need largest breakpoint widths first, so
  // we need to reverse the order of these breakpoints.
  $breakpoints = array_reverse(\Drupal::service('breakpoint.manager')->getBreakpointsByGroup($responsive_image_style->getBreakpointGroup()));
  foreach ($responsive_image_style->getKeyedImageStyleMappings() as $breakpoint_id => $multipliers) {
    if (isset($breakpoints[$breakpoint_id])) {
      $variables['sources'][] = responsive_image_build_source_attributes($image, $variables, $breakpoints[$breakpoint_id], $multipliers);
    }
  }
  // Prepare the fallback image. Use srcset in the fallback image to avoid
  // unnecessary preloading of images in older browsers. See
  // http://scottjehl.github.io/picturefill/#using-picture and
  // http://scottjehl.github.io/picturefill/#gotchas for more information.
  $variables['img_element'] = array(
    '#theme' => 'image',
    '#srcset' => array(
      array(
        'uri' => _responsive_image_image_style_url($responsive_image_style->getFallbackImageStyle(), $image->getSource()),
      ),
    ),
  );
  if (isset($variables['attributes'])) {
    if (isset($variables['attributes']['alt'])) {
      $variables['img_element']['#alt'] = $variables['attributes']['alt'];
      unset($variables['attributes']['alt']);
    }
    if (isset($variables['attributes']['title'])) {
      $variables['img_element']['#title'] = $variables['attributes']['title'];
      unset($variables['attributes']['title']);
    }
    $variables['img_element']['#attributes'] = $variables['attributes'];
  }
}

/**
 * Helper function for template_preprocess_responsive_image().
 *
 * Builds an array of attributes for <source> tags to be used in a <picture>
 * tag. In other words, this function provides the attributes for each <source>
 * tag in a <picture> tag.
 *
 * In a responsive image style, each breakpoint has an image style mapping for
 * each of its multipliers. An image style mapping can be either of two types:
 * 'sizes' (meaning it will output a <source> tag with the 'sizes' attribute) or
 * 'image_style' (meaning it will output a <source> tag based on the selected
 * image style for this breakpoint and multiplier). A responsive image style
 * can contain image style mappings of mixed types (both 'image_style' and
 * 'sizes'). For example:
 * @code
 * $responsive_img_style = ResponsiveImageStyle::create(array(
 *   'id' => 'style_one',
 *   'label' => 'Style One',
 *   'breakpoint_group' => 'responsive_image_test_module',
 * ));
 * $responsive_img_style->addImageStyleMapping('responsive_image_test_module.mobile', '1x', array(
 *   'image_mapping_type' => 'image_style',
 *   'image_mapping' => 'thumbnail',
 * ))
 * ->addImageStyleMapping('responsive_image_test_module.narrow', '1x', array(
 *   'image_mapping_type' => 'sizes',
 *   'image_mapping' => array(
 *     'sizes' => '(min-width: 700px) 700px, 100vw',
 *     'sizes_image_styles' => array(
 *       'large' => 'large',
 *       'medium' => 'medium',
 *     ),
 *   ),
 * ))
 * ->save();
 * @endcode
 * The above responsive image style will result in a <picture> tag like this:
 * @code
 * <picture>
 *   <source media="(min-width: 0px)" srcset="sites/default/files/styles/thumbnail/image.jpeg" />
 *   <source media="(min-width: 560px)" sizes="(min-width: 700px) 700px, 100vw" srcset="sites/default/files/styles/large/image.jpeg 480w, sites/default/files/styles/medium/image.jpeg 220w" />
 *   <img srcset="fallback.jpeg" />
 * </picture>
 * @endcode
 *
 * When all the images in the 'srcset' attribute of a <source> tag have the same
 * MIME type, the source tag will get a 'mime-type' attribute as well. This way
 * we can gain some front-end performance because browsers can select which
 * image (<source> tag) to load based on the MIME types they support (which, for
 * instance, can be beneficial for browsers supporting WebP).
 * For example:
 * A <source> tag can contain multiple images:
 * @code
 * <source [...] srcset="image1.jpeg 1x, image2.jpeg 2x, image3.jpeg 3x" />
 * @endcode
 * In the above example we can add the 'mime-type' attribute ('image/jpeg')
 * since all images in the 'srcset' attribute of the <source> tag have the same
 * MIME type.
 * If a <source> tag were to look like this:
 * @code
 * <source [...] srcset="image1.jpeg 1x, image2.webp 2x, image3.jpeg 3x" />
 * @endcode
 * We can't add the 'mime-type' attribute ('image/jpeg' vs 'image/webp'). So in
 * order to add the 'mime-type' attribute to the <source> tag all images in the
 * 'srcset' attribute of the <source> tag need to be of the same MIME type. This
 * way, a <picture> tag could look like this:
 * @code
 * <picture>
 *   <source [...] mime-type="image/webp" srcset="image1.webp 1x, image2.webp 2x, image3.webp 3x"/>
 *   <source [...] mime-type="image/jpeg" srcset="image1.jpeg 1x, image2.jpeg 2x, image3.jpeg 3x"/>
 *   <img srcset="fallback.jpeg" />
 * </picture>
 * @endcode
 * This way a browser can decide which <source> tag is preferred based on the
 * MIME type. In other words, the MIME types of all images in one <source> tag
 * need to be the same in order to set the 'mime-type' attribute but not all
 * MIME types within the <picture> tag need to be the same.
 *
 * For image style mappings of the type 'sizes', a width descriptor is added to
 * each source. For example:
 * @code
 * <source media="(min-width: 0px)" srcset="image1.jpeg 100w" />
 * @endcode
 * The width descriptor here is "100w". This way the browser knows this image is
 * 100px wide without having to load it. According to the spec, a multiplier can
 * not be present if a width descriptor is.
 * For example:
 * Valid:
 * @code
 * <source media="(min-width:0px)" srcset="img1.jpeg 50w, img2.jpeg=100w" />
 * @endcode
 * Invalid:
 * @code
 * <source media="(min-width:0px)" srcset="img1.jpeg 50w 1x, img2.jpeg=100w 1x" />
 * @endcode
 *
 * Note: Since the specs do not allow width descriptors and multipliers combined
 * inside one 'srcset' attribute, we either have to use something like
 * @code
 * <source [...] srcset="image1.jpeg 1x, image2.webp 2x, image3.jpeg 3x" />
 * @endcode
 * to support multipliers or
 * @code
 * <source [...] sizes"(min-width: 40em) 80vw, 100vw" srcset="image1.jpeg 300w, image2.webp 600w, image3.jpeg 1200w" />
 * @endcode
 * to support the 'sizes' attribute.
 *
 * In theory people could add an image style mapping for the same breakpoint
 * (but different multiplier) so the array contains an entry for breakpointA.1x
 * and breakpointA.2x. If we would output those we will end up with something
 * like
 * @code
 * <source [...] sizes="(min-width: 40em) 80vw, 100vw" srcset="a1.jpeg 300w 1x, a2.jpeg 600w 1x, a3.jpeg 1200w 1x, b1.jpeg 250w 2x, b2.jpeg 680w 2x, b3.jpeg 1240w 2x" />
 * @endcode
 * which is illegal. So the solution is to merge both arrays into one and
 * disregard the multiplier. Which, in this case, would output
 * @code
 * <source [...] sizes="(min-width: 40em) 80vw, 100vw" srcset="b1.jpeg 250w, a1.jpeg 300w, a2.jpeg 600w, b2.jpeg 680w, a3.jpeg 1200w,  b3.jpeg 1240w" />
 * @endcode
 * See http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#image-candidate-string
 * for further information.
 *
 * @param \Drupal\Core\Image\ImageInterface $image
 *   The image to build the <source> tags for.
 * @param array $variables
 *   An array with the following keys:
 *     - responsive_image_style_id: The \Drupal\responsive_image\Entity\ResponsiveImageStyle
 *       ID.
 *     - width: The width of the image (if known).
 *     - height: The height of the image (if known).
 * @param \Drupal\breakpoint\BreakpointInterface $breakpoint
 *   The breakpoint for this source tag.
 * @param array $multipliers
 *   An array with multipliers as keys and image style mappings as values.
 *
 * @return \Drupal\Core\Template\Attribute[]
 *   An array of attributes for the source tag.
 */
function responsive_image_build_source_attributes(ImageInterface $image, array $variables, BreakpointInterface $breakpoint, array $multipliers) {
  $width = isset($variables['width']) && !empty($variables['width']) ? $variables['width'] : $image->getWidth();
  $height = isset($variables['height']) && !empty($variables['height']) ? $variables['height'] : $image->getHeight();
  $extension = pathinfo($image->getSource(), PATHINFO_EXTENSION);
  $sizes = array();
  $srcset = array();
  $derivative_mime_types = array();
  foreach ($multipliers as $multiplier => $image_style_mapping) {
    switch ($image_style_mapping['image_mapping_type']) {
      // Create a <source> tag with the 'sizes' attribute.
      case 'sizes':
        // Loop through the image styles for this breakpoint and multiplier.
        foreach ($image_style_mapping['image_mapping']['sizes_image_styles'] as $image_style_name) {
          // Get the dimensions.
          $dimensions = responsive_image_get_image_dimensions($image_style_name, array('width' => $width, 'height' => $height));
          // Get MIME type.
          $derivative_mime_type = responsive_image_get_mime_type($image_style_name, $extension);
          $derivative_mime_types[] = $derivative_mime_type;

          // Add the image source with its width descriptor. When a width
          // descriptor is used in a srcset, we can't add a multiplier to
          // it. Because of this, the image styles for all multipliers of
          // this breakpoint should be merged into one srcset and the sizes
          // attribute should be merged as well.
          if (is_null($dimensions['width'])) {
            throw new \LogicException(SafeMarkup::format('Could not determine image width for @file using image style with ID: @image_style_name. This image style can not be used for a responsive image style mapping using the \'sizes\' attribute.', array('@file' => $image->getSource(), '@image_style_name' => $image_style_name)));
          }
          // Use the image width as key so we can sort the array later on.
          // Images within a srcset should be sorted from small to large, since
          // the first matching source will be used.
          $srcset[intval($dimensions['width'])] = file_create_url(_responsive_image_image_style_url($image_style_name, $image->getSource())) . ' ' . $dimensions['width'] . 'w';
          $sizes = array_merge(explode(',', $image_style_mapping['image_mapping']['sizes']), $sizes);
        }
        break;

      case 'image_style':
        // Get MIME type.
        $derivative_mime_type = responsive_image_get_mime_type($image_style_mapping['image_mapping'], $extension);
        $derivative_mime_types[] = $derivative_mime_type;
        // Add the image source with its multiplier. Use the multiplier as key
        // so we can sort the array later on. Multipliers within a srcset should
        // be sorted from small to large, since the first matching source will
        // be used. We multiply it by 100 so multipliers with up to two decimals
        // can be used.
        $srcset[intval(Unicode::substr($multiplier, 0, -1) * 100)] = file_create_url(_responsive_image_image_style_url($image_style_mapping['image_mapping'], $image->getSource())) . ' ' . $multiplier;
        break;
    }
  }
  // Sort the srcset from small to large image width or multiplier.
  ksort($srcset);
  $source_attributes = new \Drupal\Core\Template\Attribute(array(
    'srcset' => implode(', ', array_unique($srcset)),
  ));
  $media_query = trim($breakpoint->getMediaQuery());
  if (!empty($media_query)) {
    $source_attributes->setAttribute('media', $media_query);
  }
  if (count(array_unique($derivative_mime_types)) == 1) {
    $source_attributes->setAttribute('type', $derivative_mime_types[0]);
  }
  if (!empty($sizes)) {
    $source_attributes->setAttribute('sizes', implode(',', array_unique($sizes)));
  }
  return $source_attributes;
}

/**
 * Determines the dimensions of an image.
 *
 * @param string $image_style_name
 *   The name of the style to be used to alter the original image.
 * @param array $dimensions
 *   An associative array containing:
 *   - width: The width of the source image (if known).
 *   - height: The height of the source image (if known).
 *
 * @return array
 *   Dimensions to be modified - an array with components width and height, in
 *   pixels.
 */
function responsive_image_get_image_dimensions($image_style_name, array $dimensions) {
  // Determine the dimensions of the styled image.
  if ($image_style_name == RESPONSIVE_IMAGE_EMPTY_IMAGE) {
    $dimensions = array(
      'width' => 1,
      'height' => 1,
    );
  }
  else {
    $entity = ImageStyle::load($image_style_name);
    if ($entity instanceof Drupal\image\Entity\ImageStyle) {
      $entity->transformDimensions($dimensions);
    }
  }

  return $dimensions;
}

/**
 * Determines the MIME type of an image.
 *
 * @param string $image_style_name
 *   The image style that will be applied to the image.
 * @param string $extension
 *   The original extension of the image (without the leading dot).
 *
 * @return string
 *   The MIME type of the image after the image style is applied.
 */
function responsive_image_get_mime_type($image_style_name, $extension) {
  if ($image_style_name == RESPONSIVE_IMAGE_EMPTY_IMAGE) {
    return 'image/gif';
  }
  // The MIME type guesser needs a full path, not just an extension, but the
  // file doesn't have to exist.
  $fake_path = 'responsive_image.' . ImageStyle::load($image_style_name)->getDerivativeExtension($extension);
  return Drupal::service('file.mime_type.guesser.extension')->guess($fake_path);
}

/**
 * Wrapper around image_style_url() so we can return an empty image.
 */
function _responsive_image_image_style_url($style_name, $path) {
  if ($style_name == RESPONSIVE_IMAGE_EMPTY_IMAGE) {
    // The smallest data URI for a 1px square transparent GIF image.
    // http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever
    return 'data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
  }
  $entity = ImageStyle::load($style_name);
  if ($entity instanceof Drupal\image\Entity\ImageStyle) {
    return $entity->buildUrl($path);
  }
  return file_create_url($path);
}