mirror of
https://github.com/thegeeklab/hugo-geekblog.git
synced 2024-07-02 15:10:57 +02:00
56 lines
2.2 KiB
Markdown
56 lines
2.2 KiB
Markdown
---
|
|
title: "Post with images"
|
|
date: 2020-06-22T20:00:00+02:00
|
|
authors:
|
|
- richard-roe
|
|
- john-doe
|
|
tags:
|
|
- Open Source
|
|
- Development
|
|
resources:
|
|
- name: feature
|
|
src: "images/feature.jpg"
|
|
params:
|
|
credits: "[Angelina Litvin](https://unsplash.com/@linalitvina) on [Unsplash](https://unsplash.com/s/photos/writing)"
|
|
- name: testimage
|
|
src: "images/testimage.jpg"
|
|
title: This is a test image
|
|
params:
|
|
credits: "[David Pennington](https://unsplash.com/@dtpennington) on [Unsplash](https://unsplash.com/s/photos/test)"
|
|
---
|
|
|
|
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:**
|
|
|
|
| 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 (tiny\|small\|medium\|large). | empty |
|
|
| lazy (bool) | Enable or disable image lazy loading. Can be controlled globally by site parameter `geekblogImageLazyLoading`. | true |
|
|
|
|
**Example:**
|
|
|
|
Define your resources in the page front matter, custom parameter `params.credits` is optional.
|
|
|
|
<!-- spellchecker-disable -->
|
|
|
|
```md
|
|
---
|
|
resources:
|
|
- name: testimage
|
|
src: "images/testimage.jpg"
|
|
title: This is a test image
|
|
params:
|
|
credits: "[David Pennington](https://unsplash.com/@dtpennington) on [Unsplash](https://unsplash.com/s/photos/test)"
|
|
---
|
|
|
|
{{</* img name="testimage" size="small" lazy=true */>}}
|
|
```
|
|
|
|
<!-- spellchecker-enable -->
|
|
|
|
{{< img name="testimage" size="small" lazy=true >}}
|