Images With Links in Markdown

When I converted this site’s Hugo themes to Hextra and Gallery, I was determined to find a way to insert image links into posts, where clicking on a small image would link to the full-sized image. I also wanted a caption to appear under the image. It turns out there is a way to do this with Markdown, but the necessary information wasn’t all in one place, and I had to piece it together.

First, it’s simple enough to include an inline image using Markdown. For example:

![alt](image-url)

Here, alt is the text that appears instead of the image if the image-url is invalid.

But how to put a caption under the image? Simply insert the caption string in quotes after image-url:

![alt](image-url "Caption")

The final problem: how to make this image be a link to a larger image. The solution is to put brackets around the Markdown code for the smaller image, and append the URL for the larger image in parentheses:

[![alt](small-image-url "Caption")](large-image-url)

Here’s a slightly modified example from an earlier post:

The code for the above image looks like this (shown on two lines for clarity):

[![Dead Tree](/gallery/grouse-lakes/IMG_20250707_111612_526_hu_7ae287b424bb764a.jpg "Not a flower")]
 (/gallery/grouse-lakes/IMG_20250707_111612_526.jpg)

Here is the breakdown of this code:

• The string “Dead Tree” is the text that would appear if the image were missing or inaccessible.

• The very long image filename with the _hu_... modification is a thumbnail image generated by the Gallery theme. This is the image that appears above.

• The string “Not a flower” is the caption that appears under the image, and also appears when hovering the mouse cursor over the image.

• The image filename without the _hu_... modification is the full-sized image, which appears when you click on the thumbnail image or its caption.