From 2bccde8fd7e6dcb1880f9585f6933ee424f06613 Mon Sep 17 00:00:00 2001
From: Alex Pott <alex.a.pott@googlemail.com>
Date: Thu, 2 Oct 2014 12:19:49 +0200
Subject: [PATCH] Issue #2329771 by davidhernandez, lauriii, pakmanlh: Move
image classes from preprocess to templates.
---
core/includes/theme.inc | 2 +-
core/modules/image/image.module | 4 +---
.../image/src/Tests/ImageDimensionsTest.php | 18 +++++++++---------
core/modules/system/templates/image.html.twig | 8 +++++++-
4 files changed, 18 insertions(+), 14 deletions(-)
diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index f136ca1e1685..d10ce95d9d05 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -2263,7 +2263,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, 'srcset' => array()),
+ 'variables' => array('uri' => NULL, 'width' => NULL, 'height' => NULL, 'alt' => '', 'title' => NULL, 'attributes' => array(), 'sizes' => NULL, 'srcset' => array(), 'style_name' => NULL),
'template' => 'image',
),
'breadcrumb' => array(
diff --git a/core/modules/image/image.module b/core/modules/image/image.module
index 29839d2eea7f..de32196d5f31 100644
--- a/core/modules/image/image.module
+++ b/core/modules/image/image.module
@@ -281,15 +281,13 @@ function template_preprocess_image_style(&$variables) {
$style->transformDimensions($dimensions);
- // Add in the image style name as an HTML class.
- $variables['attributes']['class'][] = 'image-style-' . drupal_html_class($variables['style_name']);
-
$variables['image'] = array(
'#theme' => 'image',
'#width' => $dimensions['width'],
'#height' => $dimensions['height'],
'#attributes' => $variables['attributes'],
'#uri' => $style->buildUrl($variables['uri']),
+ '#style_name' => $variables['style_name'],
);
if (isset($variables['alt']) || array_key_exists('alt', $variables)) {
diff --git a/core/modules/image/src/Tests/ImageDimensionsTest.php b/core/modules/image/src/Tests/ImageDimensionsTest.php
index 3d787d98803d..4d6c76b37533 100644
--- a/core/modules/image/src/Tests/ImageDimensionsTest.php
+++ b/core/modules/image/src/Tests/ImageDimensionsTest.php
@@ -67,7 +67,7 @@ function testImageDimensions() {
$style->addImageEffect($effect);
$style->save();
- $this->assertEqual($this->getImageTag($variables), '<img class="image-style-test" src="' . $url . '" width="120" height="60" alt="" />');
+ $this->assertEqual($this->getImageTag($variables), '<img src="' . $url . '" width="120" height="60" alt="" class="image-style-test" />');
$this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
$this->drupalGet($url);
$this->assertResponse(200, 'Image was generated at the URL.');
@@ -88,7 +88,7 @@ function testImageDimensions() {
$style->addImageEffect($effect);
$style->save();
- $this->assertEqual($this->getImageTag($variables), '<img class="image-style-test" src="' . $url . '" width="60" height="120" alt="" />');
+ $this->assertEqual($this->getImageTag($variables), '<img src="' . $url . '" width="60" height="120" alt="" class="image-style-test" />');
$this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
$this->drupalGet($url);
$this->assertResponse(200, 'Image was generated at the URL.');
@@ -110,7 +110,7 @@ function testImageDimensions() {
$style->addImageEffect($effect);
$style->save();
- $this->assertEqual($this->getImageTag($variables), '<img class="image-style-test" src="' . $url . '" width="45" height="90" alt="" />');
+ $this->assertEqual($this->getImageTag($variables), '<img src="' . $url . '" width="45" height="90" alt="" class="image-style-test" />');
$this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
$this->drupalGet($url);
$this->assertResponse(200, 'Image was generated at the URL.');
@@ -132,7 +132,7 @@ function testImageDimensions() {
$style->addImageEffect($effect);
$style->save();
- $this->assertEqual($this->getImageTag($variables), '<img class="image-style-test" src="' . $url . '" width="45" height="90" alt="" />');
+ $this->assertEqual($this->getImageTag($variables), '<img src="' . $url . '" width="45" height="90" alt="" class="image-style-test" />');
$this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
$this->drupalGet($url);
$this->assertResponse(200, 'Image was generated at the URL.');
@@ -150,7 +150,7 @@ function testImageDimensions() {
$style->addImageEffect($effect);
$style->save();
- $this->assertEqual($this->getImageTag($variables), '<img class="image-style-test" src="' . $url . '" width="45" height="90" alt="" />');
+ $this->assertEqual($this->getImageTag($variables), '<img src="' . $url . '" width="45" height="90" alt="" class="image-style-test" />');
$this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
$this->drupalGet($url);
$this->assertResponse(200, 'Image was generated at the URL.');
@@ -171,7 +171,7 @@ function testImageDimensions() {
$style->addImageEffect($effect);
$style->save();
- $this->assertEqual($this->getImageTag($variables), '<img class="image-style-test" src="' . $url . '" alt="" />');
+ $this->assertEqual($this->getImageTag($variables), '<img src="' . $url . '" alt="" class="image-style-test" />');
$this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
$this->drupalGet($url);
$this->assertResponse(200, 'Image was generated at the URL.');
@@ -191,7 +191,7 @@ function testImageDimensions() {
$style->addImageEffect($effect);
$style->save();
- $this->assertEqual($this->getImageTag($variables), '<img class="image-style-test" src="' . $url . '" width="30" height="30" alt="" />');
+ $this->assertEqual($this->getImageTag($variables), '<img src="' . $url . '" width="30" height="30" alt="" class="image-style-test" />');
$this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
$this->drupalGet($url);
$this->assertResponse(200, 'Image was generated at the URL.');
@@ -212,7 +212,7 @@ function testImageDimensions() {
$effect_id = $style->addImageEffect($effect);
$style->save();
- $this->assertEqual($this->getImageTag($variables), '<img class="image-style-test" src="' . $url . '" alt="" />');
+ $this->assertEqual($this->getImageTag($variables), '<img src="' . $url . '" alt="" class="image-style-test" />');
$this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
$this->drupalGet($url);
$this->assertResponse(200, 'Image was generated at the URL.');
@@ -231,7 +231,7 @@ function testImageDimensions() {
$style->addImageEffect($effect);
$style->save();
- $this->assertEqual($this->getImageTag($variables), '<img class="image-style-test" src="' . $url . '" alt="" />');
+ $this->assertEqual($this->getImageTag($variables), '<img src="' . $url . '" alt="" class="image-style-test" />');
}
/**
diff --git a/core/modules/system/templates/image.html.twig b/core/modules/system/templates/image.html.twig
index b6b238a35516..2f29304d48ad 100644
--- a/core/modules/system/templates/image.html.twig
+++ b/core/modules/system/templates/image.html.twig
@@ -5,10 +5,16 @@
*
* Available variables:
* - attributes: HTML attributes for the img tag.
+ * - style_name: (optional) The name of the image style applied.
*
* @see template_preprocess_image()
*
* @ingroup themeable
*/
#}
-<img{{ attributes }} />
+{%
+set classes = [
+ style_name ? 'image-style-' ~ style_name|clean_class,
+]
+%}
+<img{{ attributes.addClass(classes) }} />
--
GitLab