How to set Class for a particular image style?

Question

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?

Answer 1

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';
  }
}

Answer 2

I found very simple solution. just add your custom bootstrap 3 style.css...will work as you want..applied over usps tracking site to look

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