hugo-geekblog/exampleSite/content/posts/post-with-images/index.md
Robert Kaussow 2f01b4b903
refactor: move profile size from img to degicated avatar shortcode (#525)
BREAKING CHANGE: The `size=profile` option was removed from the `img` shortcode. To create avatar images the new `avatar` shortcode can be used.
2024-04-07 21:46:31 +02:00

5.5 KiB

title date authors tags resources
Advanced Images 2020-06-22T20:00:00+02:00
john-doe
Documentation
Shortcodes
name src params
feature images/feature.jpg
credits
[Angelina Litvin](https://unsplash.com/@linalitvina) on [Unsplash](https://unsplash.com/s/photos/writing)
name src title params
forest-1 images/forest-1.jpg Forest (1)
credits
[Jay Mantri](https://unsplash.com/@jaymantri) on [Unsplash](https://unsplash.com/s/photos/forest)
name src title params
forest-2 images/forest-2.jpg Forest (2)
credits
[Jay Mantri](https://unsplash.com/@jaymantri) on [Unsplash](https://unsplash.com/s/photos/forest)
name src title params
forest-3 images/forest-3.jpg Forest (3)
credits
[Jay Mantri](https://unsplash.com/@jaymantri) on [Unsplash](https://unsplash.com/s/photos/forest)
name src title params
forest-4 images/forest-4.jpg Forest (4)
credits
[Jay Mantri](https://unsplash.com/@jaymantri) on [Unsplash](https://unsplash.com/s/photos/forest)
name src title params
forest-5 images/forest-5.jpg Forest (5)
credits
[Jay Mantri](https://unsplash.com/@jaymantri) on [Unsplash](https://unsplash.com/s/photos/forest)
name src title params
forest-6 images/forest-6.jpg Forest (6)
credits
[Asher Ward](https://unsplash.com/@the_asher_ward) on [Unsplash](https://unsplash.com/s/photos/forest)
name src title params
forest-7 images/forest-7.jpg Forest (7)
credits
[Asher Ward](https://unsplash.com/@the_asher_ward) on [Unsplash](https://unsplash.com/s/photos/forest)
name src title params
forest-8 images/forest-8.svg Forest (8)
credits
SVG Repo on [SVGRepo](https://www.svgrepo.com/svg/286078/forest)

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.

Usage

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

---
resources:
  - name: forest-1
    src: "images/forest-1.jpg"
    title: Forest (1)
    params:
      credits: "[Jay Mantri](https://unsplash.com/@jaymantri) on [Unsplash](https://unsplash.com/s/photos/forest)"
---

{{</* img name="forest-1" lazy=false */>}}

Attributes

{{< propertylist name=shortcode-images sort=name order=asc >}}

Example

{{< img name="forest-1" lazy=false >}}

Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious copious quo ad. Stet probates in duo.

{{< img name="forest-2" lazy=true >}}

Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious copious quo ad. Stet probates in duo.

{{< img name="forest-3" lazy=true >}}

Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious copious quo ad. Stet probates in duo.

{{< img name="forest-4" lazy=true >}}

Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious copious quo ad. Stet probates in duo.

{{< img name="forest-5" lazy=true >}}

Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious copious quo ad. Stet probates in duo.

{{< img name="forest-6" lazy=true >}}

Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious copious quo ad. Stet probates in duo.

{{< img name="forest-7" lazy=true >}}

Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious copious quo ad. Stet probates in duo.

{{< img name="forest-8" size=small lazy=true >}}