Images

Add a local or a remote image with Markdown. Images are lazyloaded, blurred up, and responsive.

See also the Markdown Guide: Images

Processing#

Render hook template: ./layouts/_default/_markup/render-image.html. An <img> element is generated for small images, a <figure> element for large images.

Settings#

Set smallLimit in ./config/_default/params.toml, e.g. smallLimit = "360".

See also: Images

Add a local image#

Place your local images in a page bundle:

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

See also the Hugo docs: Page Bundles

Example#

![Green Sea Turtle Hatchling by Hannah Le Leu](images/green-sea-turtle-hatchling.jpg "A green sea turtle hatchling cautiously surfaces for air, to a sky full of hungry birds.")

Will be processed into:

Add a remote image#

Example#

![Happy Dance by Neil Sanders](https://i.giphy.com/media/hIip12KtxrNU5GG0Ii/giphy.gif?cid=790b7611e72a6d08626c8c4ff1410056fbc51e0ed1f2daab&rid=giphy.gif&ct=s)

Will be processed into:

Edit this page on GitHub