hugo-geekdoc/exampleSite/content/en/shortcodes/images/_index.md

163 lines
5.5 KiB
Markdown
Raw Normal View History

2021-02-20 20:39:31 +00:00
---
title: Images
2021-02-20 20:39:31 +00:00
resources:
- name: forest-1
src: "forest-1.jpg"
title: Forest (1)
params:
credits: "[Jay Mantri](https://unsplash.com/@jaymantri) on [Unsplash](https://unsplash.com/s/photos/forest)"
- name: forest-2
src: "forest-2.jpg"
title: Forest (2)
params:
credits: "[Jay Mantri](https://unsplash.com/@jaymantri) on [Unsplash](https://unsplash.com/s/photos/forest)"
- name: forest-3
src: "forest-3.jpg"
title: Forest (3)
params:
credits: "[Jay Mantri](https://unsplash.com/@jaymantri) on [Unsplash](https://unsplash.com/s/photos/forest)"
- name: forest-4
src: "forest-4.jpg"
title: Forest (4)
params:
credits: "[Jay Mantri](https://unsplash.com/@jaymantri) on [Unsplash](https://unsplash.com/s/photos/forest)"
- name: forest-5
src: "forest-5.jpg"
title: Forest (5)
params:
credits: "[Jay Mantri](https://unsplash.com/@jaymantri) on [Unsplash](https://unsplash.com/s/photos/forest)"
- name: forest-6
src: "forest-6.jpg"
title: Forest (6)
params:
credits: "[Asher Ward](https://unsplash.com/@the_asher_ward) on [Unsplash](https://unsplash.com/s/photos/forest)"
- name: forest-7
src: "forest-7.jpg"
title: Forest (7)
params:
credits: "[Asher Ward](https://unsplash.com/@the_asher_ward) on [Unsplash](https://unsplash.com/s/photos/forest)"
- name: forest-8
src: "forest-8.svg"
title: Forest (8)
params:
credits: "SVG Repo on [SVGRepo](https://www.svgrepo.com/svg/286078/forest)"
2021-02-20 20:39:31 +00:00
---
If you need more flexibility for your embedded images, you could use the `img` shortcode. It is using Hugo's
[page resources](https://gohugo.io/content-management/page-resources/) and supports lazy loading of your images.
## Attributes
2021-02-20 20:39:31 +00:00
| Name | Description | default |
| ---- | ------------------------------------------------------------ | ----------------- |
| name | name of the image resource defined in your front matter | empty |
| alt | description for displayed image | resource `.Title` |
| size | Thumbnail size (origin\|profile\|tiny\|small\|medium\|large) | empty |
| lazy | enable or disable image lazy loading | true |
2021-02-20 20:39:31 +00:00
## Usage
2021-02-20 20:39:31 +00:00
2021-02-21 13:16:49 +00:00
Define your resources in the page front matter, custom parameter `params.credits` is optional.
2021-02-20 20:39:31 +00:00
<!-- spellchecker-disable -->
```md
---
resources:
- name: forest-1
src: "forest-1.jpg"
title: Forest (1)
params:
credits: "[Jay Mantri](https://unsplash.com/@jaymantri) on [Unsplash](https://unsplash.com/s/photos/forest)"
---
2021-02-21 13:16:49 +00:00
{{</* img name="forest-1" size="large" lazy=false */>}}
2021-02-20 20:39:31 +00:00
```
<!-- spellchecker-enable -->
## Example
2021-02-20 20:39:31 +00:00
<!-- spellchecker-disable -->
2021-04-27 21:44:35 +00:00
{{< img name="forest-1" lazy=false >}}
2021-02-20 20:39:31 +00:00
<!-- spellchecker-enable -->
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.
<!-- spellchecker-disable -->
2021-04-27 21:44:35 +00:00
{{< img name="forest-2" lazy=true >}}
2021-02-20 20:39:31 +00:00
<!-- spellchecker-enable -->
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.
<!-- spellchecker-disable -->
2021-04-27 21:44:35 +00:00
{{< img name="forest-3" lazy=true >}}
2021-02-20 20:39:31 +00:00
<!-- spellchecker-enable -->
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.
<!-- spellchecker-disable -->
2021-04-27 21:44:35 +00:00
{{< img name="forest-4" lazy=true >}}
2021-02-20 20:39:31 +00:00
<!-- spellchecker-enable -->
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.
<!-- spellchecker-disable -->
2021-04-27 21:44:35 +00:00
{{< img name="forest-5" lazy=true >}}
2021-02-20 20:39:31 +00:00
<!-- spellchecker-enable -->
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.
<!-- spellchecker-disable -->
2021-04-27 21:44:35 +00:00
{{< img name="forest-6" lazy=true >}}
2021-02-20 20:39:31 +00:00
<!-- spellchecker-enable -->
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.
<!-- spellchecker-disable -->
2021-04-27 21:44:35 +00:00
{{< img name="forest-7" lazy=true >}}
2021-02-20 20:39:31 +00:00
<!-- spellchecker-enable -->
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.
<!-- spellchecker-disable -->
{{< img name="forest-8" size=small lazy=true >}}
<!-- spellchecker-enable -->