diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml index ae03686bb..c9b710ae2 100644 --- a/exampleSite/config/_default/params.toml +++ b/exampleSite/config/_default/params.toml @@ -27,17 +27,15 @@ enablePWA = false license = 'CC BY-NC 4.0' # [Experimental] Bundle js bundle = false -# [Experimental] cache remote images in markdown, more info: https://github.com/HEIGE-PCloud/DoIt/pull/860#issue-1574342372 -# [试验性功能] 缓存 markdown 中的图片链接到本地，详情请见：https://github.com/HEIGE-PCloud/DoIt/pull/860#issue-1574342372 -cacheRemoteImages = true -# [Experimental] generate image srcset attribute with hugo image processing feature. -# [试验性功能] 使用 hugo 自带的图片处理功能生成 srcset 属性 -optimizeImages = true -# [Experimental] resize method for srcset attribute in optimizeImages, more info: https://gohugo.io/content-management/image-processing/#image-processing-options -# [实验性功能] optimizeImages 中 srcset 属性的缩放方法, 详情请见：https://gohugo.io/content-management/image-processing/#image-processing-options -srcsetSmallResizeMethod = "400x webp Lanczos q75" -srcsetDefaultResizeMethod = "600x webp Lanczos q75" -srcsetLargeResizeMethod = "800x webp Lanczos q75" + +[image] + # cache remote images for better optimisations + # 缓存图片链接到本地 + cacheRemote = true + # Image resizing and optimisation + # 图片缩放和优化 + optimise = true + # Header config # 页面头部导航栏配置 [header] diff --git a/exampleSite/content/posts/theme-documentation-basics/index.en.md b/exampleSite/content/posts/theme-documentation-basics/index.en.md index 87bcc83c5..0c0bd5d23 100644 --- a/exampleSite/content/posts/theme-documentation-basics/index.en.md +++ b/exampleSite/content/posts/theme-documentation-basics/index.en.md @@ -269,6 +269,12 @@ Please open the code block below to view the complete sample configuration {{< f ignoreLocation = false useExtendedSearch = false ignoreFieldNorm = false + + [params.image] + # cache remote images for better optimisations + cacheRemote = true + # Image resizing and optimisation + optimise = true # Header config [params.header] # {{< version 0.2.11 >}} Theme change mode diff --git a/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md index c9e525e99..23904c054 100644 --- a/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md +++ b/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md @@ -273,6 +273,11 @@ optimizeImages = true useExtendedSearch = false ignoreFieldNorm = false + [params.image] + # 缓存图片链接到本地 + cacheRemote = true + # 图片缩放和优化 + optimise = true # 页面头部导航栏配置 [params.header] # {{< version 0.2.11 >}} 主题切换模式 diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md index ff5549e51..f0555902c 100644 --- a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md +++ b/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md @@ -155,14 +155,6 @@ The `image` shortcode has the following named parameters: `class` attribute of the HTML `figure` tag. -* **src_s** *[optional]* - - URL of the image thumbnail, used for lightgallery, the default value is the value of the **src** parameter. - -* **src_l** *[optional]* - - URL of the HD image, used for lightgallery, the default value is the value of the **src** parameter. - * **height** *[optional]* `height` attribute of the image. @@ -179,6 +171,14 @@ The `image` shortcode has the following named parameters: Additional `rel` attributes of the HTML `a` tag, if **linked** parameter is set to `true`. +* **optimise** *[optional]* + + Whether to optimise the image, override the site configuration. + +* **cacheRemote** *[optional]* + + Whether to cache the remote image, override the site configuration. + Example `image` input: ```markdown diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md index f196bbf91..e4b361855 100644 --- a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md +++ b/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md @@ -159,14 +159,6 @@ This is a **right-aligned** paragraph. HTML `figure` 标签的 `class` 属性. -* **src_s** *[可选]* - - 图片缩略图的 URL, 用在画廊模式中, 默认值是 **src** 参数的值. - -* **src_l** *[可选]* - - 高清图片的 URL, 用在画廊模式中, 默认值是 **src** 参数的值. - * **height** *[可选]* 图片的 `height` 属性. @@ -183,6 +175,14 @@ This is a **right-aligned** paragraph. HTML `a` 标签 的 `rel` 补充属性, 仅在 **linked** 属性设置成 `true` 时有效. +* **optimise** *[可选]* + + 图片是否需要被优化，覆盖全局配置。 + +* **cacheRemote** *[可选]* + + 是否缓存远程图片，覆盖全局配置。 + 一个 `image` 示例: ```markdown diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html index 9441c0cb9..8136736e0 100644 --- a/layouts/_default/_markup/render-image.html +++ b/layouts/_default/_markup/render-image.html @@ -1,13 +1,14 @@ {{- $lightgallery := .Page.Params.lightgallery | default site.Params.Page.lightgallery | default false -}} -{{- if .Title -}} -
- {{- dict "Src" .Destination "Title" .Text "Caption" .Title "Linked" $lightgallery "Resources" .Page.Resources "Optim" true "Remote" true | partial "plugin/image.html" -}} +{{- $optim := slice + (dict "Process" "resize 800x webp q75" "descriptor" "800w") + (dict "Process" "resize 1200x webp q75" "descriptor" "1200w") + (dict "Process" "resize 1600x webp q75" "descriptor" "1600w") +-}} +
+ {{- dict "Src" .Destination "Title" .Text "Caption" .Title "Linked" $lightgallery "Resources" .Page.Resources "OptimConfig" $optim | partial "plugin/image.html" -}} + {{- if .Title -}}
{{- .Title | safeHTML -}}
-
-{{- else -}} -
- {{- dict "Src" .Destination "Title" .Text "Linked" $lightgallery "Resources" .Page.Resources "Optim" true "Remote" true | partial "plugin/image.html" -}} -
-{{- end -}} + {{- end -}} +
diff --git a/layouts/_default/summary.html b/layouts/_default/summary.html index 617094b12..fff66bd06 100644 --- a/layouts/_default/summary.html +++ b/layouts/_default/summary.html @@ -6,7 +6,12 @@ {{- with $image -}}
- {{- dict "Src" . "Title" $.Description "Resources" $.Resources "Loading" "eager" "Optim" true | partial "plugin/image.html" -}} + {{ $optim := slice + (dict "Process" "fill 800x240 Center webp q75" "descriptor" "800w") + (dict "Process" "fill 1200x360 Center webp q75" "descriptor" "1200w") + (dict "Process" "fill 1600x480 Center webp q75" "descriptor" "1600w") + }} + {{- dict "Src" . "Title" $.Title "Resources" $.Resources "Loading" "eager" "Width" "800" "Height" "240" "Sizes" "(max-width: 680px) 100vw, (max-width: 1000px) 80vw, (max-width: 1440px) 56vw, 800px" "OptimConfig" $optim "Alt" (printf "Featured image for %v" $.Title) | partial "plugin/image.html" -}}
{{- end -}} diff --git a/layouts/partials/function/imageHandler.html b/layouts/partials/function/imageHandler.html deleted file mode 100644 index b27d60e3f..000000000 --- a/layouts/partials/function/imageHandler.html +++ /dev/null @@ -1,18 +0,0 @@ -{{- $return := 0 -}} -{{- $suffixList := slice ".jpeg" ".jpg" ".png" ".gif" ".bmp" ".tif" ".tiff" ".webp" -}} - -{{- if not (eq .Optim true) -}} - {{- $return = dict "S" .Image "M" .Image "L" .Image "Optimized" false -}} -{{- else if or - (not (eq site.Params.optimizeImages true)) - (not (dict "Path" .Image.RelPermalink "Suffixes" $suffixList | partial "function/suffixValidation.html")) - -}} - {{- $return = dict "S" .Image "M" .Image "L" .Image "Optimized" true -}} -{{- else -}} - {{- $s := .Image.Resize (site.Params.srcsetSmallResizeMethod | default "700x webp Lanczos q60") -}} - {{- $m := .Image.Resize (site.Params.srcsetDefaultResizeMethod | default "1200x webp Lanczos q60") -}} - {{- $l := .Image.Resize (site.Params.srcsetLargeResizeMethod | default "2000x webp Lanczos q60") -}} - {{- $return = dict "S" $s "M" $m "L" $l "Optimized" true -}} -{{- end -}} - -{{- return $return -}} diff --git a/layouts/partials/home/profile.html b/layouts/partials/home/profile.html index ecd0f6c64..d5f192a87 100644 --- a/layouts/partials/home/profile.html +++ b/layouts/partials/home/profile.html @@ -7,20 +7,24 @@ {{- if $avatar -}}
{{- $menus := $.Site.Menus.main | default slice -}} + {{- $optim := slice + (dict "Process" "fill center 96x96 webp q75" "descriptor" "96w") + (dict "Process" "fill center 144x144 webp q75" "descriptor" "144w") + (dict "Process" "fill center 192x192 webp q75" "descriptor" "192w") + -}} {{- with index $menus 0 -}} - {{- $url := .URL | relLangURL -}} - {{- with .Page -}} - {{- $url = .RelPermalink -}} - {{- end -}} - {{- with $profile.avatarLinkURL -}} - {{- $url = . -}} - {{- end -}} - - {{- dict "Src" $avatar "Height" "100" "Width" "100" "Loading" "eager" | partial "plugin/image.html" -}} - + {{- $url := .URL | relLangURL -}} + {{- with .Page -}} + {{- $url = .RelPermalink -}} + {{- end -}} + {{- with $profile.avatarLinkURL -}} + {{- $url = . -}} + {{- end -}} + + {{- dict "Src" $avatar "Height" "100" "Width" "100" "Loading" "eager" "OptimConfig" $optim "Alt" "Home avatar" | partial "plugin/image.html" -}} + {{- else -}} - {{- dict "Src" $avatar "Height" "100" "Width" "100" | partial "plugin/image.html" -}} + {{- dict "Src" $avatar "Height" "100" "Width" "100" "Loading" "eager" "OptimConfig" $optim "Alt" "Home avatar" | partial "plugin/image.html" -}} {{- end -}}
{{- end -}} diff --git a/layouts/partials/meta/author.html b/layouts/partials/meta/author.html index 15952e79c..2ab19ee2a 100644 --- a/layouts/partials/meta/author.html +++ b/layouts/partials/meta/author.html @@ -1,3 +1,8 @@ +{{- $optim := slice + (dict "Process" "resize 16x16 Center webp q75" "descriptor" "16w") + (dict "Process" "resize 24x24 Center webp q75" "descriptor" "24w") + (dict "Process" "resize 32x32 Center webp q75" "descriptor" "32w") +-}} {{- if .Params.authors -}} {{- $lang := ( $.Params.lang | default $.Lang ) -}} @@ -10,9 +15,7 @@ "lang" $lang ) -}} {{- if gt $i 0 }}, {{ end -}} - {{ .name }} avatar - {{- .name -}} - + {{- dict "Width" "16" "Height" "16" "Src" .avatar "Alt" (printf "%v avatar" .name) "OptimConfig" $optim "Class" "tw-inline-block tw-max-h-4 tw-rounded-full tw-translate-y-[-2px] tw-mr-1" | partial "plugin/image.html" -}}{{- .name -}} {{- end -}} {{- else -}} {{- with partial "function/author.html" (dict @@ -35,7 +38,7 @@ {{- $avatar := .Params.authoravatar | default .Site.Author.avatar | default $gravatar | default false -}} {{- $options := dict "Class" "author" "Destination" $link "Title" "Author" "Rel" "author" "Content" $author -}} {{- if $avatar -}} - {{ $author }} avatar + {{- dict "Width" "16" "Height" "16" "Src" $avatar "Alt" (printf "%v avatar" $author) "OptimConfig" $optim "Class" "tw-inline-block tw-max-h-4 tw-rounded-full tw-translate-y-[-2px] tw-mr-1" | partial "plugin/image.html" -}} {{- else -}} {{- partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "user-circle") -}} {{- end -}} diff --git a/layouts/partials/plugin/image.html b/layouts/partials/plugin/image.html index 6660db841..a9ec96941 100644 --- a/layouts/partials/plugin/image.html +++ b/layouts/partials/plugin/image.html @@ -1,51 +1,70 @@ -{{- /* lightgallery.js */ -}} -{{- $default := dict "RelPermalink" .Src -}} -{{- $remote := .Remote | default false -}} -{{- $optimize := .Optim | default false -}} -{{- $small := $default -}} -{{- $large := $default -}} -{{- $height := "" -}} -{{- $width := "" -}} -{{- $optimized := false -}} - -{{- with dict "Path" .Src "Resources" .Resources "Remote" $remote | partial "function/getImage.html" -}} - {{- $output := dict "Optim" $optimize "Image" . | partial "function/imageHandler.html" -}} - {{- $small = $output.S -}} - {{- $default = $output.M -}} - {{- $large = $output.L -}} - {{- $optimized = $output.Optimized -}} - {{- $height = $default.Height -}} - {{- $width = $default.Width -}} -{{- end -}} +{{/* +The image plugin is a partial that handles image resources. + +Parameters: +- Src: The path to the image. + It can be a page resource (inside a page bundle) https://gohugo.io/methods/page/resources/ + or a global resource (inside the assets directory) https://gohugo.io/functions/resources/get/ + or a link to a remote resource, which can be cached if the site parameter is set https://gohugo.io/functions/resources/getremote/ +- Resources: If the image is a page resource, this parameter is required. It is the .Resources of the page. +- OptimConfig: optimisation parameter, defined like + {{- $optim := slice + (dict "Process" "resize 800x Center webp q75" "descriptor" "800w") + (dict "Process" "resize 1200x Center webp q75" "descriptor" "1200w") + (dict "Process" "resize 1600x Center webp q75" "descriptor" "1600w") + -}} + See https://gohugo.io/content-management/image-processing/ for more information. +- Alt: alt text for the image. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#alt +- Height: The intrinsic height of the image, in pixels. Must be an integer without a unit. + We try to generate this value automatically if possible. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#height +- Width: The intrinsic width of the image, in pixels. Must be an integer without a unit. + We try to generate this value automatically if possible. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#width +- Loading: Indicates how the browser should load the image: eager or lazy. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading +- Optimise: Override the site parameter to optimise the image. +- CacheRemote: Override the site parameter to cache remote images. +*/}} + +{{- $resource := (.Resources.Get .Src) | default (resources.Get .Src) | default nil -}} + +{{- $cacheRemote := .CacheRemote | default site.Params.image.cacheRemote | default false -}} +{{- $optimise := .Optimise | default site.Params.image.optimise | default false -}} -{{- $alt := .Alt | default .Title | default .Src -}} -{{- $loading := .Loading | default "lazy" -}} +{{- $isUrlRemote := urls.Parse .Src | partial "function/isUrlRemote.html" -}} -{{- with .Height -}} - {{- $height = . -}} +{{- if not $resource | and $isUrlRemote | and $cacheRemote -}} + {{- with $remoteResource := resources.GetRemote .Src -}} + {{- with .Err -}} + {{- warnf "%s" . -}} + {{ else }} + {{- if $remoteResource.ResourceType | eq "image" -}} + {{- $resource = $remoteResource -}} + {{- end -}} + {{- end -}} + {{- end -}} {{- end -}} -{{- with .Width -}} - {{- $width = . -}} +{{- $optim := .OptimConfig -}} +{{- $srcset := "" -}} +{{- if $optim | and $resource | and $optimise -}} + {{ $srcsetSlice := slice -}} + {{- range $optim -}} + {{- if .Process -}} + {{- $processed := $resource.Process .Process -}} + {{- $srcsetSlice = $srcsetSlice | append (printf "%s %s" $processed.RelPermalink .descriptor) -}} + {{- end -}} + {{- end -}} + {{- $srcset = delimit $srcsetSlice ", " -}} {{- end -}} +{{- $src := $resource.RelPermalink | default .Src -}} +{{- $alt := .Alt | default .Title -}} +{{- $height := .Height | default $resource.Height | default "" -}} +{{- $width := .Width | default $resource.Width | default "" -}} + {{- if .Linked -}} - + {{- end -}} - {{ $alt }} + {{- if .Linked -}} - + {{- end -}} diff --git a/layouts/partials/single/sponsor.html b/layouts/partials/single/sponsor.html index 69f65a935..f1e49c72a 100644 --- a/layouts/partials/single/sponsor.html +++ b/layouts/partials/single/sponsor.html @@ -19,12 +19,12 @@ "name" $name "author" (index $.Site.Data.authors $name) "lang" $lang) -}} - {{- dict "Src" .avatar | partial "plugin/image.html" -}} + {{- dict "Src" .avatar "Resources" $.Resources | partial "plugin/image.html" -}} {{- end -}} {{- end -}} {{- end -}} {{- else if $avatar -}} - {{- dict "Src" $avatar | partial "plugin/image.html" -}} + {{- dict "Src" $avatar "Resources" $.Resources | partial "plugin/image.html" -}} {{- end -}} {{- with $bio -}} diff --git a/layouts/posts/single.html b/layouts/posts/single.html index cc45c2813..7e7f707f0 100644 --- a/layouts/posts/single.html +++ b/layouts/posts/single.html @@ -151,7 +151,12 @@

