After a few attemps…
(note that author’s image is also sourced from an external link!!!)
Figures (for images or video)
One Up
Don’t forget to change the ending with ?raw=1
Two Up
Apply the half
class like so to display two images side by side that share the same caption.
<figure class="half">
<img src="/images/image-filename-1.jpg" alt="image">
<img src="/images/image-filename-2.jpg" alt="image">
<figcaption>Caption describing these two images.</figcaption>
</figure>
And you’ll get something that looks like this:
Even 4 images:
You can include html tag <a href></a>
if you wish to link the image to its original source - as I did with the One Up example
Three Up
Apply the third
class like so to display three images side by side that share the same caption.
<figure class="third">
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
<figcaption>Caption describing these three images.</figcaption>
</figure>
And you’ll get something that looks like this:
or six: