function template_preprocess_image

Prepares variables for image templates.

Default template: image.html.twig.

Parameters

array $variables: An associative array containing:

• uri: Either the path of the image file (relative to base_path()) or a full URL.
• width: The width of the image (if known).
• height: The height of the image (if known).
• alt: The alternative text for text-based browsers. HTML 4 and XHTML 1.0 always require an alt attribute. The HTML 5 draft allows the alt attribute to be omitted in some cases. Therefore, this variable defaults to an empty string, but can be set to NULL for the attribute to be omitted. Usually, neither omission nor an empty string satisfies accessibility requirements, so it is strongly encouraged for code building variables for image.html.twig templates to pass a meaningful value for this variable.
  • http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.8
  • http://www.w3.org/TR/xhtml1/dtds.html
  • http://dev.w3.org/html5/spec/Overview.html#alt
• title: The title text is displayed when the image is hovered in some popular browsers.
• attributes: Associative array of attributes to be placed in the img tag.
• srcset: Array of multiple URIs and sizes/multipliers.
• sizes: The sizes attribute for viewport-based selection of images.
  • http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-con...

File

core/includes/theme.inc, line 780

The theme system, which controls the output of Drupal.

Code

function template_preprocess_image(&$variables) {

  /** @var \Drupal\Core\File\FileUrlGeneratorInterface $file_url_generator */
  $file_url_generator = \Drupal::service('file_url_generator');
  if (!empty($variables['uri'])) {
    $variables['attributes']['src'] = $file_url_generator
      ->generateString($variables['uri']);
  }

  // Generate a srcset attribute conforming to the spec at
  // http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#attr-img-srcset
  if (!empty($variables['srcset'])) {
    $srcset = [];
    foreach ($variables['srcset'] as $src) {

      // URI is mandatory.
      $source = $file_url_generator
        ->generateString($src['uri']);
      if (isset($src['width']) && !empty($src['width'])) {
        $source .= ' ' . $src['width'];
      }
      elseif (isset($src['multiplier']) && !empty($src['multiplier'])) {
        $source .= ' ' . $src['multiplier'];
      }
      $srcset[] = $source;
    }
    $variables['attributes']['srcset'] = implode(', ', $srcset);
  }
  foreach ([
    'width',
    'height',
    'alt',
    'title',
    'sizes',
  ] as $key) {
    if (isset($variables[$key])) {

      // If the property has already been defined in the attributes,
      // do not override, including NULL.
      if (AttributeHelper::attributeExists($key, $variables['attributes'])) {
        continue;
      }
      $variables['attributes'][$key] = $variables[$key];
    }
  }

  // Without dimensions specified, layout shifts can occur,
  // which are more noticeable on pages that take some time to load.
  // As a result, only mark images as lazy load that have dimensions.
  if (isset($variables['width'], $variables['height']) && !isset($variables['attributes']['loading'])) {
    $variables['attributes']['loading'] = 'lazy';
  }
}