feat: enable lazy loading for custom img shortcode (#28)

This commit is contained in:
Robert Kaussow 2021-02-21 14:45:41 +01:00 committed by GitHub
parent 582d84408e
commit 0317ea13ce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 54 additions and 8 deletions

View File

@ -81,3 +81,5 @@ params:
geekblogLegalNotice: https://thegeeklab.de/legal-notice/#contact-information geekblogLegalNotice: https://thegeeklab.de/legal-notice/#contact-information
geekblogPrivacyPolicy: https://thegeeklab.de/legal-notice/#privacy-policy geekblogPrivacyPolicy: https://thegeeklab.de/legal-notice/#privacy-policy
geekblogImageLazyLoading: true

View File

@ -245,6 +245,10 @@ enableGitInfo = true
# (Optional, default posts) Set the name of the default content section. # (Optional, default posts) Set the name of the default content section.
geekblogContentSection = "my-pages" geekblogContentSection = "my-pages"
# (Optional, default true) Enable or disable image lazy loading for images rendered
# by the 'img' shortcode.
geekblogImageLazyLoading = true
# (Optional, default none) Adds a "Hosted on <provider>" line to the footer. # (Optional, default none) Adds a "Hosted on <provider>" line to the footer.
# Could be used if you want to give credits to your hosting provider. # Could be used if you want to give credits to your hosting provider.
[params.geekblogHostedOn] [params.geekblogHostedOn]
@ -355,6 +359,10 @@ params:
# (Optional, default posts) Set the name of the default content section. # (Optional, default posts) Set the name of the default content section.
geekblogContentSection: "my-pages" geekblogContentSection: "my-pages"
# (Optional, default true) Enable or disable image lazy loading for images rendered
# by the 'img' shortcode.
geekblogImageLazyLoading: true
# (Optional, default none) Adds a "Hosted on <provider>" line to the footer. # (Optional, default none) Adds a "Hosted on <provider>" line to the footer.
# Could be used if you want to give credits to your hosting provider. # Could be used if you want to give credits to your hosting provider.
geekblogHostedOn: geekblogHostedOn:

View File

@ -19,8 +19,37 @@ resources:
credits: "[David Pennington](https://unsplash.com/@dtpennington) on [Unsplash](https://unsplash.com/s/photos/test)" credits: "[David Pennington](https://unsplash.com/@dtpennington) on [Unsplash](https://unsplash.com/s/photos/test)"
--- ---
Amalia id per in minimum facility, quid facet modifier ea ma. Ill um select ma ad, en ferric patine sentient vim. Per expendable foreordained interpretations cu, maxim sole pertinacity in ram. 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. 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.
{{< img name="testimage" size="small" >}} **Attributes:**
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. | 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 >}}

View File

@ -1,6 +1,7 @@
{{ $source := ($.Page.Resources.ByType "image").GetMatch (printf "*%s*" (.Get "name")) }} {{ $source := ($.Page.Resources.ByType "image").GetMatch (printf "*%s*" (.Get "name")) }}
{{ $customAlt := .Get "alt" }} {{ $customAlt := .Get "alt" }}
{{ $customSize := .Get "size" }} {{ $customSize := .Get "size" }}
{{ $lazyLoad := default (default true $.Site.Params.GeekblogImageLazyLoading) (.Get "lazy") }}
{{ with $source }} {{ with $source }}
{{ $caption := default .Title $customAlt }} {{ $caption := default .Title $customAlt }}
@ -16,6 +17,7 @@
<figure class="gblog-post__figure"> <figure class="gblog-post__figure">
<a class="gblog-post__link--raw" href="{{ .RelPermalink }}"> <a class="gblog-post__link--raw" href="{{ .RelPermalink }}">
<img <img
{{ if $lazyLoad }}loading="lazy"{{ end }}
{{ with $customSize }} {{ with $customSize }}
src="{{ index $size $customSize }}" alt="{{ $caption }}" src="{{ index $size $customSize }}" alt="{{ $caption }}"
{{ else }} {{ else }}

View File

@ -272,7 +272,7 @@ img {
min-height: 180px; min-height: 180px;
object-fit: cover; object-fit: cover;
overflow: hidden; overflow: hidden;
border-radius: 3px; border-radius: $border-radius;
} }
span { span {
@ -283,7 +283,7 @@ img {
padding: $padding-4; padding: $padding-4;
font-size: 0.8em; font-size: 0.8em;
color: $gray-200; color: $gray-200;
border-radius: 3px 0; border-radius: $border-radius 0;
} }
a:hover, a:hover,
@ -301,17 +301,21 @@ img {
} }
&__figure { &__figure {
padding: $padding-4 $padding-4 0 $padding-4; padding: $padding-4;
margin: $padding-16 0; margin: $padding-16 0;
background-color: $gray-300; background-color: $gray-300;
display: table; display: table;
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
figcaption { figcaption {
display: table-caption; display: table-caption;
caption-side: bottom; caption-side: bottom;
background-color: $gray-300; background-color: $gray-300;
padding: $padding-4; padding: 0 $padding-4 $padding-4;
text-align: center; text-align: center;
border-bottom-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
} }
img { img {

View File

@ -11,7 +11,7 @@ $font-size-14: 0.875rem !default;
$font-size-16: 1rem !default; $font-size-16: 1rem !default;
$font-size-32: 2rem !default; $font-size-32: 2rem !default;
$border-radius: 0.3rem !default; $border-radius: 0.15rem !default;
// Grayscale // Grayscale
$white: rgba(255, 255, 255, 1) !default; $white: rgba(255, 255, 255, 1) !default;

View File

@ -22,6 +22,7 @@
img { img {
max-width: 100%; max-width: 100%;
border-radius: $border-radius;
} }
blockquote { blockquote {