3

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>    

2

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

| improve this answer | |
  • Thanks for this it works perfect for image fields and thanks for the info I checked all solutions and finally thought i should use the module. – danuddara Jun 21 '17 at 22:34
5

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).

| improve this answer | |
  • 1
    Hi Mikeker thanks for all this. yes I have seen the image.html.twig file it dose not give the information I need. If there was a node_type information in the attributes it could have been easy to add this using the twig code. however the [extra image field classes ](drupal.org/project/extra_image_field_classes) module did the job. so i marked that as the answer. – danuddara Jun 21 '17 at 22:41
  • 1
    function mmboots_preprocess_image_formatter(&$variables) { $bundles = $item['item']->getFieldDefinition()->getFieldStorageDefinition()->getBundles(); $key= array_keys($bundles); $variables['image']['#attributes']['type']=$key[0]; } I saw the hook 'image_formatter' get called before the hook 'image' in the debug mode and was able to inject node_type to attributes. then i was able to call it from the image.html.twig. hook_image didn't had what i looked for. Do you know whether drupal twig got any global variables we can call in a twig file ?. like $node? – danuddara Jun 22 '17 at 1:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.