Chase to main content
  1. Snippits & Exemplars/
  2. WolfspyreLabs Exemplars/
  3. WolfspyreLabs Shortcodes/

Img

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!
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 >}}
DAMNIT I MISS YOU!
DAMNIT I MISS YOU! (Evey Noblewise)