function theme_picture

Returns HTML for a picture.

Parameters

$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.
• breakpoints: An array containing breakpoints.

Related topics

File

drupal/core/modules/picture/picture.module, line 228

Picture display formatter for image fields.

Code

function theme_picture($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']);
  }
  $sources = array();
  $output = array();

  // Fallback image, output as source with media query.
  $sources[] = array(
    'src' => image_style_url($variables['style_name'], $variables['uri']),
    'dimensions' => picture_get_image_dimensions($variables),
  );

  // All breakpoints and multipliers.
  foreach ($variables['breakpoints'] as $breakpoint_name => $multipliers) {
    $breakpoint = breakpoint_load($breakpoint_name);
    if ($breakpoint) {
      $new_sources = array();
      foreach ($multipliers as $multiplier => $image_style) {
        $new_source = $variables;
        $new_source['style_name'] = $image_style;
        $new_source['#multiplier'] = $multiplier;
        $new_sources[] = $new_source;
      }

      // Only one image, use src.
      if (count($new_sources) == 1) {
        $sources[] = array(
          'src' => image_style_url($new_sources[0]['style_name'], $new_sources[0]['uri']),
          'dimensions' => picture_get_image_dimensions($new_sources[0]),
          'media' => $breakpoint->mediaQuery,
        );
      }
      else {

        // Multiple images, use srcset.
        $srcset = array();
        foreach ($new_sources as $new_source) {
          $srcset[] = image_style_url($new_source['style_name'], $new_source['uri']) . ' ' . $new_source['#multiplier'];
        }
        $sources[] = array(
          'srcset' => implode(', ', $srcset),
          'dimensions' => picture_get_image_dimensions($new_sources[0]),
          'media' => $breakpoint->mediaQuery,
        );
      }
    }
  }
  if (!empty($sources)) {
    $attributes = array();
    foreach (array(
      'alt',
      'title',
    ) as $key) {
      if (isset($variables[$key])) {
        $attributes[$key] = $variables[$key];
      }
    }
    $output[] = '<picture' . new Attribute($attributes) . '>';

    // Add source tags to the output.
    foreach ($sources as $source) {
      $output[] = theme('picture_source', $source);
    }

    // Output the fallback image.
    $output[] = '<noscript>' . theme('image_style', $variables) . '</noscript>';
    $output[] = '</picture>';
    return implode("\n", $output);
  }
}