♻️ Refactor: image rendering

CHANGELOG.md

@@ -17,7 +17,8 @@ All notable changes to this project will be documented in this file.
 - :sparkles: Feat: update echarts theme config
 - :zap: Perf: remove extra spaces in plugin link
 - :wheelchair: Feat(accessibility): use `aria-hidden=true` on icons that AT should ignore
-- :bug: Fix: add function doc2unix to unify new lines symbol between Windows and Unix/Mac OS
+- :recycle: Refactor: image rendering
+- :bug: Fix: add function `dos2unix` to unify new lines symbol between Windows and Unix/Mac OS
 - :bug: Fix: author display error in post and markdown file
 - :bug: Fix: use data attributes or class replace for custom attributes
 - :bug: Fix: attribute `media` not allowed on element meta in `[name=theme-color]`

layouts/_default/_markup/render-image.html

@@ -1,10 +1,10 @@
 {{- if .Title -}}
   <figure>
-    {{- dict "Src" .Destination "Title" .Text "Caption" .Title "Linked" true "Resources" .Page.Resources | partial "plugin/image.html" -}}
+    {{- dict "Src" .Destination "Alt" .Text "Caption" .Text "Title" .Title "Linked" true "Resources" .Page.Resources | partial "plugin/image.html" -}}
     <figcaption class="image-caption">
-      {{- .Title | safeHTML -}}
+      {{- .Text | safeHTML -}}
     </figcaption>
   </figure>
 {{- else -}}
-  {{- dict "Src" .Destination "Title" .Text "Resources" .Page.Resources | partial "plugin/image.html" -}}
+  {{- dict "Src" .Destination "Alt" .Text "Resources" .Page.Resources | partial "plugin/image.html" -}}
 {{- end -}}

layouts/partials/plugin/image.html

@@ -19,16 +19,21 @@
 {{- end -}}
 
 {{- $alt := .Alt | default $src -}}
+{{- $caption := .Caption | default $alt -}}
 {{- $loading := resources.Get "svg/loading.svg" | minify -}}
 {{- if .Linked -}}
-  <a class="lightgallery" href="{{ $large | safeURL }}" title="{{ .Title | default $alt }}" data-thumbnail="{{ $small | safeURL }}"{{ with .Caption }} data-sub-html="<h2>{{ . }}</h2>{{ with $.Title }}<p>{{ . }}</p>{{ end }}"{{ end }}{{ with .Rel }} rel="{{ . }}"{{ end }}>
+  <a class="lightgallery" href="{{ $large | safeURL }}" data-thumbnail="{{ $small | safeURL }}"{{ with $caption }} data-sub-html="<h2>{{ . }}</h2>{{ with $.Title }}<p>{{ . }}</p>{{ end }}"{{ end }}{{ with .Rel }} rel="{{ . }}"{{ end }}>
     <img
       class="lazyload{{ with .Class }} {{ . }}{{ end }}"
       src="{{ $loading.RelPermalink }}"
       data-src="{{ $src | safeURL }}"
       data-srcset="{{ $small | safeURL }}, {{ $src | safeURL }} 1.5x, {{ $large | safeURL }} 2x"
       data-sizes="auto"
-      alt="{{ $alt }}"{{ with .Height }} height="{{ . }}"{{ end }}{{ with .Width }} width="{{ . }}"{{ end }} />
+      alt="{{ $alt }}"
+      title="{{ .Title | default $alt }}"
+      {{- with .Height }} height="{{ . }}"{{- end -}}
+      {{- with .Width }} width="{{ . }}"{{- end -}}
+    />
   </a>
 {{- else -}}
   <img
@@ -39,6 +44,7 @@
     data-sizes="auto"
     alt="{{ $alt }}"
     title="{{ .Title | default $alt }}"
-    {{- with $width }} width="{{ . }}"{{ end }}
-    {{- with $height }} height="{{ . }}"{{ end }} />
+    {{- with $width }} width="{{ . }}"{{- end -}}
+    {{- with $height }} height="{{ . }}"{{- end -}}
+  />
 {{- end -}}