function theme_picture in Picture 7.2
Same name and namespace in other branches
- 7 picture.module \theme_picture()
Returns HTML for a picture.
Parameters
array $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.
4 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 formatter.
- theme_picture_formatter_colorbox in ./
picture.module - Theme function to add support for colorbox.
- _picture_filter_prepare_image in ./
picture.module - Prepares a Render Array for theme_picture_formatter().
File
- ./
picture.module, line 1363 - Picture formatter.
Code
function theme_picture(array $variables) {
$image_styles = image_styles();
// 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']);
}
if (isset($variables['metadata']['width']) && isset($variables['metadata']['height'])) {
$variables['width'] = $variables['metadata']['width'];
$variables['height'] = $variables['metadata']['height'];
}
$sources = array();
$output = array();
// If we know width and height we use them, if not we should get image info.
if (!empty($variables['width']) && !empty($variables['height'])) {
$dimensions = array(
'width' => $variables['width'],
'height' => $variables['height'],
);
}
else {
if (($image_info = image_get_info($variables['uri'])) === FALSE) {
watchdog('Picture', 'Unable to load image: %image', array(
'%image' => $variables['uri'],
));
// If the image couldn't be loaded return nothing.
return NULL;
}
$dimensions = array(
'width' => $image_info['width'],
'height' => $image_info['height'],
);
}
// All breakpoints and multipliers.
foreach ($variables['breakpoints'] as $breakpoint_name => $multipliers) {
$breakpoint = breakpoints_breakpoint_load_by_fullkey($breakpoint_name);
if ($breakpoint) {
$sizes = array();
$srcset = array();
foreach ($multipliers as $multiplier => $mapping_definition) {
switch ($mapping_definition['mapping_type']) {
case 'sizes':
foreach (array_filter($mapping_definition['sizes_image_styles']) as $image_style_name) {
$dimensions_clone = $dimensions;
picture_get_image_dimensions($image_style_name, $dimensions_clone);
// Get mime type.
// $derivative_mime_type = $mime_type;
// $image_style->transformMimeType($derivative_mime_type);
// $derivative_mime_types[] = $derivative_mime_type;
$srcset[$dimensions_clone['width']] = _picture_image_style_url($image_style_name, $variables['uri'], $variables['timestamp']) . ' ' . $dimensions_clone['width'] . 'w';
$sizes = array_merge(explode(',', $mapping_definition['sizes']), $sizes);
}
break;
case 'image_style':
// Get mime type (not implemented in Drupal 7.
// $derivative_mime_type = $mime_type;
// $image_style->transformMimeType($derivative_mime_type);
// $derivative_mime_types[] = $derivative_mime_type;
$srcset[$multiplier] = _picture_image_style_url($mapping_definition['image_style'], $variables['uri'], $variables['timestamp']) . ' ' . $multiplier;
break;
}
}
// Sort srcset.
ksort($srcset);
$aspect_ratio = '';
if (!empty($variables['lazyload_aspect_ratio']) && !empty($image_styles[$mapping_definition['image_style']])) {
$dimensions = array(
'width' => $variables['width'],
'height' => $variables['height'],
);
$dimensions = picture_get_image_dimensions($mapping_definition['image_style'], $dimensions);
// store as a string, JS plugin will do calculation
$aspect_ratio = $dimensions['width'] . '/' . $dimensions['height'];
}
$sources[] = array(
'#theme' => 'picture_source',
'#srcset' => implode(', ', array_unique($srcset)),
'#media' => $breakpoint->breakpoint,
'#sizes' => implode(', ', array_unique($sizes)),
'#lazyload' => !empty($variables['lazyload']),
'#lazyload_aspect_ratio' => $aspect_ratio,
);
}
}
$attributes = array();
foreach (array(
'alt',
'title',
'attributes',
) as $key) {
$field = sprintf('field_file_image_%s_text', $key);
if (isset($variables[$key]) && !empty($variables[$key])) {
if ($key == 'attributes') {
$attributes += $variables[$key];
}
else {
$attributes[$key] = $variables[$key];
}
}
elseif (isset($variables[$field]) && is_array($variables[$field]) && isset($variables[$field][LANGUAGE_NONE][0]['safe_value'])) {
if ($key == 'attributes') {
$attributes += $variables[$field][LANGUAGE_NONE][0]['safe_value'];
}
else {
$attributes[$key] = $variables[$field][LANGUAGE_NONE][0]['safe_value'];
}
}
}
if (!empty($sources)) {
$output[] = '<picture ' . drupal_attributes(array_diff_key($attributes, array(
'alt' => '',
))) . '>';
$output[] = '<!--[if IE 9]><video style="display: none;"><![endif]-->';
$output = array_merge($output, array_map('drupal_render', $sources));
$output[] = '<!--[if IE 9]></video><![endif]-->';
$src = _picture_image_style_url($variables['style_name'], $variables['uri'], $variables['timestamp']);
if (!empty($variables['lazyload'])) {
if (!isset($attributes['class'])) {
$attributes['class'] = array();
}
elseif (!is_array($attributes['class'])) {
$attributes['class'] = (array) $attributes['class'];
}
$attributes['class'][] = 'lazyload';
}
if (!empty($variables['lazyload_aspect_ratio'])) {
// img tag has to have data-aspectratio attribute even if its dummy placeholder
$attributes['data-aspectratio'] = '';
}
if (variable_get('picture_fallback_method', 'src') === 'src') {
$min_ie9_fallback = array(
'#theme' => 'image_srcset',
'#uri' => $src,
'#alt' => isset($attributes['alt']) ? $attributes['alt'] : '',
'#title' => isset($attributes['title']) ? $attributes['title'] : '',
'#attributes' => array_diff_key($attributes, array(
'alt' => '',
'title' => '',
)),
'#lazyload' => !empty($variables['lazyload']),
);
$output[] = drupal_render($min_ie9_fallback);
}
else {
// Fallback image for < IE9.
$min_ie9_fallback = array(
'#theme' => 'image_srcset',
'#uri' => $src,
'#alt' => isset($attributes['alt']) ? $attributes['alt'] : '',
'#title' => isset($attributes['title']) ? $attributes['title'] : '',
'#attributes' => array_diff_key($attributes, array(
'alt' => '',
'title' => '',
)),
'#lazyload' => !empty($variables['lazyload']),
);
$output[] = '<!--[if lt IE 9]>';
$output[] = drupal_render($min_ie9_fallback);
$output[] = '<![endif]-->';
// Fallback image for > IE8.
$srcset = array(
'uri' => $src,
);
$dimensions_clone = $dimensions;
picture_get_image_dimensions($variables['style_name'], $dimensions_clone);
if (!empty($dimensions_clone['width'])) {
$srcset['width'] = $dimensions_clone['width'] . 'w';
}
$plus_ie8_fallback = array(
'#theme' => 'image_srcset',
'#srcset' => array(
$srcset,
),
'#alt' => isset($attributes['alt']) ? $attributes['alt'] : '',
'#title' => isset($attributes['title']) ? $attributes['title'] : '',
'#attributes' => array_diff_key($attributes, array(
'alt' => '',
'title' => '',
)),
'#lazyload' => !empty($variables['lazyload']),
);
$output[] = '<!--[if !lt IE 9]><!-->';
$output[] = drupal_render($plus_ie8_fallback);
$output[] = '<!-- <![endif]-->';
}
$output[] = '</picture>';
return implode("\n", $output);
}
}