浏览代码

Add image lazy loading

Track3 3 年之前
父节点
当前提交
5d9e6818e2
共有 2 个文件被更改,包括 32 次插入0 次删除
  1. 3 0
      layouts/_default/_markup/render-image.html
  2. 29 0
      layouts/shortcodes/figure_lazy.html

+ 3 - 0
layouts/_default/_markup/render-image.html

@@ -0,0 +1,3 @@
+<p>
+	<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" loading="lazy"/>
+</p>

+ 29 - 0
layouts/shortcodes/figure_lazy.html

@@ -0,0 +1,29 @@
+
+<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
+	{{- if .Get "link" -}}
+			<a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
+	{{- end -}}
+	<img src="{{ .Get "src" }}" loading="lazy"
+			 {{- if or (.Get "alt") (.Get "caption") }}
+			 alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
+			 {{- end -}}
+			 {{- with .Get "width" }} width="{{ . }}"{{ end -}}
+			 {{- with .Get "height" }} height="{{ . }}"{{ end -}}
+	/><!-- Closing img tag -->
+	{{- if .Get "link" }}</a>{{ end -}}
+	{{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
+			<figcaption>
+					{{ with (.Get "title") -}}
+							<h4>{{ . }}</h4>
+					{{- end -}}
+					{{- if or (.Get "caption") (.Get "attr") -}}<p>
+							{{- .Get "caption" | markdownify -}}
+							{{- with .Get "attrlink" }}
+									<a href="{{ . }}">
+							{{- end -}}
+							{{- .Get "attr" | markdownify -}}
+							{{- if .Get "attrlink" }}</a>{{ end }}</p>
+					{{- end }}
+			</figcaption>
+	{{- end }}
+</figure>