diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index 3f6d623..7a21980 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -2266,7 +2266,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, 'style_name' => NULL, 'attributes' => array()),
'template' => 'image',
),
'breadcrumb' => array(
diff --git a/core/modules/image/image.module b/core/modules/image/image.module
index 913fb7f..b2116e4 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' => drupal_html_class($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 3d787d9..4d6c76b 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), '');
+ $this->assertEqual($this->getImageTag($variables), '');
$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), '');
+ $this->assertEqual($this->getImageTag($variables), '');
$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), '');
+ $this->assertEqual($this->getImageTag($variables), '');
$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), '');
+ $this->assertEqual($this->getImageTag($variables), '');
$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), '');
+ $this->assertEqual($this->getImageTag($variables), '');
$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), '');
+ $this->assertEqual($this->getImageTag($variables), '');
$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), '');
+ $this->assertEqual($this->getImageTag($variables), '');
$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), '');
+ $this->assertEqual($this->getImageTag($variables), '');
$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), '');
+ $this->assertEqual($this->getImageTag($variables), '');
}
/**
diff --git a/core/modules/system/templates/image.html.twig b/core/modules/system/templates/image.html.twig
index b6b238a..97039e1 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
*/
#}
-
+{%
+set classes = [
+ style_name ? 'image-style-' ~ style_name,
+]
+%}
+