Featured image of post 图片优化:Webp、水印、清除exif及原图不打包

图片优化:Webp、水印、清除exif及原图不打包

Webp转换及水印

完全按照这个操作,写的非常清晰。有一点改动的是,我有图片Exif不是空,但里面的Orientation是nil,另外将水印调整到了右下角。

不打包进publish文件夹

我按这个配置一直不生效。最后发现是stack模板加载图片helper/image会引用RelPermalink,导到打进了publish目录。

测试一下

修改点

hugo.toml

1
2
3
4
5
6
7
# https://discourse.gohugo.io/t/set-page-build-options-publishresources-in-the-site-or-theme-configuration/55942/5  
# https://gohugo.io/content-management/build-options/  
[[cascade]]  
    [cascade.target]  
        path = "/**"  
    [cascade.build]  
        publishResources = false

render-image.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
{{/*  {{- $image := partial "helper/image" (dict "Resources" .Page.Resources "Image" .Destination) -}}  */}}
{{- $alt := .PlainText | safeHTML -}}

{{/* helper/image中的访问图片的代码copy过,防止访问RelPermalink,原图又会打包进去 */}}
{{ $url := urls.Parse .Destination }}
{{ $resource := "" }}
{{ if not (in (slice "https" "http") $url.Scheme) }}
    {{ $resource = .Page.Resources.Get (printf "%s" (.Destination | safeURL)) }}
{{ else }}
    {{ with try (resources.GetRemote $url) }}
        {{ with .Err }}
            {{ errorf "%s" . }}
        {{ else with .Value }}
            {{ $resource = . }}
        {{ else }}
            {{ errorf "Unable to get remote resource %q" $url }}
        {{ end }}
    {{ end }}   
{{ end }}

{{/* 获取当前页面匹配.Destination的资源图像 */}}
{{ $hugoImage := $resource }}
{{/* 从资源中获取logo图像,透明背景图片效果最好 */}}
{{/* 该图像需要放置在根目录的assets/images目录下 */}}
{{ $logo := (resources.Get "img/watermark.png") }}
{{/* 检查图像的媒体类型是否不是gif或svg */}}
{{ if not (in (slice "gif" "svg") $hugoImage.MediaType.SubType) }}
    {{/* 保留原始图像的引用 */}}
    {{ $rawImage := $hugoImage }}
    {{/* 计算图像高度的80%,并确保最小值为250 */}}
    {{ $size := math.Round (mul $hugoImage.Height 0.80) }}
    {{ $size := cond (ge $size 250) $size 250.0 }}
    {{/* 调整logo的透明度为50% */}}
    {{ $logo := $logo.Filter (images.Opacity 0.5)  }}
    {{/* 调整logo的大小,高度为计算出的$size,保持纵横比,圆角半径为30 */}}
    {{/* $logo := $logo.Resize (printf "%.0fx png r30" $size) */}}
    {{/* 如果原始图像有EXIF信息 */}}
    {{ with $rawImage.Exif }}
        {{/* 根据图像的方向调整图像的大小和旋转 */}}
        {{ if or (eq .Tags.Orientation 1) (eq .Tags.Orientation nil) }}
            {{ $hugoImage = $hugoImage.Resize (print $hugoImage.Width "x" $hugoImage.Height " webp") }}
        {{ else if eq .Tags.Orientation 3 }}
            {{ $hugoImage = $hugoImage.Resize (print $hugoImage.Width "x" $hugoImage.Height " webp r180") }}
        {{ else if eq .Tags.Orientation 6 }}
            {{ $hugoImage = $hugoImage.Resize (print $hugoImage.Height "x" $hugoImage.Width " webp r270") }}
        {{ else if eq .Tags.Orientation 8 }}
            {{ $hugoImage = $hugoImage.Resize (print $hugoImage.Height "x" $hugoImage.Width " webp r90") }}
        {{ end }}
    {{ else }}
        {{/* 如果没有EXIF信息,则只调整大小,不旋转 */}}
        {{ $hugoImage = $hugoImage.Resize (print $hugoImage.Width "x" $hugoImage.Height " webp") }}
    {{ end }}
    {{/* 在图像上添加logo水印,位置在图像的右下,fm可以通过unwatermarked关闭水印 */}}
    {{ if and (ge $hugoImage.Width 500) (ne .Page.Params.unwatermarked true) }}
        {{ $hugoImage = $hugoImage.Filter (images.Overlay $logo (sub $hugoImage.Width $logo.Width) (sub $hugoImage.Height $logo.Height)) }}
    {{ end }}
{{ end }}

{{ $image := $hugoImage }}
{{/* SVG and external images won't work with gallery layout, because their width and height attributes are unknown */}}
{{- $galleryImage := and $image.Height $image.Width -}}

<img src="{{ $image.RelPermalink }}"
	{{ with $image.Width }}width="{{ . }}"{{ end }}
	{{ with $image.Height }}height="{{ . }}"{{ end }}
	loading="lazy"
	{{ with $alt }}
		alt="{{ . }}"
	{{ end }}
	{{ if $galleryImage }}
		class="gallery-image" 
		data-flex-grow="{{ div (mul $image.Width 100) $image.Height }}"
		data-flex-basis="{{ div (mul $image.Width 240) $image.Height }}px"
	{{ end }}
>

清理exif

转换过程中会hugo会删除掉exif,不过为了隐私,最好还是自已先删掉

exiftool -r -all= ./

主题 StackJimmy 设计