summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorwebchick2014-09-23 05:09:41 (GMT)
committerwebchick2014-09-23 05:09:41 (GMT)
commit7c309f918c83ee6d4f4df0a79fefb387bc093312 (patch)
tree227568effc80e4af196ac73a38245df759412d7e
parenteb23f0e816622ddced4aecad95772538094b7878 (diff)
Issue #2262863 by attiks, Jelle_S: Add srcset to template_preprocess_image.
-rw-r--r--core/includes/theme.inc24
-rw-r--r--core/modules/system/src/Tests/Theme/ImageTest.php96
2 files changed, 117 insertions, 3 deletions
diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index d7387a2..7a45d10 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -1073,11 +1073,31 @@ 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 URIs and sizes/multipliers.
* - sizes: The sizes attribute for viewport-based selection of images.
* - http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content.html#introduction-3:viewport-based-selection-2
*/
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', 'sizes') as $key) {
if (isset($variables[$key])) {
@@ -2268,7 +2288,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(), 'sizes' => NULL),
+ 'variables' => array('uri' => NULL, 'width' => NULL, 'height' => NULL, 'alt' => '', 'title' => NULL, 'attributes' => array(), 'sizes' => NULL, '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
index f28e1f7..f22ef2e 100644
--- a/core/modules/system/src/Tests/Theme/ImageTest.php
+++ b/core/modules/system/src/Tests/Theme/ImageTest.php
@@ -23,6 +23,21 @@ class ImageTest extends KernelTestBase {
*/
public static $modules = array('system');
+ /*
+ * The images to test with.
+ *
+ * @var array
+ */
+ protected $testImages;
+
+ protected function setUp() {
+ parent::setUp();
+ $this->testImages = array(
+ '/core/misc/druplicon.png',
+ '/core/misc/loading.gif',
+ );
+ }
+
/**
* Tests that an image with the sizes attribute is output correctly.
*/
@@ -32,7 +47,7 @@ class ImageTest extends KernelTestBase {
$image = array(
'#theme' => 'image',
'#sizes' => $sizes,
- '#uri' => '/core/misc/druplicon.png',
+ '#uri' => reset($this->testImages),
'#width' => rand(0, 1000) . 'px',
'#height' => rand(0, 500) . 'px',
'#alt' => $this->randomMachineName(),
@@ -44,4 +59,83 @@ class ImageTest extends KernelTestBase {
$this->assertRaw($sizes, 'Sizes is set correctly.');
}
+ /**
+ * Tests that an image with the src attribute is output correctly.
+ */
+ function testThemeImageWithSrc() {
+
+ $image = array(
+ '#theme' => 'image',
+ '#uri' => reset($this->testImages),
+ '#width' => rand(0, 1000) . 'px',
+ '#height' => rand(0, 500) . 'px',
+ '#alt' => $this->randomMachineName(),
+ '#title' => $this->randomMachineName(),
+ );
+ $this->render($image);
+
+ // Make sure the src attribute has the correct value.
+ $this->assertRaw(file_create_url($image['#uri']), 'Correct output for an image with the src attribute.');
+ }
+
+ /**
+ * Tests that an image with the srcset and multipliers is output correctly.
+ */
+ function testThemeImageWithSrcsetMultiplier() {
+ // Test with multipliers.
+ $image = array(
+ '#theme' => 'image',
+ '#srcset' => array(
+ array(
+ 'uri' => $this->testImages[0],
+ 'multiplier' => '1x',
+ ),
+ array(
+ 'uri' => $this->testImages[1],
+ 'multiplier' => '2x',
+ ),
+ ),
+ '#width' => rand(0, 1000) . 'px',
+ '#height' => rand(0, 500) . 'px',
+ '#alt' => $this->randomMachineName(),
+ '#title' => $this->randomMachineName(),
+ );
+ $this->render($image);
+
+ // Make sure the srcset attribute has the correct value.
+ $this->assertRaw(file_create_url($this->testImages[0]) . ' 1x, ' . file_create_url($this->testImages[1]) . ' 2x', 'Correct output for image with srcset attribute and multipliers.');
+ }
+
+ /**
+ * Tests that an image with the srcset and widths is output correctly.
+ */
+ function testThemeImageWithSrcsetWidth() {
+ // Test with multipliers.
+ $widths = array(
+ rand(0, 500) . 'w',
+ rand(500, 1000) . 'w',
+ );
+ $image = array(
+ '#theme' => 'image',
+ '#srcset' => array(
+ array(
+ 'uri' => $this->testImages[0],
+ 'width' => $widths[0],
+ ),
+ array(
+ 'uri' => $this->testImages[1],
+ 'width' => $widths[1],
+ ),
+ ),
+ '#width' => rand(0, 1000) . 'px',
+ '#height' => rand(0, 500) . 'px',
+ '#alt' => $this->randomMachineName(),
+ '#title' => $this->randomMachineName(),
+ );
+ $this->render($image);
+
+ // Make sure the srcset attribute has the correct value.
+ $this->assertRaw(file_create_url($this->testImages[0]) . ' ' . $widths[0] . ', ' . file_create_url($this->testImages[1]) . ' ' . $widths[1], 'Correct output for image with srcset attribute and width descriptors.');
+ }
+
}