This is a demo announcement, dismissible and configured in site.json.
Switch to latest

Images and Links

Figures with captions, click-to-zoom lightbox, remote image fetching and link validation.

Plain images and figures

Standard Markdown. Add a title to get a centered figure with a caption:

markdown 
![Alt text](/docs/media/diagram.png)
![Alt text](/docs/media/diagram.png "This title becomes the caption")

Local SVGs are inlined at build time and follow the theme colors. Raster images get width and height attributes at build time so the page does not shift while loading.

Every content image is click-to-zoom. Press Esc or click anywhere to close. Try it:

A sample image that opens in the lightbox
Click the image to zoom. This caption comes from the title attribute.

Images wrapped in a link keep their link behavior and are excluded from the lightbox.

Remote images

Remote URLs are downloaded at build time and served from your site. A dead URL never breaks the build. The theme logs a warning and falls back to a plain <img> the browser loads at view time. Severity is configurable:

hugo.tomltoml 
[params.render_hooks.image]
errorLevel = "warning"   # ignore | warning (default) | error

Tip

Set error in CI if you want broken remote images to fail the pipeline.

Internal links are validated at build time:

hugo.tomltoml 
[params.render_hooks.link]
errorLevel = "warning"   # ignore | warning | error

Set error to make broken internal links fail the CI pipeline.

External links open in a new tab and get a small external icon automatically: Hugo documentation.

Same-page anchors work as expected: back to top. The target heading flashes on arrival so readers see where they landed.

Edit this page