feat: add custom img shortcode (#71)

This commit is contained in:
Robert Kaussow 2021-02-20 21:39:31 +01:00 committed by GitHub
parent d9daf73afb
commit 1cf78cea4f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 222 additions and 2 deletions

View file

@ -159,7 +159,7 @@ steps:
image: node:lts-alpine image: node:lts-alpine
commands: commands:
- npm install -g spellchecker-cli - npm install -g spellchecker-cli
- spellchecker --files 'exampleSite/content/**/*.md' 'README.md' -d .dictionary -p spell indefinite-article syntax-urls --no-suggestions - spellchecker --files 'exampleSite/content/**/*.md' 'README.md' -d .dictionary -p spell indefinite-article syntax-urls frontmatter --no-suggestions
environment: environment:
FORCE_COLOR: true FORCE_COLOR: true
NPM_CONFIG_LOGLEVEL: error NPM_CONFIG_LOGLEVEL: error
@ -252,6 +252,6 @@ depends_on:
--- ---
kind: signature kind: signature
hmac: fae8f99db3daee8b04423ca2f8c9f1aa0547a1902fcf7f90a17f9e39fcc302a9 hmac: e7f2792705cf2a50d0d2c3aca83d5b715c56d1199ae838d0e8cd9dc89e0da305
... ...

View file

@ -31,3 +31,5 @@ params:
geekdocLegalNotice: https://thegeeklab.de/legal-notice/#contact-information geekdocLegalNotice: https://thegeeklab.de/legal-notice/#contact-information
geekdocPrivacyPolicy: https://thegeeklab.de/legal-notice/#privacy-policy geekdocPrivacyPolicy: https://thegeeklab.de/legal-notice/#privacy-policy
geekdocImageLazyLoading: true

View file

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 715 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 463 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 484 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 472 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 406 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 415 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 183 KiB

View file

@ -85,6 +85,10 @@ enableGitInfo = true
# (Optional, default true) Copy anchor url to clipboard on click. # (Optional, default true) Copy anchor url to clipboard on click.
geekdocAnchorCopy = true geekdocAnchorCopy = true
# (Optional, default true) Enable or disable image lazy loading for images rendered
# by the 'img' shortcode.
geekdocImageLazyLoading = true
``` ```
{{< /tab >}} {{< /tab >}}
@ -164,6 +168,10 @@ params:
# (Optional, default true) Copy anchor url to clipboard on click. # (Optional, default true) Copy anchor url to clipboard on click.
geekdocAnchorCopy: true geekdocAnchorCopy: true
# (Optional, default true) Enable or disable image lazy loading for images rendered
# by the 'img' shortcode.
geekdocImageLazyLoading: true
``` ```
{{< /tab >}} {{< /tab >}}

View file

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

View file

@ -54,6 +54,31 @@
img { img {
max-width: 100%; max-width: 100%;
border-radius: $border-radius;
}
&__figure {
padding: $padding-4;
margin: $padding-16 0;
background-color: $gray-300;
display: table;
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
figcaption {
display: table-caption;
caption-side: bottom;
background-color: $gray-300;
padding: 0 $padding-4 $padding-4;
text-align: center;
border-bottom-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
}
img {
max-width: 100%;
height: auto;
}
} }
blockquote { blockquote {