Editorial Photo-Essay BlockLink
In-Progress New IssueThis is a Photo-Essay Block, It allows you to lay out a cluster of images in a percise and predictable manner. It puts a handful of layouts at your disposal that are able to accommidate any combination of portrait, landscape, wide, ultra-wide, and square media. Each row is treated as a seperate block. On the sidebar you choose your layout (i.e. 4 portrait images side by side, or 1 landscape and two portrait images, so on and so forth). The images will always retain their same aspect ratios across all browser sizes, and retain their layout down to phone sizes (~500px) below that they will stack sequentially.
Markup blocks/photoessay/bu-blocks-block-photoessay.hbs
<div class="wrapper">
<main id="main" role="main" class="content">
<article class="content-area">
<p>Nullam ultrices neque in quam malesuada, volutpat varius diam vulputate. Nulla facilisi. Proin pulvinar, lectus sit amet pellentesque luctus, elit arcu euismod turpis, et iaculis urna odio et nisl. Ut in molestie elit. Praesent lacinia sodales euismod. Ut consequat eleifend nulla, eu auctor nisl euismod vel. Curabitur luctus rhoncus mauris id porta. Etiam faucibus tellus non porta egestas. Praesent et tincidunt ex, ac tincidunt tortor. Vivamus ullamcorper nulla nunc, a scelerisque augue elementum vel.</p>
<div class="wp-block-editorial-photoessay {{modifier_class}} alignfull">
<div class="photo-row-square-s-s-s-s">
<div class="photo-s">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/6f6/fff/?text=s">
</figure>
</div>
</div>
<div class="photo-s">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/6f6/fff/?text=s">
</figure>
</div>
</div>
<div class="photo-s">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/6f6/fff/?text=s">
</figure>
</div>
</div>
<div class="photo-s">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/6f6/fff/?text=s">
</figure>
</div>
</div>
</div>
</div>
<div class="wp-block-editorial-photoessay {{modifier_class}} alignwide">
<div class="photo-row-square-s-s-s">
<div class="photo-s">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/66f/fff/?text=s">
</figure>
</div>
</div>
<div class="photo-s">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/66f/fff/?text=s">
</figure>
</div>
</div>
<div class="photo-s">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/66f/fff/?text=s">
</figure>
</div>
</div>
</div>
</div>
<div class="wp-block-editorial-photoessay {{modifier_class}}">
<div class="photo-row-square-s-1">
<div class="photo-s">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/f66/fff/?text=s">
</figure>
</div>
</div>
<div class="photo-1">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/f66/fff/?text=1">
</figure>
</div>
</div>
</div>
</div>
<div class="wp-block-editorial-photoessay {{modifier_class}} alignwide">
<div class="photo-row-square-s-2">
<div class="photo-s">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/6f6/fff/?text=s">
</figure>
</div>
</div>
<div class="photo-2">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/6f6/fff/?text=2">
</figure>
</div>
</div>
</div>
</div>
<div class="wp-block-editorial-photoessay {{modifier_class}} alignwide">
<div class="photo-row-square-s-3">
<div class="photo-s">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/66f/fff/?text=s">
</figure>
</div>
</div>
<div class="photo-3">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/66f/fff/?text=3">
</figure>
</div>
</div>
</div>
</div>
<div class="wp-block-editorial-photoessay {{modifier_class}} alignwide">
<div class="photo-row-short-2-2-2-2">
<div class="photo-2">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/f66/fff/?text=2">
</figure>
</div>
</div>
<div class="photo-2">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/f66/fff/?text=2">
</figure>
</div>
</div>
<div class="photo-2">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/f66/fff/?text=2">
</figure>
</div>
</div>
<div class="photo-2">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/f66/fff/?text=2">
</figure>
</div>
</div>
</div>
</div>
<div class="wp-block-editorial-photoessay {{modifier_class}} alignfull">
<div class="photo-row-short-4-2-2">
<div class="photo-4">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/66f/fff/?text=4">
</figure>
</div>
</div>
<div class="photo-2">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/66f/fff/?text=2">
</figure>
</div>
</div>
<div class="photo-2">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/66f/fff/?text=2">
</figure>
</div>
</div>
</div>
</div>
<div class="wp-block-editorial-photoessay {{modifier_class}} alignwide">
<div class="photo-row-short-2-4-2">
<div class="photo-2">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/6f6/fff/?text=2">
</figure>
</div>
</div>
<div class="photo-4">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/6f6/fff/?text=4">
</figure>
</div>
</div>
<div class="photo-2">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/6f6/fff/?text=2">
</figure>
</div>
</div>
</div>
</div>
<div class="wp-block-editorial-photoessay {{modifier_class}} alignwide">
<div class="photo-row-fourths-2-1-1">
<div class="photo-2">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/f66/fff/?text=2">
</figure>
</div>
</div>
<div class="photo-1 photo-is-vertical">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/f66/fff/?text=1">
</figure>
</div>
</div>
<div class="photo-1 photo-is-vertical">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/f66/fff/?text=1">
</figure>
</div>
</div>
</div>
</div>
<div class="wp-block-editorial-photoessay {{modifier_class}} alignwide">
<div class="photo-row-fourths-1-2-1">
<div class="photo-1 photo-is-vertical">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/6f6/fff/?text=1">
</figure>
</div>
</div>
<div class="photo-2">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/6f6/fff/?text=2">
</figure>
</div>
</div>
<div class="photo-1 photo-is-vertical">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/6f6/fff/?text=1">
</figure>
</div>
</div>
</div>
</div>
<div class="wp-block-editorial-photoessay {{modifier_class}} alignwide">
<div class="photo-row-fourths-2-2">
<div class="photo-2">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/66f/fff/?text=2">
</figure>
</div>
</div>
<div class="photo-2">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/66f/fff/?text=2">
</figure>
</div>
</div>
</div>
</div>
<div class="wp-block-editorial-photoessay {{modifier_class}} alignfull">
<div class="photo-row-fourths-3-1">
<div class="photo-3">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/f66/fff/?text=3">
</figure>
</div>
</div>
<div class="photo-1">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/f66/fff/?text=1">
</figure>
</div>
</div>
</div>
</div>
<div class="wp-block-editorial-photoessay {{modifier_class}} alignfull">
<div class="photo-row-fourths-4">
<div class="photo-4">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/6f6/fff/?text=4">
</figure>
</div>
</div>
</div>
</div>
<div class="wp-block-editorial-photoessay {{modifier_class}} alignwide">
<div class="photo-row-thirds">
<div class="photo-1">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/66f/fff/?text=1">
</figure>
</div>
</div>
<div class="photo-1">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/66f/fff/?text=1">
</figure>
</div>
</div>
<div class="photo-1">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/66f/fff/?text=1">
</figure>
</div>
</div>
</div>
</div>
<div class="wp-block-editorial-photoessay {{modifier_class}} alignwide">
<div class="photo-row-thirds">
<div class="photo-2">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/f66/fff/?text=2">
</figure>
</div>
</div>
<div class="photo-1">
<div class="wp-block-photoessay-media">
<figure class="wp-block-leadin-image">
<img src="https://via.placeholder.com/1000.jpg/f66/fff/?text=1">
</figure>
</div>
</div>
</div>
</div>
<p>Nullam ultrices neque in quam malesuada, volutpat varius diam vulputate. Nulla facilisi. Proin pulvinar, lectus sit amet pellentesque luctus, elit arcu euismod turpis, et iaculis urna odio et nisl. Ut in molestie elit. Praesent lacinia sodales euismod. Ut consequat eleifend nulla, eu auctor nisl euismod vel. Curabitur luctus rhoncus mauris id porta. Etiam faucibus tellus non porta egestas. Praesent et tincidunt ex, ac tincidunt tortor. Vivamus ullamcorper nulla nunc, a scelerisque augue elementum vel.</p>
</article>
</main>
</div>