You are here

function theme_image_srcset in Picture 7.2

Returns HTML for an image.

Parameters

array $variables: An associative array containing:

  • path: Either the path of the image file (relative to base_path()) or a full URL.
  • srcset: Array of multiple URI's and sizes/multipliers.
  • sizes: The value for the sizes attribute.
  • 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 calling theme('image') to pass a meaningful value for this variable.

  • 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.
3 theme calls to theme_image_srcset()
theme_picture in ./picture.module
Returns HTML for a picture.
theme_picture_sizes_formatter in ./picture.module
Theme pictue sizes formatter.
_picture_filter_prepare_image in ./picture.module
Prepares a Render Array for theme_picture_formatter().

File

./picture.module, line 1579
Picture formatter.

Code

function theme_image_srcset(array $variables) {

  // Sizes is mandatory, so make sure the key is set, default is 100vw.
  if (!isset($variables['sizes']) || empty($variables['sizes'])) {
    $attributes['sizes'] = '100vw';
  }

  // Make sure we have an array.
  $attributes = isset($variables['attributes']) ? $variables['attributes'] : array();
  if (isset($variables['uri']) && !empty($variables['uri'])) {
    $attr_name = !empty($variables['lazyload']) ? 'data-src' : 'src';

    // TODO: remove when https://www.drupal.org/node/1342504 is fixed.
    if (strpos($variables['uri'], 'data:') === 0) {
      $attributes[$attr_name] = $variables['uri'];
    }
    else {
      $attributes[$attr_name] = file_create_url($variables['uri']);
    }
  }
  if (isset($variables['srcset']) && !empty($variables['srcset'])) {
    $srcsets = array();
    foreach ($variables['srcset'] as $src) {

      // URI is mandatory.
      if (isset($src['uri']) && !empty($src['uri'])) {
        $key = '';

        // TODO: remove when https://www.drupal.org/node/1342504 is fixed.
        if (strpos($src['uri'], 'data:') === 0) {
          $source = $src['uri'];
        }
        else {
          $source = file_create_url($src['uri']);
        }
        if (isset($src['width']) && !empty($src['width'])) {
          $source .= ' ' . $src['width'];
          $key = (int) drupal_substr($src['width'], 0, -1);
        }
        elseif (isset($src['multiplier']) && !empty($src['multiplier'])) {
          $source .= ' ' . $src['multiplier'];

          // Convert 1x to 100, 1.5x to 150  and so on.
          $key = (int) ((double) drupal_substr($src['multiplier'], 0, -1) * 100);
        }
        $srcsets[$key] = $source;
      }
    }
    ksort($srcsets);
    $attr_name = !empty($variables['lazyload']) ? 'data-srcset' : 'srcset';
    $attributes[$attr_name] = implode(', ', $srcsets);
  }
  foreach (array(
    'width',
    'height',
    'alt',
    'title',
    'sizes',
  ) as $key) {
    if (isset($variables[$key])) {
      $attributes[$key] = $variables[$key];
    }
  }
  if (isset($variables['path']) && !empty($variables['path'])) {
    return l('<img ' . drupal_attributes($attributes) . ' />', $variables['path']['path'], array(
      'html' => TRUE,
    ) + $variables['path']['options']);
  }
  return '<img ' . drupal_attributes($attributes) . ' />';
}