5. Add Images

Add a small or large image with a Doks shortcode (add extra classes), or use markdown (portability). Images are lazyloaded, blurred up, and responsive.

On this page

• Markdown
  • Add an image
• Shortcodes
  • Add a small image
  • Add a large image

Place your images in a page bundle, like so:

..
├── blog/
│   ├── say-hello-to-doks/
│   │   ├── index.md
│   │   └── say-hello-to-doks.png
│   └── _index.md
└── _index.md

See also the Hugo docs: Page Bundles

Markdown

Add an image

An <img> element is used for small images, a <figure> element for large images. Set smallLimit in ./config/_default/params.toml, e.g. smallLimit = "360".

Example

![Image](day-and-night-escher.jpg "Day and Night, 1938 — M.C. Escher")

Will be processed into:

Day and Night, 1938 — M.C. Escher

See also the Markdown Guide: Images

Shortcodes

Add a small image

Using img, src, and data-src.

💡

Valid image formats are: webp, jpg, png, tiff, bmp, and gif.

Add a small image in your page bundle to your page using shortcode img-simple.

Example

{{< img-simple src="square.png" alt="Square" class="border-0 rounded-circle" >}}

Will be processed into:

Add a large image

Using figure and figcaption with img, src, and data-srcset. With noscript fallback.

💡

Valid image formats are: webp, jpg, png, tiff, and bmp.

Add a large image in your page bundle to your page using shortcode img.

Example

{{< img src="rectangle.png" alt="Rectangle" caption="<em>Rectangle</em>" class="border-0" >}}

Will be processed into:

Rectangle