Img · WolfspyreLabs' 🐺🔥🔬 Blog

If you need more flexibility for your embedded images, you could use the img shortcode. It is using Hugo’s page resources and supports lazy loading of your images.

Attributes:

Name	Usage	default
name (string)	Name of the image resource defined in your front matter.	empty
alt (string)	Description for displayed image.	resource `.Title`
size (string)	Thumbnail size (profile\|tiny\|small\|medium\|large).	empty
lazy (bool)	Enable or disable image lazy loading. Can be controlled globally by site parameter `geekdocImageLazyLoading`.	true

Sizes:

Size	Resized_to
profile	180x180 Centered
tiny	320x
small	600x
medium	1200x
large	1800x

Example:

Define your resources in the page front matter, custom parameter params.credits is optional.

---
resources:
  - name: Evey01
    src: "Evey01.webp"
    title: Evey!
    params:
      credits: "[Evey Noblewise](/authors/evey-noblewise)"
---

{{/< img name="Evey01" size="large" lazy=false >}}

The Peeviest of them all! (Evey Noblewise)

---
resources:
  - name: art
    src: "subdir/evey02.jpg"
    alt: 'where is my little girl?'
    title: "DAMNIT I MISS YOU!"
    params:
      credits: "[Evey Noblewise](/authors/evey-noblewise)"
---

{{/< img name="art" lazy=false >}}