I would like to create a layout like in this image.

example layout

It's all the same content type, and I am displaying images.

The columns have all the same width, the first columns -left- contains 2 teasers ( one below the other), the second one -center- contains 1 teaser, the last column -right- contains 2 teasers ( one below the other).

The image teaser on the center column has the same width of the other but it has the double of height, so I will need another image style or another field.

I can't achieve this just with css otherwise the images will look stretched/cropped.

I don't know how to approach to this issue. How to say that each two nodes, I need to display one with a different image style or another field image, using views.

Any help, suggestion, idea would be appreciate!

  • it's do able, but first you should tell us if this is Drupal 7 or 8?
    – No Sssweat
    Commented Feb 22, 2016 at 21:40
  • @NoSssweat at the title says Drupal 7 ;)
    – Elin Y.
    Commented Feb 22, 2016 at 21:56
  • @ЕлинЙ. oh geeze for some reason I was only looking at the tags field.
    – No Sssweat
    Commented Feb 22, 2016 at 21:58
  • Yes is Drupal 7, any idea how to approach to this issue?
    – cri
    Commented Feb 23, 2016 at 7:41

1 Answer 1


This solution is not perfect, but will most likely be the fastest to achieve:

  • In hook_node_preprocess() render the image field twice, once with small and once with large image style.
  • Edit your node--YOUR-CTYPE.tpl.php file and display both images.
  • Use CSS to display the correct one. You can basically do this:

    .views-row-1 .your-large-image-selector,
    .views-row-2 .your-large-image-selector,
    .views-row-4 .your-large-image-selector,
    .views-row-5 .your-large-image-selector {
      /* Hide large image. */
    .views-row-3 .your-small-image-selector {
      /* Hide small image. */

Other than that, you could try doing this in a custom module, unless you really need Views for something. I think doing this through a custom module makes more sense if you have to display a larger number of images on the page (e.g. 20-30), because with the approach above you will end up with twice as much images.

Here's what you would need to do in a custom module:

  • Add hook_theme() implementation and declare your own custom template. Here you would display the first two items on the left, third in the middle and the last two in the right column. The arguments for the template would be just an array called items for example.
  • Get all nodes you want to display, prepare the output and split them into groups of 5. Every third item would use the larger image style.
  • Loop through the groups and theme the output based on your custom theme.
  • Put everything together and display on the page.

This way you won't have 2 images for each node, but you will have to write custom code.

There are other ways to achieve this, but I believe developer sanity should not be overlooked. The ways I suggested above are more or less easy to do.

Hope this helps.

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.