-
Notifications
You must be signed in to change notification settings - Fork 302
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add custom img shortcode (#71)
- Loading branch information
Showing
13 changed files
with
222 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,145 @@ | ||
--- | ||
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)" | ||
--- | ||
|
||
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 `geekdocImageLazyLoading`. | true | | ||
|
||
**Example:** | ||
|
||
Define your resources in the page front matter. `params.credits` are optional. | ||
|
||
<!-- 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)" | ||
--- | ||
|
||
{{</* img name="forest-1" size="large" lazy=true */>}} | ||
``` | ||
|
||
<!-- spellchecker-enable --> | ||
|
||
**Demo:** | ||
|
||
<!-- spellchecker-disable --> | ||
|
||
{{< img name="forest-1" size="large" lazy=false >}} | ||
|
||
<!-- 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-2" size="large" lazy=true >}} | ||
|
||
<!-- 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-3" size="large" lazy=true >}} | ||
|
||
<!-- 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-4" size="large" lazy=true >}} | ||
|
||
<!-- 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-5" size="large" lazy=true >}} | ||
|
||
<!-- 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-6" size="large" lazy=true >}} | ||
|
||
<!-- 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-7" size="large" lazy=true >}} | ||
|
||
<!-- spellchecker-enable --> |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
{{ $source := ($.Page.Resources.ByType "image").GetMatch (printf "*%s*" (.Get "name")) }} | ||
{{ $customAlt := .Get "alt" }} | ||
{{ $customSize := .Get "size" }} | ||
{{ $lazyLoad := default (default true $.Site.Params.GeekdocImageLazyLoading) (.Get "lazy") }} | ||
|
||
{{ with $source }} | ||
{{ $caption := default .Title $customAlt }} | ||
|
||
{{ $tiny := (.Resize "320x").RelPermalink }} | ||
{{ $small := (.Resize "600x").RelPermalink }} | ||
{{ $medium := (.Resize "1200x").RelPermalink }} | ||
{{ $large := (.Resize "1800x").RelPermalink }} | ||
|
||
{{ $size := dict "tiny" $tiny "small" $small "medium" $medium "large" $large }} | ||
|
||
<div class="flex justify-center"> | ||
<figure class="gdoc-markdown__figure"> | ||
<a href="{{ .RelPermalink }}"> | ||
<img | ||
{{ if $lazyLoad }}loading="lazy"{{ end }} | ||
{{ with $customSize }} | ||
src="{{ index $size $customSize }}" alt="{{ $caption }}" | ||
{{ else }} | ||
srcset="{{ $size.tiny }} 320w, | ||
{{ $size.small }} 600w, | ||
{{ $size.medium }} 1200w, | ||
{{ $size.large }} 2x" | ||
sizes="(max-width: 320px) 320w, | ||
(max-width: 600px) 600w, | ||
(max-width: 1200px) 1200w, | ||
2x" | ||
src="{{ $size.large }}" alt="{{ $caption }}" | ||
{{ end }}/> | ||
</a> | ||
{{ with $caption }} | ||
<figcaption>{{ . }}{{ with $source.Params.credits }} ({{ . | markdownify }}){{ end }}</figcaption> | ||
{{ end }} | ||
</figure> | ||
</div> | ||
{{ end }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters