You are here

function theme_picture in Responsive images and styles 8

Same name and namespace in other branches
  1. 7.2 resp_img.module \theme_picture()

Theme a picture element.

1 theme call to theme_picture()
theme_picture_formatter in ./resp_img.module

File

./resp_img.module, line 134

Code

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

  // User didn't map any breakpoints, use breakpoints
  if (!is_array($variables['breakpoints'])) {
    $default_breakpoint = resp_img_breakpoint_default();
    if ($default_breakpoint && strpos($variables['style_name'], $default_breakpoint)) {
      $breakpoints = breakpoints_breakpoint_load_all_active();
      $image_styles = image_styles();

      // loop over all breakpoints
      foreach ($breakpoints as $breakpoint) {

        // detect the default one
        if ($breakpoint->breakpoint == $default_breakpoint) {
          $images[] = array(
            'image' => theme_image_style($variables),
          );
        }
        else {
          $new_image = $variables;
          $new_image['style_name'] = str_replace($default_breakpoint, $breakpoint->breakpoint, $variables['style_name']);
          if (array_key_exists($new_image['style_name'], $image_styles)) {
            $images[] = array(
              'image' => theme_image_style($new_image),
              'media' => $breakpoint->breakpoint,
            );
          }
        }
      }
    }
  }
  else {

    // default image.
    $img = theme('image_style', $variables);
    $img = str_replace('<img', '', $img);
    $img = str_replace('/>', '', $img);
    $images[] = array(
      'image' => $img,
    );

    // all breakpoints and multipliers.
    foreach ($variables['breakpoints'] 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;
          $new_image['style_name'] = $image_style;
          $new_image['#multiplier'] = $multiplier;
          $new_images[] = $new_image;
        }
        $img = theme('image_style', $new_images[0]);
        $img = str_replace('<img', '', $img);
        $img = str_replace('/>', '', $img);
        if (count($new_images) == 1) {
          $images[] = array(
            'image' => $img,
            'media' => $breakpoint->breakpoint,
          );
        }
        else {
          $srcset = array();
          foreach ($new_images as $new_image) {
            $srcset[] = image_style_url($new_image['style_name'], $new_image['uri']) . ' ' . $new_image['#multiplier'];
          }
          $img = preg_replace('/src="[^"]*"/', '', $img);
          $images[] = array(
            'srcset' => implode(', ', $srcset),
            'media' => $breakpoint->breakpoint,
            'image' => $img,
          );
        }
      }
    }
  }
  if (!empty($images)) {
    $output[] = '<picture alt="' . check_plain($variables['alt']) . '" title="' . check_plain($variables['title']) . '">';

    // add variants to the output
    foreach ($images as $image) {
      if (isset($image['media']) && !empty($image['media'])) {
        if (!isset($image['srcset'])) {
          $output[] = '<!-- <source media="' . $image['media'] . '" ' . $image['image'] . '> -->';
          $output[] = '<source media="' . $image['media'] . '" ' . $image['image'] . '>';
        }
        else {
          $output[] = '<!-- <source class="' . RESP_IMG_CLASS . '" media="' . $image['media'] . '" srcset="' . $image['srcset'] . '" ' . $image['image'] . '> -->';
          $output[] = '<source class="' . RESP_IMG_CLASS . '" media="' . $image['media'] . '" srcset="' . $image['srcset'] . '" ' . $image['image'] . '>';
        }
      }
      else {
        $output[] = '<!-- <source ' . $image['image'] . '> -->';
        $output[] = '<source ' . $image['image'] . '>';
      }
    }

    // output the default image as fallback
    // $output .= '<img src="' . image_style_url($variables['style_name'], $variables['uri']) . '" alt="' . check_plain($variables['alt']) . '" />';
    $output[] = '<noscript><img ' . $images[0]['image'] . '/></noscript>';
    $output[] = '</picture>';
    return implode("\n", $output);
  }
}