I'm trying to implement a JS image gallery to my project. I've created three image styles:

  • thumbnails 135x105
  • gallery 690x430
  • full 1600x900 (responsive)

Thumbnails are used as a pager for the gallery. By clicking the zoom button, the full image should be loaded and opened in a modal.

The question is, how to use all three image styles with one image field and display them in one node?

On Drupal 7 I've used Gallery Formatter module, but on Drupal 8 it's not working properly.

The task seems to be quite trivial, but i didn't find any answer. May be there is some module or i can set image style to the field in twig template? Thanks in advance!

1 Answer 1


The right solution would be an image formatter, which is configurable to have multiple instances of the same image with different display options.

If you can't find this in a module, you can improvise in preprocess of the node template:


function mytheme_preprocess_node(&$variables) {
   if (isset($variables['content']['field_image'])) {
    $image = $variables['content']['field_image'];
    $image['0']['#image_style'] = 'gallery';
    $variables['content']['field_image_gallery'] = $image;
    $image['0']['#image_style'] = 'full';
    $variables['content']['field_image_full'] = $image;

This code makes a copy of the image field and puts it in two additional fields, each with a different image style. This is for a single value field. I suppose your gallery is a view of multiple nodes with a single image. If there are multiple images in one node you would have to process the images in a loop (a bit more improvisation needed).

If it is a responsive image use this line to change the image style:

$image['0']['#responsive_image_style_id'] = 'gallery';

All three images should be of the same kind (standard or responsive), otherwise there would be some more work to do.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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