diff --git a/core/includes/theme.inc b/core/includes/theme.inc index d811f4d..e31dc1d 100644 --- a/core/includes/theme.inc +++ b/core/includes/theme.inc @@ -1120,9 +1120,29 @@ function template_preprocess_links(&$variables) { * - title: The title text is displayed when the image is hovered in some * popular browsers. * - attributes: Associative array of attributes to be placed in the img tag. + * - srcset: Array of multiple URI's and sizes/multipliers. */ function template_preprocess_image(&$variables) { - $variables['attributes']['src'] = file_create_url($variables['uri']); + if (!empty($variables['uri'])) { + $variables['attributes']['src'] = file_create_url($variables['uri']); + } + // Generate a srcset attribute conforming to the spec at + // http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#attr-img-srcset + if (!empty($variables['srcset'])) { + $srcset = array(); + foreach ($variables['srcset'] as $src) { + // URI is mandatory. + $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); + } foreach (array('width', 'height', 'alt', 'title') as $key) { if (isset($variables[$key])) { @@ -2287,7 +2307,7 @@ function drupal_common_theme() { // - http://dev.w3.org/html5/spec/Overview.html#alt // The title attribute is optional in all cases, so it is omitted by // default. - 'variables' => array('uri' => NULL, 'width' => NULL, 'height' => NULL, 'alt' => '', 'title' => NULL, 'attributes' => array()), + 'variables' => array('uri' => NULL, 'width' => NULL, 'height' => NULL, 'alt' => '', 'title' => NULL, 'attributes' => array(), 'srcset' => array()), 'template' => 'image', ), 'breadcrumb' => array( diff --git a/core/modules/system/src/Tests/Theme/ImageTest.php b/core/modules/system/src/Tests/Theme/ImageTest.php new file mode 100644 index 0000000..f37ef9b --- /dev/null +++ b/core/modules/system/src/Tests/Theme/ImageTest.php @@ -0,0 +1,98 @@ +testImages = array( + DRUPAL_ROOT . '/core/misc/druplicon.png', + DRUPAL_ROOT . '/core/misc/loading.gif', + DRUPAL_ROOT . '/core/misc/loading-small.gif', + ); + } + + /** + * Tests that an image with the src attribute is outputted correctly. + */ + function testThemeImageWithSrc() { + + $image = array( + '#theme' => 'image', + '#uri' => reset($this->testImages), + '#width' => rand(0, 1000) . 'px', + '#height' => rand(0, 500) . 'px', + '#alt' => $this->randomString(), + '#title' => $this->randomString(), + ); + $this->render($image); + $this->removeWhiteSpace(); + $expected = '' . $image['#alt']
+      . ''; + $this->assertRaw($expected, 'Correct output for image with src attribute.'); + } + + /** + * Tests that an image with the srcset attribute is outputted correctly. + */ + function testThemeImageWithSrcset() { + // Test with multipliers. + $image = array( + '#theme' => 'image', + '#srcset' => array( + array( + 'uri' => $this->testImages[0], + 'multiplier' => '1x', + ), + array( + 'uri' => $this->testImages[1], + 'multiplier' => '2x', + ), + array( + 'uri' => $this->testImages[2], + 'width' => '640w', + ), + ), + '#width' => rand(0, 1000) . 'px', + '#height' => rand(0, 500) . 'px', + '#alt' => $this->randomString(), + '#title' => $this->randomString(), + ); + $this->render($image); + $this->removeWhiteSpace(); + $expected = ''
+      . $image['#alt'] . ''; + $this->assertRaw($expected, 'Correct output for image with srcset attribute.'); + } + +}