{{ . }}

{{- $image := $params.featuredimage -}} {{- with $image -}}
- {{- dict "Src" . "Title" $.Description "Resources" $.Resources "Loading" "eager" "Optim" true | partial "plugin/image.html" -}} + {{- $optim := slice + (dict "Process" "resize 800x webp q75" "descriptor" "800w") + (dict "Process" "resize 1200x webp q75" "descriptor" "1200w") + (dict "Process" "resize 1600x webp q75" "descriptor" "1600w") + -}} + {{- dict "Src" . "Title" $.Description "Resources" $.Resources "Loading" "eager" "OptimConfig" $optim | partial "plugin/image.html" -}}
{{- end -}} {{- /* Series list */ -}} diff --git a/layouts/shortcodes/image.html b/layouts/shortcodes/image.html index 8e23075c7..9442ceb8a 100644 --- a/layouts/shortcodes/image.html +++ b/layouts/shortcodes/image.html @@ -2,17 +2,22 @@ {{- $options = cond .IsNamedParams (.Get "alt") (.Get 1) | .Page.RenderString | dict "Alt" | merge $options -}} {{- $caption := cond .IsNamedParams (.Get "caption") (.Get 2) | .Page.RenderString -}} {{- $options = dict "Caption" $caption | merge $options -}} +{{- $optim := slice + (dict "Process" "resize 800x webp q75" "descriptor" "800w") + (dict "Process" "resize 1200x webp q75" "descriptor" "1200w") + (dict "Process" "resize 1600x webp q75" "descriptor" "1600w") +-}} +{{- $options = dict "OptimConfig" $optim | merge $options -}} + {{- if .IsNamedParams -}} {{- $options = dict "Title" (.Get "title") | merge $options -}} - {{- $options = dict "SrcSmall" (.Get "src_s") | merge $options -}} - {{- $options = dict "SrcLarge" (.Get "src_l") | merge $options -}} {{- $options = dict "Height" (.Get "height") | merge $options -}} {{- $options = dict "Width" (.Get "width") | merge $options -}} {{- $options = .Get "linked" | ne false | dict "Linked" | merge $options -}} {{- $options = dict "Rel" (.Get "rel") | merge $options -}} - {{- $options = dict "Optim" true | merge $options -}} - {{- $options = dict "Remote" true | merge $options -}} + {{- with (.Get "optimise") -}}{{- $options = dict "Optimise" . | merge $options -}}{{- end -}} + {{- with (.Get "cacheRemote") -}}{{- $options = dict "CacheRemote" . | merge $options -}}{{- end -}} {{- else -}} {{- $options = cond $caption true false | dict "Linked" | merge $options -}} {{- end -}}