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 = '';
+ $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 = '';
+ $this->assertRaw($expected, 'Correct output for image with srcset attribute.');
+ }
+
+}