How do I make several displays of one image field in a node?

Question

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!

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:

mytheme.theme:

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.