How to appened a new 'class' attribute to a custom field ? - twig drupal 8

Question

Just started to work around with Drupal 8.

I want to add class "center-block" to the field_product_image.

<img class="img-responsive {new class}"/>

How do i do this guys?
below is the twig code

   {% if content.field_product_image| render %}
    <div class="col-sm-3">
    {{ content.field_product_image }}
    </div>
    {% endif %}
    <div class="col-sm-9">
        {{ content.body }}
        {{ content.field_features }}
    </div>    

Answer 1

You can check Extra Image Field Classes module.

This module will help in adding custom classes to image field.

Extra Image Field Classes module will allow users to apply css class to image field.

How to add custom classes to image field

1. Go to "Manage Display" of an entity type
2. Select "Extra Image Field Classes" format from Format column for image field
3. Click on settings wheel of the image field
4. Enter css classes in Image Class textfield
5. Click "Update" button
6. Remember to click "Save" button after making necessary changes.

Also Go for hook_preprocess_field()

Adding a class to default images in Drupal 8

Add class to field in Drupal 8

adding css classes into a specific image field

Answer 2

Normally I would say to call addClass() on the image.attributes variable in your image Twig file, but I believe images don't have a lot of template suggestions (everything goes through image.html.twig) which means that your class will be added to all images. Likely not what you're looking for...

Option one, inspect the variables in image.html.twig and see if they give you the information you need to determine when to add the new class. If so, do it in the Twig template (attributes.addClass('new-class')).

Option two, implement hook_preprocess_image in your theme's .theme file. Something like this:

function MYTHEME_preprocess_image(&$variables) {
  if (some_way_to_figure_out_if_this_is_the_right_image) {
    $variables['attributes']['class'][] = 'new-class';
  }
}

Hope that helps. (Edited for better code formatting).