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

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'];
    }
}