function theme_picture in Picture 7

Same name and namespace in other branches

1. 7.2 picture.module \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.
• attributes: An array containing attributes.

3 theme calls to theme_picture()

template_preprocess_flexslider_picture_list in flexslider_picture/theme/flexslider_picture.theme.inc

Process the items and prepare the item slides to be rendered.

theme_picture_formatter in ./picture.module

Theme picture.

theme_picture_formatter_colorbox in ./picture.module

Theme function to add support for colorbox.

File

./picture.module, line 923

Picture formatter.

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 (variable_get('picture_implementation', PICTURE_IMPLEMENTATION_DEFAULT) !== PICTURE_IMPLEMENTATION_PICTUREFILL2) {
    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']);
    }
    if (isset($variables['metadata']['width']) && isset($variables['metadata']['height'])) {
      $variables['width'] = $variables['metadata']['width'];
      $variables['height'] = $variables['metadata']['height'];
    }
  }
  else {
    unset($variables['width']);
    unset($variables['height']);
  }
  $sources = array();
  $output = array();

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

  // All breakpoints and multipliers.
  foreach ($variables['breakpoints'] as $breakpoint_name => $multipliers) {
    $breakpoint = breakpoints_breakpoint_load_by_fullkey($breakpoint_name);
    if ($breakpoint) {
      $new_sources = array();
      switch (variable_get('picture_implementation', PICTURE_IMPLEMENTATION_DEFAULT)) {
        case PICTURE_IMPLEMENTATION_PICTUREFILL:
        case PICTURE_IMPLEMENTATION_PICTUREFILL2:
        case PICTURE_IMPLEMENTATION_WEBLINC:
          foreach ($multipliers as $multiplier => $image_style) {
            $new_source = $variables;
            $new_source['style_name'] = $image_style;
            $new_source['#media_query'] = $breakpoint->breakpoint;
            $new_source['#multiplier'] = $multiplier;
            $new_sources[] = $new_source;
          }

          // Only one image, use src.
          if (count($new_sources) == 1) {
            foreach ($new_sources as $new_source) {
              $sources[] = array(
                'src' => _picture_image_style_url($new_source['style_name'], $new_source['uri']),
                'dimensions' => picture_get_image_dimensions($new_source, $new_source['#multiplier']),
                'media' => $new_source['#media_query'],
              );
            }
          }
          else {

            // Mutliple images, use srcset.
            $srcset = array();
            foreach ($new_sources as $new_source) {
              $srcset[] = _picture_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], $new_sources[0]['#multiplier']),
              'media' => $new_source['#media_query'],
            );
          }
          break;
      }
    }
  }
  if (!empty($sources)) {
    $attributes = array();
    foreach (array(
      'alt',
      'title',
    ) as $key) {
      $field = sprintf('field_file_image_%s_text', $key);
      if (isset($variables[$key]) && !empty($variables[$key])) {
        $attributes['data-' . $key] = decode_entities($variables[$key]);
      }
      elseif (isset($variables[$field]) && is_array($variables[$field]) && isset($variables[$field]['und'][0]['safe_value'])) {
        $attributes['data-' . $key] = decode_entities($variables[$field]['und'][0]['safe_value']);
      }
    }

    // Add attributes that are already prefixed by 'data-'
    foreach (array(
      'data-picture-group',
      'data-picture-align',
    ) as $key) {
      if (isset($variables[$key]) && !empty($variables[$key])) {
        $attributes[$key] = $variables[$key];
      }
    }

    // Add additional attributes passed in through the render array.
    if (isset($variables['attributes']) && !empty($variables['attributes'])) {
      $attributes = array_merge($attributes, $variables['attributes']);
    }
    if (variable_get('picture_implementation', PICTURE_IMPLEMENTATION_DEFAULT) === PICTURE_IMPLEMENTATION_PICTUREFILL2) {
      $output[] = '<picture' . drupal_attributes($attributes) . '>';
    }
    else {
      $output[] = '<span data-picture=""' . drupal_attributes($attributes) . '>';
    }

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

    // Output the fallback image.
    if (!empty($variables['uri'])) {
      $variables['path'] = $variables['uri'];
    }
    if (variable_get('picture_implementation', PICTURE_IMPLEMENTATION_DEFAULT) === PICTURE_IMPLEMENTATION_PICTUREFILL2) {
      $output[] = theme('image_style', $variables);
      $output[] = '</picture>';
    }
    else {
      $output[] = '<noscript>' . theme('image_style', $variables) . '</noscript>';
      $output[] = '</span>';
    }
    return implode("\n", $output);
  }
}