Images

Add a local or a remote image with Markdown, or use the image partial in a template. Images are lazyloaded, blurred up, and responsive.

See also the Markdown Guide: Images

Processing#

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

Settings#

Set smallLimit, defaultImage, and fillImage in ./config/_default/params.toml:

smallLimit = "320"

### Image partial
defaultImage = "default-image.png" # put in `./assets/images/`
fillImage = "1280x720 Center" # normalize image size

See also: Images

Shortcode#

Image in page bundle#

{{< figure link="https://www.jit.io/" src="security-as-code-startup-jit-comes-out-of-stealth-with-38-5m-in-seed-funding.jpg" alt="Describe your image" caption="For a figure caption can be different than alt text" >}}

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](green-sea-turtle-hatchling.webp "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:

Use the image partial#

Example#

Add {{ partial "content/image.html" . }} to ./layouts/blog/single.html:

{{ define "main" }}
<div class="row justify-content-center">
  <div class="col-lg-7">
    <article>
      <h1>{{ .Title }}</h1>
      {{ partial "content/image.html" . }}
      {{ .Content }}
    </article>
  </div>
</div>
{{ end }}

Edit this page on GitHub