function theme_picture in Responsive images and styles 8
Same name and namespace in other branches
- 7.2 resp_img.module \theme_picture()
Theme a picture element.
1 theme call to theme_picture()
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);
}
}