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 >}}
---
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 >}}
