By thisthatother


2016-09-02 09:41:35 8 Comments

I'm trying to add a CSS class to a particular image style, in Drupal 8. For this purpose, I'm trying to set up a template, but am open to all solutions since I know I lack knowledge (I've been teaching myself this stuff over the past couple of months).

Specifically, I want all images with the style machine name 'feature_main_960_x_640_' and field machine name of 'field_image' to include the following class during 'Full content' view mode. I would like this class to be added to the img tag.

The purpose: to have my articles' feature images to be centered when the full content is being viewed.

Specifications: Drupal 8, theme is Bootstrap 3, using Display Suite module.

I've used Display Suite to add the Bootstrap 3's 'center-block' class. The class is added before the img tag, in a div. This doesn't center the image. I could only get the image to center when I manually added 'center-block' within img. I also used the Field Formatter Class module for this purpose and it also added the class to a div rather than img: so the problem persists.

So far, I've taken a sledgehammer to the problem and used the following template to apply the class to all images but would like to be precise in application, as mentioned above. This is the template I used:

image.html.twig

{% set classes = [
  theme.settings.image_shape ? theme.settings.image_shape,
  theme.settings.image_responsive ? 'img-responsive',
  'center-block',
] %}
<img{{ attributes.addClass(classes) }} />

Any solution?

1 comments

@Kevin 2018-08-09 18:25:10

In Drupal 8 you can do this with hook_preprocess_image in your themes mytheme.theme file.

/**
 * Implements hook_preprocess_image().
 */
function mytheme_preprocess_image(&$variables) {
  if ($variables['style_name'] == 'my_custom_image_style') {
    $variables['attributes']['class'][] = 'my_css_class';
  }
}

Related Questions

Sponsored Content

0 Answered Questions

How can I add classes to images added in CKEditor via Media?

  • 2018-09-04 17:01:16
  • Patrick Man
  • 419 View
  • 1 Score
  • 0 Answer
  • Tags:   8 wysiwyg media

1 Answered Questions

[SOLVED] Add class to image field

  • 2015-06-18 16:40:53
  • rkhff
  • 1023 View
  • 1 Score
  • 1 Answer
  • Tags:   7 media

1 Answered Questions

[SOLVED] Theming image.html.twig

  • 2018-03-12 17:32:42
  • Frederik Liefhooghe
  • 326 View
  • 0 Score
  • 1 Answer
  • Tags:   8 theming media

0 Answered Questions

How to set the image as a background using Url to Image formatter?

1 Answered Questions

[SOLVED] How to modify the image output for just one content type using Responsive Images?

  • 2017-12-12 05:59:51
  • usernameabc
  • 316 View
  • 1 Score
  • 1 Answer
  • Tags:   8 media theming

3 Answered Questions

[SOLVED] How to write page.tpl.php file for bootstrap site

  • 2015-11-23 23:19:06
  • learn4ever
  • 730 View
  • 0 Score
  • 3 Answer
  • Tags:   theming

1 Answered Questions

[SOLVED] Add class to image in view

  • 2015-06-03 18:52:49
  • Matt
  • 2394 View
  • 0 Score
  • 1 Answer
  • Tags:   views theming

0 Answered Questions

Cannot target <img> tag after switching to Picture module

1 Answered Questions

[SOLVED] Use theme_image_style twice

1 Answered Questions

Image module custom image style changes image link

  • 2015-01-21 00:22:44
  • David Pugh
  • 332 View
  • 0 Score
  • 1 Answer
  • Tags:   7 media theming

Sponsored Content