function theme_slick_image in Slick Carousel 7.2

Returns HTML for a slick_image.

Parameters

array $variables: An associative array containing:

• item: Associative array of image data, which may include "uri", "alt", "width", "height", "title" and "attributes".
• image_style: The name of the style to alter the original image.
• url: A string containing the link 'url'.
• item_attributes: Associative array of attributes to be placed in the img.
• settings: An array of options.

2 theme calls to theme_slick_image()

slick_get_image in includes/slick.global.inc

Returns the image/video/audio either using Picture mapping, or lazyload.

slick_get_media_overlay in includes/slick.extras.inc

Builds Youtube/ Vimeo overlay as file entity don't support nested file.

File

templates/slick.theme.inc, line 358

Hooks and preprocess functions for the Slick module.

Code

function theme_slick_image(array $variables) {
  $element = $variables['element'];
  $elements = array(
    'captions',
    'item',
    'item_attributes',
    'image_style',
    'settings',
    'url',
    'url_attributes',
  );

  // Faking variables as we don't do preprocess.
  foreach ($elements as $key) {
    $variables[$key] = isset($element["#{$key}"]) ? $element["#{$key}"] : array();
  }

  // Load the supported formatter variables for the possesive blazy wrapper.
  $settings =& $variables['settings'];
  $item = $variables['item'];
  $image_attributes =& $variables['item_attributes'];
  $url_attributes =& $variables['url_attributes'];
  $iframe_attributes = array();
  if (isset($settings['content_attributes'])) {
    $iframe_attributes =& $settings['content_attributes'];
  }

  // Modifies variables.
  foreach (array(
    'icon',
    'lightbox',
    'media_switch',
  ) as $key) {
    $settings[$key] = isset($settings[$key]) ? $settings[$key] : '';
  }
  $build = '';
  $type = empty($item['type']) ? 'image' : $item['type'];
  $media = !empty($item['embed_url']) && $type != 'image';
  $switch = $settings['media_switch'];
  $uri = $item['uri'];
  $settings['image_url'] = empty($variables['image_style']) ? file_create_url($uri) : image_style_url($variables['image_style'], $uri);
  $settings['ratio'] = empty($settings['ratio']) ? '' : str_replace(':', '', $settings['ratio']);

  // Build attributes.
  $attributes = array(
    'class' => array(
      'media',
      'media--' . $type,
    ),
  );
  if ($switch) {
    $attributes['class'][] = 'media--switch';
  }
  foreach (array(
    'width',
    'height',
    'alt',
    'title',
  ) as $key) {
    if (isset($item[$key])) {
      if (array_key_exists($key, $image_attributes)) {
        continue;
      }
      $image_attributes[$key] = $item[$key];
    }
  }

  // Picture integration, else Slick lazyload, or regular image.
  $params = $image_attributes;
  if (empty($params['breakpoints'])) {
    $image_attributes['class'][] = 'media__image media__element';

    // Aspect ratio to fix layout reflow with lazyloaded images responsively.
    if (!empty($settings['ratio'])) {
      $attributes['class'][] = 'media--ratio media--ratio--' . $settings['ratio'];
      if (!empty($image_attributes['height']) && in_array($settings['ratio'], array(
        'enforced',
        'fluid',
      ))) {
        $attributes['style'] = 'padding-bottom: ' . round($image_attributes['height'] / $image_attributes['width'] * 100, 2) . '%';
      }
    }
    if (!empty($settings['background'])) {

      // @todo Blazy integration with multi-serving bakground images.
      // slick_build_breakpoint_attributes($attributes, $settings);
      $attributes['class'][] = 'b-bg media--background';
    }
    if (!empty($settings['lazy'])) {
      $attributes['class'][] = 'media--loading';

      // Attach data-attributes to the either DIV or IMG container.
      $image_attributes['src'] = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
      slick_build_breakpoint_attributes($image_attributes, $settings);

      // Do not pass to theme_image() as D7 doesn't support data URI, yet.
      $build = '<img' . drupal_attributes($image_attributes) . ' />';
    }
    else {
      $params['path'] = $settings['image_url'];
      $build = theme('image', $params);
    }
  }
  else {
    $params['uri'] = $uri;
    $build = theme('picture', $params);
  }

  // With CSS background, IMG may be emptied, so add to the container instead.
  if (!empty($settings['thumbnail_style'])) {
    $attributes['data-thumb'] = image_style_url($settings['thumbnail_style'], $uri);
  }

  // Prepares a media player.
  // build : If iframe switch disabled, use iframe only, remove image.
  // player: If no colorbox/photobox, it is an image to iframe switcher.
  // data- : Gets consistent with colorbox to share JS manipulation.
  // @todo re-check blazy 'data-src' IFRAME lazyload against blazy.media.js.
  if ($media) {
    $build = empty($switch) ? '' : $build;
    $settings['player'] = empty($settings['lightbox']) && $switch != 'content';
    $iframe_attributes['data-media'] = drupal_json_encode(array(
      'type' => $type,
      'scheme' => $item['scheme'],
    ));
    $iframe_attributes['data-lazy'] = $item['embed_url'];
    $iframe_attributes['src'] = empty($settings['iframe_lazy']) ? $item['embed_url'] : 'about:blank';
    $iframe_attributes['class'][] = 'media__iframe media__element';
    if ($settings['player']) {
      $attributes['class'][] = 'media--player';
      $build .= '<iframe' . drupal_attributes($iframe_attributes) . ' allowfullscreen></iframe>';
      $build .= '<span class="media-icon media-icon--close"></span>';
      $build .= '<span class="media-icon media-icon--play"></span>';
    }
  }
  $build .= $settings['icon'];
  $build = '<div' . drupal_attributes($attributes) . '>' . $build . '</div>';

  // The link to content or lightboxes.
  if (!empty($variables['url'])) {
    if (!empty($settings['lightbox'])) {
      $lightbox = TRUE;
      $icon = '<span class="media-icon media-icon--lightbox media-icon--' . $settings['lightbox'] . '"></span>';
      $build .= empty($settings['icon']) ? $icon : $settings['icon'];
      if (!empty($settings['has_pattern'])) {
        $build .= '<div class="slide__pattern"></div>';
      }
    }
    $link_options = empty($url_attributes) ? array() : array(
      'attributes' => $url_attributes,
    );
    $link_options['html'] = TRUE;
    $build = l($build, $variables['url'], $link_options);
    if (isset($lightbox) && !empty($variables['captions']['lightbox'])) {
      $build .= '<div class="litebox-caption element-invisible">' . $variables['captions']['lightbox'] . '</div>';
    }
  }
  return $build;
}