diff --git a/core/modules/responsive_image/responsive_image.module b/core/modules/responsive_image/responsive_image.module index 3898e14..3a7fd6a 100644 --- a/core/modules/responsive_image/responsive_image.module +++ b/core/modules/responsive_image/responsive_image.module @@ -95,14 +95,6 @@ function responsive_image_theme() { ), 'function' => 'theme_responsive_image_formatter', ), - 'responsive_image_source' => array( - 'variables' => array( - 'srcset' => array(), - 'media' => NULL, - 'mime_type' => NULL, - 'sizes' => NULL, - ), - ), ); } @@ -188,7 +180,7 @@ function template_preprocess_responsive_image(&$variables) { } $image = \Drupal::service('image.factory')->get($variables['uri']); - $variables['sources'] = responsive_image_build_source_tags($image, $variables); + $variables['sources'] = responsive_image_build_source_attributes($image, $variables); // Output the fallback image. Use srcset in the fallback image to avoid // unnecessary preloading of images in older browsers. See // http://scottjehl.github.io/picturefill/#using-picture and @@ -210,9 +202,9 @@ function template_preprocess_responsive_image(&$variables) { /** * Helper function for template_preprocess_responsive_image(). * - * Builds an array of render arrays that will output tags to be used in - * a tag. In other words, this function provides the contents for a - * tag. + * Builds an array of attributes for tags to be used in a + * tag. In other words, this function provides the attributes for each + * tag in a tag. * * In a responsive image mapping, each breakpoint has a mapping defined for each * of its multipliers. A mapping can be either of two types: 'sizes' (meaning @@ -307,7 +299,7 @@ function template_preprocess_responsive_image(&$variables) { * - width: The width of the image (if known). * - height: The height of the image (if known). */ -function responsive_image_build_source_tags(ImageInterface $image, $variables) { +function responsive_image_build_source_attributes(ImageInterface $image, $variables) { $sources = array(); $width = isset($variables['width']) && !empty($variables['width']) ? $variables['width'] : $image->getWidth(); $height = isset($variables['height']) && !empty($variables['height']) ? $variables['height'] : $image->getHeight(); @@ -338,10 +330,7 @@ function responsive_image_build_source_tags(ImageInterface $image, $variables) { // it. Because of this, the image styles for all multipliers of // this breakpoint should be merged into one srcset and the sizes // attribute should be merged as well. - $srcset[floatval($dimensions['width'])] = array( - 'uri' => _responsive_image_image_style_url($image_style_name, $image->getSource()), - 'width' => $dimensions['width'] . 'w', - ); + $srcset[floatval($dimensions['width'])] = file_create_url(_responsive_image_image_style_url($image_style_name, $image->getSource())) . ' ' . $dimensions['width'] . 'w'; $sizes = array_merge(explode(',', $mapping_definition['image_mapping']['sizes']), $sizes); } break; @@ -351,22 +340,18 @@ function responsive_image_build_source_tags(ImageInterface $image, $variables) { $derivative_mime_type = responsive_image_get_mime_type($mapping_definition['image_mapping'], $extension); $derivative_mime_types[] = $derivative_mime_type; // Add the image source with its multiplier. - $srcset[floatval(Unicode::substr($multiplier, 0, -1))] = array( - 'uri' => _responsive_image_image_style_url($mapping_definition['image_mapping'], $image->getSource()), - 'multiplier' => $multiplier, - ); + $srcset[floatval(Unicode::substr($multiplier, 0, -1))] = file_create_url(_responsive_image_image_style_url($mapping_definition['image_mapping'], $image->getSource())) . ' ' . $multiplier; break; } } ksort($srcset); - $sources[] = array( - '#theme' => 'responsive_image_source', - '#srcset' => array_map('unserialize', array_unique(array_map('serialize', $srcset))), - '#media' => $breakpoint->getMediaQuery(), + $sources[] = new \Drupal\Core\Template\Attribute(array( + 'srcset' => implode(', ', array_unique($srcset)), + 'media' => $breakpoint->getMediaQuery(), // Only set a MIME type if it's the same for all derivative images. - '#mime_type' => count(array_unique($derivative_mime_types)) == 1 ? $derivative_mime_types[0] : '', - '#sizes' => implode(',', array_unique($sizes)), - ); + 'type' => count(array_unique($derivative_mime_types)) == 1 ? $derivative_mime_types[0] : '', + 'sizes' => implode(',', array_unique($sizes)), + )); } } return $sources; @@ -374,48 +359,6 @@ function responsive_image_build_source_tags(ImageInterface $image, $variables) { } /** - * Prepares variables for tag templates. - * - * This template outputs a tag to be used in a tag. - * - * Default template: responsive-image-source.html.twig. - * - * @param array $variables - * An associative array containing: - * - media: The media query to use. - * - srcset: Array of multiple URIs and sizes/multipliers. - * - mime_type: The MIME type of the image (if known). - * - sizes: The sizes attribute for the source element. - */ -function template_preprocess_responsive_image_source(&$variables) { - $srcset = array(); - foreach ($variables['srcset'] as $src) { - // URI is mandatory. - if (!isset($src['uri'])) { - throw new \LogicException('Key \'uri\' is required for each source in a srcset.'); - } - $source = file_create_url($src['uri']); - if (isset($src['width']) && !empty($src['width'])) { - $source .= ' ' . $src['width']; - } - elseif (isset($src['multiplier']) && !empty($src['multiplier'])) { - $source .= ' ' . $src['multiplier']; - } - $srcset[] = $source; - } - $variables['attributes']['srcset'] = implode(', ', $srcset); - if (isset($variables['media']) && !empty($variables['media'])) { - $variables['attributes']['media'] = $variables['media']; - } - if (isset($variables['mime_type']) && !empty($variables['mime_type'])) { - $variables['attributes']['type'] = $variables['mime_type']; - } - if (isset($variables['sizes']) && !empty($variables['sizes'])) { - $variables['attributes']['sizes'] = $variables['sizes']; - } -} - -/** * Determines the dimensions of an image. * * @param string $image_style_name diff --git a/core/modules/responsive_image/templates/responsive-image-source.html.twig b/core/modules/responsive_image/templates/responsive-image-source.html.twig deleted file mode 100644 index b056a88..0000000 --- a/core/modules/responsive_image/templates/responsive-image-source.html.twig +++ /dev/null @@ -1,15 +0,0 @@ -{# -/** - * @file - * Default theme implementation of a tag. - * - * Available variables: - * - attributes: HTML attributes for the tag. - * - * @see template_preprocess() - * @see template_preprocess_responsive_image_source() - * - * @ingroup themeable - */ -#} - diff --git a/core/modules/responsive_image/templates/responsive-image.html.twig b/core/modules/responsive_image/templates/responsive-image.html.twig index b929163..ac62a27 100644 --- a/core/modules/responsive_image/templates/responsive-image.html.twig +++ b/core/modules/responsive_image/templates/responsive-image.html.twig @@ -21,7 +21,9 @@ picture tags. See http://scottjehl.github.io/picturefill/#ie9 #} - {{ sources }} + {% for source_attributes in sources %} + + {% endfor %} {% endif %} {{ fallback_image }}