How to get different image styles in the same view?

Question

I'am a newbie, and I want to make a simple view with an image field (in article nodes), that looks like this layout :

And for this, I don't want to use CSS rules to resize the view rows images, for two reasons :

I am using bootstrap grid, and I don't want to deal with relative heights, since images in articles have various sizes, so I prefer that this view do the image resizing for me.
I want to learn this view trick without relaying on CSS tricks.

I tried different tricks, like:

importing the image filed twice, making each one in different image style, rewriting them (displaying them conditionaly) based on "view result counter", but putting a condion like {% if counter == 1 %} or like {% if counter == '1' %} don't work (i think it still an open issue).
I tried also making some theme preprocess or theme hook altering to force a different image style for the first iteration.

I'm so frustrated because of such an easy task that looks so hard to me.

Any help?

Ivan Tibezh · Accepted Answer · 2020-05-13 10:42:19Z

The Twig Tweak can help you.

Firstly, you should write a specific condition for check if the image is first.

{% if loop.index == 1 %}

Inside condition you need to fetch an uri to the image and apply the Image Style Filter.

1 Answer 1