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

enter image description here

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

  1. 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.
  2. I want to learn this view trick without relaying on CSS tricks.

I tried different tricks, like:

  1. 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).
  2. 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?

1 Answer 1


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.

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.