How to calculate the sum of all featured thumbnail height on Wordpress?

Question

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 ?

Answer 1

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.