diff --git a/.drone.yml b/.drone.yml index ab7fee3..ab4e03d 100644 --- a/.drone.yml +++ b/.drone.yml @@ -159,7 +159,7 @@ steps: image: node:lts-alpine commands: - 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: FORCE_COLOR: true NPM_CONFIG_LOGLEVEL: error @@ -252,6 +252,6 @@ depends_on: --- kind: signature -hmac: fae8f99db3daee8b04423ca2f8c9f1aa0547a1902fcf7f90a17f9e39fcc302a9 +hmac: e7f2792705cf2a50d0d2c3aca83d5b715c56d1199ae838d0e8cd9dc89e0da305 ... diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index 1d15601..d901139 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -31,3 +31,5 @@ params: geekdocLegalNotice: https://thegeeklab.de/legal-notice/#contact-information geekdocPrivacyPolicy: https://thegeeklab.de/legal-notice/#privacy-policy + + geekdocImageLazyLoading: true diff --git a/exampleSite/content/shortcodes/images/_index.md b/exampleSite/content/shortcodes/images/_index.md new file mode 100644 index 0000000..678fcc3 --- /dev/null +++ b/exampleSite/content/shortcodes/images/_index.md @@ -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. + + + +```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)" +--- + +{{}} +``` + + + +**Demo:** + + + +{{< img name="forest-1" size="large" 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" size="large" 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" size="large" 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" size="large" 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" size="large" 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" size="large" 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" size="large" lazy=true >}} + + diff --git a/exampleSite/content/shortcodes/images/forest-1.jpg b/exampleSite/content/shortcodes/images/forest-1.jpg new file mode 100644 index 0000000..d6e4d47 Binary files /dev/null and b/exampleSite/content/shortcodes/images/forest-1.jpg differ diff --git a/exampleSite/content/shortcodes/images/forest-2.jpg b/exampleSite/content/shortcodes/images/forest-2.jpg new file mode 100644 index 0000000..ba4b991 Binary files /dev/null and b/exampleSite/content/shortcodes/images/forest-2.jpg differ diff --git a/exampleSite/content/shortcodes/images/forest-3.jpg b/exampleSite/content/shortcodes/images/forest-3.jpg new file mode 100644 index 0000000..e139da1 Binary files /dev/null and b/exampleSite/content/shortcodes/images/forest-3.jpg differ diff --git a/exampleSite/content/shortcodes/images/forest-4.jpg b/exampleSite/content/shortcodes/images/forest-4.jpg new file mode 100644 index 0000000..2cbb98d Binary files /dev/null and b/exampleSite/content/shortcodes/images/forest-4.jpg differ diff --git a/exampleSite/content/shortcodes/images/forest-5.jpg b/exampleSite/content/shortcodes/images/forest-5.jpg new file mode 100644 index 0000000..fbaf31f Binary files /dev/null and b/exampleSite/content/shortcodes/images/forest-5.jpg differ diff --git a/exampleSite/content/shortcodes/images/forest-6.jpg b/exampleSite/content/shortcodes/images/forest-6.jpg new file mode 100644 index 0000000..46c166b Binary files /dev/null and b/exampleSite/content/shortcodes/images/forest-6.jpg differ diff --git a/exampleSite/content/shortcodes/images/forest-7.jpg b/exampleSite/content/shortcodes/images/forest-7.jpg new file mode 100644 index 0000000..3b3ecdd Binary files /dev/null and b/exampleSite/content/shortcodes/images/forest-7.jpg differ diff --git a/exampleSite/content/usage/configuration.md b/exampleSite/content/usage/configuration.md index 3f38af0..6c573d7 100644 --- a/exampleSite/content/usage/configuration.md +++ b/exampleSite/content/usage/configuration.md @@ -85,6 +85,10 @@ enableGitInfo = true # (Optional, default true) Copy anchor url to clipboard on click. geekdocAnchorCopy = true + + # (Optional, default true) Enable or disable image lazy loading for images rendered + # by the 'img' shortcode. + geekdocImageLazyLoading = true ``` {{< /tab >}} @@ -164,6 +168,10 @@ params: # (Optional, default true) Copy anchor url to clipboard on click. geekdocAnchorCopy: true + + # (Optional, default true) Enable or disable image lazy loading for images rendered + # by the 'img' shortcode. + geekdocImageLazyLoading: true ``` {{< /tab >}} diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html new file mode 100644 index 0000000..119086d --- /dev/null +++ b/layouts/shortcodes/img.html @@ -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 }} + +
+
+ + {{ $caption }} + + {{ with $caption }} +
{{ . }}{{ with $source.Params.credits }} ({{ . | markdownify }}){{ end }}
+ {{ end }} +
+
+{{ end }} diff --git a/src/sass/_markdown.scss b/src/sass/_markdown.scss index 73fd18f..34b8305 100644 --- a/src/sass/_markdown.scss +++ b/src/sass/_markdown.scss @@ -54,6 +54,31 @@ img { 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 {