How do I make several displays of one image field in a node? 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!
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(&amp;$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.