0

In an archive page, I need to calculate the total height of a which is the container of many featured thumbnails, knowing that all the featured thumbnails have different heights (but the same width) and knowing that the thumbnail will be displayed in three column which means that I have to divide the sum by three.

<div class="container">
<img src="image.jpg" width="200" height="300" />
<img src="image.jpg" width="200" height="500" />
<img src="image.jpg" width="200" height="450" />
…
</div>

I think that the way to calculate it is to retrieve the featured thumbnails heights within the loop and then to add all of them. But, how to do it precisely ?

What I aim is to create a gallery which contains all my featured thumbnail displayed in three column of the same size, like the Flick way but with a vertical alignment.

Maybe I'm trying to reinvent the wheel and there is a plugin that automatically does it ?

0

What I aim is to create a gallery which contains all my featured thumbnail displayed in three column of the same size, like the Flick way but with a vertical alignment.

did you try masonry.js? it's a javascript library that can help you create the gallery without the need to calculate the height of each image.

if you decided to use masonry.js, you may need to use images-loaded.js in order to help masonry.js deal with images dimensions correctly.

1
  • I will try this solution : thanks for putting me on a track ! – PhpDoe Jun 26 '20 at 15:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.