function theme_picture in Responsive images and styles 7.2

Same name and namespace in other branches

1. 8 resp_img.module \theme_picture()

Theme a picture element.

3 theme calls to theme_picture()

theme_colorbox_picturefield in ./resp_img.module

theme_colorbox_picturefield similar to theme_colorbox_imagefield.

theme_picture_formatter in ./resp_img.module

_resp_img_replace_picture in ./resp_img.module

File

./resp_img.module, line 345

Code

function theme_picture($variables) {
  resp_img_add_js();

  // Add classes to ease styling
  if (!isset($variables['attributes'])) {
    $variables['attributes'] = array();
  }
  if (!isset($variables['attributes']['class'])) {
    $variables['attributes']['class'] = array();
  }
  $variables['attributes']['class'][] = RESP_IMG_CLASS;

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

  // Use path or uri untill D7 uses one in all places.
  if (!isset($variables['path']) || empty($variables['path'])) {
    $variables['path'] = $variables['uri'];
  }
  if (!isset($variables['uri']) || empty($variables['uri'])) {
    $variables['uri'] = $variables['path'];
  }
  $images = array();
  $output = array();
  $fallback_image = FALSE;

  // All breakpoints and multipliers.
  if (isset($variables['breakpoints']['mapping'])) {
    foreach ($variables['breakpoints']['mapping'] as $breakpoint_name => $multipliers) {
      $breakpoint = breakpoints_breakpoint_load_by_fullkey($breakpoint_name);
      if ($breakpoint) {
        $new_images = array();
        foreach ($multipliers as $multiplier => $image_style) {
          $new_image = $variables;

          // Add classes to ease styling
          $new_image['attributes']['class'][] = RESP_IMG_CLASS . '-' . drupal_clean_css_identifier($breakpoint->name);
          $new_image['style_name'] = $image_style;
          $new_image['#multiplier'] = $multiplier;
          $new_images[] = $new_image;
        }

        // Fallback image = smallest breakpoint.
        $fallback_image = theme('image_style', $new_images[0]);
        $srcset = array();
        foreach ($new_images as $new_image) {
          $srcset[] = image_style_url($new_image['style_name'], $new_image['uri']) . ' ' . $new_image['#multiplier'];
        }
        $images[] = array(
          'srcset' => implode(', ', $srcset),
          'media' => $breakpoint->breakpoint,
        );
      }
    }
  }

  // Fallback image.
  if (isset($variables['style_name']) && !empty($variables['style_name'])) {
    $fallback_image = theme('image_style', $variables);
  }
  $matches = array();
  preg_match('/src="([^"]*)"/', $fallback_image, $matches);
  $fallback_image = '<img srcset="' . $matches[1] . '" alt="' . check_plain($variables['alt']) . '" title="' . check_plain($variables['title']) . '" />';
  if (!empty($images)) {
    $output[] = '<picture class="' . RESP_IMG_CLASS . '" >';

    // Add variants to the output.
    foreach ($images as $image) {
      if (isset($image['media']) && !empty($image['media'])) {
        $output[] = '<source media="' . $image['media'] . '" srcset="' . $image['srcset'] . '" />';
      }
      else {
        $output[] = '<source srcset="' . $image['srcset'] . '" />';
      }
    }
    $output[] = $fallback_image;
    $output[] = '</picture>';
    return implode("\n", $output);
  }
}