function template_preprocess_responsive_image

Prepares variables for a responsive image.

Default template: responsive-image.html.twig.

Parameters

$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.

File

core/modules/responsive_image/responsive_image.module, line 144

Responsive image display formatter for image fields.

Code

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']);
  }
  $responsive_image_style = ResponsiveImageStyle::load($variables['responsive_image_style_id']);

  // If a responsive image style is not selected, log the error and stop
  // execution.
  if (!$responsive_image_style) {
    $variables['img_element'] = [];
    \Drupal::logger('responsive_image')
      ->log(RfcLogLevel::ERROR, 'Failed to load responsive image style: “@style“ while displaying responsive image.', [
      '@style' => $variables['responsive_image_style_id'],
    ]);
    return;
  }

  // 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($variables, $breakpoints[$breakpoint_id], $multipliers);
    }
  }
  if (isset($variables['sources']) && count($variables['sources']) === 1 && !isset($variables['sources'][0]['media'])) {

    // There is only one source tag with an empty media attribute. This means
    // we can output an image tag with the srcset attribute instead of a
    // picture tag.
    $variables['output_image_tag'] = TRUE;
    foreach ($variables['sources'][0] as $attribute => $value) {
      if ($attribute != 'type') {
        $variables['attributes'][$attribute] = $value;
      }
    }
    $variables['img_element'] = [
      '#theme' => 'image',
      '#uri' => _responsive_image_image_style_url($responsive_image_style
        ->getFallbackImageStyle(), $variables['uri']),
      '#attributes' => [],
    ];
  }
  else {
    $variables['output_image_tag'] = FALSE;

    // Prepare the fallback image. We use the src attribute, which might cause
    // double downloads in browsers that don't support the picture tag.
    $variables['img_element'] = [
      '#theme' => 'image',
      '#uri' => _responsive_image_image_style_url($responsive_image_style
        ->getFallbackImageStyle(), $variables['uri']),
      '#attributes' => [],
    ];
  }

  // Get width and height from fallback responsive image style and transfer them
  // to img tag so browser can do aspect ratio calculation and prevent
  // recalculation of layout on image load.
  $dimensions = responsive_image_get_image_dimensions($responsive_image_style
    ->getFallbackImageStyle(), [
    'width' => $variables['width'],
    'height' => $variables['height'],
  ], $variables['uri']);
  $variables['img_element']['#width'] = $dimensions['width'];
  $variables['img_element']['#height'] = $dimensions['height'];
  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'];
  }
}