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?

2 comments

@Viable Network 2020-04-07 10:31:29

I found very simple solution. just add your custom bootstrap 3 style.css...will work as you want..

.img-responsive{
  margin-left: auto;
  margin-right: auto;
  display:block
}

@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

1 Answered Questions

Image module custom image style changes image link

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

1 Answered Questions

Image Style Clarification

  • 2019-09-25 18:16:21
  • ACanadianCoder
  • 47 View
  • 0 Score
  • 1 Answer
  • Tags:   views 8 media

1 Answered Questions

[SOLVED] Add class to image field

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

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
  • 555 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
  • 806 View
  • 0 Score
  • 3 Answer
  • Tags:   theming

1 Answered Questions

[SOLVED] Add class to image in view

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

1 Answered Questions

[SOLVED] Use theme_image_style twice

Sponsored Content