3cc469c0b7
- The new server-based horizontal masonry enables tightly packed image grids even with images of varying aspect ratios - Additionally, the space an image takes is now allocated before it's loaded, reducing content shifting
10 lines
492 B
Smarty
10 lines
492 B
Smarty
{{foreach $rows as $images}}
|
|
<div class="imagegrid-row" style="height: {{$images[0].commonHeightRatio}}%">
|
|
{{foreach $images as $image}}
|
|
{{* The absolute pixel value in the calc() should be mirrored from the .imagegrid-row column-gap value *}}
|
|
<figure style="width: {{$image.widthRatio}}%; padding-bottom: calc({{$image.heightRatio * $image.widthRatio / 100}}% - 5px / 2)">
|
|
{{include file="content/image.tpl" image=$image}}
|
|
</figure>
|
|
{{/foreach}}
|
|
</div>
|
|
{{/foreach}}
|