Images and videos

Show Hide Table of Contents

Enhanced image presentation

A picture of Fortaleza’s coast that is center-aligned, has an elegant caption, and fits to a 100%-width automatically on smaller screens:

Here is the source code behind what you see above:

{% include figure.html src="640px-Fortaleza_-_Cear%C3%A1_-_Brasil.jpg" alt="Fortaleza’s coastline – Photo by deltafruit" caption="Fortaleza’s coastline – Photo by [deltafruit](https://www.flickr.com/photos/55953988@N00/) via [Wikipedia](https://en.wikipedia.org/wiki/Fortaleza)" w="640" h="428" %}

For those interested in the nitty gritty details, inside includes/figure.html we are:

1. Using the lazy-loading attribute loading="lazy" inside our <img> element (sidenote: Chrome supports it since mid 2019. Track the rollout of Firefox and Safari with caniuse.com.) .

2. Not only setting the width and height attributes, we are also inserting the image’s aspect-ratio with inline CSS (sidenote: Soon this aspect-ratio workaround won’t be needed anymore. Both Firefox 71+ and Chrome 79+ already calculate the aspect-ratio automatically since Dec 2019. And Safari is on their way.
   
   A good intro read to this topic is Setting Height And Width On Images Is Important Again.) . This is to prevent layout shifts in smaller screens. On mobile, for example, the image might be scaled down on the fly and that could cause an undesirable layout shift.

Image lightbox via Tobii

Thanks to Tobii, Papicu has the ability to show images in a lightbox, where they can be bigger and easier to zoom in.

For instance, instead of having just the 640px-wide image of Fortaleza’s coastline (that we’ve just seen in the previous section), we could give to users interested in a closer looking the chance to view a higher quality, 2560px-wide image.

To see it in action, simply tap or click on the image below:

To use it, add lightbox: true in your post’s front matter and customize the following code to your image:

{% include figure.html src="640px-Fortaleza_-_Cear%C3%A1_-_Brasil.jpg" alt="Fortaleza’s coastline – Photo by deltafruit" caption="Fortaleza’s coastline – Photo by [deltafruit](https://www.flickr.com/photos/55953988@N00/) via [Wikipedia](https://en.wikipedia.org/wiki/Fortaleza)" w="640" h="428" lightbox_img="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Fortaleza_-_Cear%C3%A1_-_Brasil.jpg/2560px-Fortaleza_-_Cear%C3%A1_-_Brasil.jpg" %}

Lazy-loaded, responsive, 16:9 YouTube embeds

Papicu supports embedding YouTube videos with cinematic aspect-ratio (16:9) and lazy-loading. All it takes is one line of liquid.

Here’s a demo:

The original URL of this drone footage is youtube.com/watch?v=8qNlZGtaclk.

{% include youtube.html id="8qNlZGtaclk" %}

Our implementation was based on this snippet by @pibby, and this codesandbox by @haggen.

December 2021