feat(shortcode): refactor and improve image shortcode (#187)

2020-03-19 12:35:37 +08:00
parent 84d48f37dc
commit 774e831a21
17 changed files with 651 additions and 280 deletions
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -1,10 +1,10 @@
 {{- with .Title -}}
    <figure>
-        {{- partial "plugin/image.html" (dict "src" $.Destination "title" $.Title "description" $.Text "lightgallery" true "scratch" ($.Page.Scratch.Get "scratch")) -}}
+        {{- partial "plugin/image.html" (dict "src" $.Destination "alt" $.Text "caption" . "linked" true) -}}
        <figcaption class="image-caption">
            {{- . | safeHTML -}}
        </figcaption>
    </figure>
 {{- else -}}
-    {{- partial "plugin/image.html" (dict "src_s" .Destination "title" .Title "description" .Text "lightgallery" false "scratch" (.Page.Scratch.Get "scratch")) -}}
+    {{- partial "plugin/image.html" (dict "src" .Destination "alt" .Text) -}}
 {{- end -}}
--- a/layouts/_default/summary.html
+++ b/layouts/_default/summary.html
@@ -5,7 +5,7 @@
    {{- with .Params.featuredImage -}}
        <div class="featured-image-preview">
            {{- $image := $.Params.featuredImagePreview | default . -}}
-            {{- partial "plugin/image.html" (dict "src" $image "description" $.Description "scratch" $scratch) -}}
+            {{- partial "plugin/image.html" (dict "src" $image "alt" $.Description "large" true) -}}
        </div>
    {{- end -}}

--- a/layouts/partials/home/profile.html
+++ b/layouts/partials/home/profile.html
@@ -7,8 +7,8 @@
    {{- end -}}
    {{- with $avatar -}}
        <div class="home-avatar">
-            <a href="/posts">
-                {{- partial "plugin/image.html" (dict "src_s" . "title" "avatar" "description" (T "home") "scratch" $scratch) -}}
+            <a href="/posts" title="{{ T `home` }}">
+                {{- partial "plugin/image.html" (dict "src" . "alt" (T "home")) -}}
            </a>
        </div>
    {{- end -}}
--- a/layouts/partials/plugin/image.html
+++ b/layouts/partials/plugin/image.html
@@ -1,30 +1,28 @@
 {{- /* lazysizes and lightgallery.js */ -}}
+{{- $loading := resources.Get "svg/loading.svg" | minify -}}
 {{- $small := .src_s | default .src -}}
 {{- $large := .src_l | default .src -}}
-{{- $loading := resources.Get "svg/loading.svg" | minify -}}
-{{- if not .src | and .src_s -}}
-    {{- $loading = resources.Get "svg/loading.small.svg" | minify -}}
-{{- end -}}
-{{- if .lightgallery -}}
-    <a class="lightgallery" href="{{ $large | safeURL }}" title="{{ .description }}" data-thumbnail="{{ $small | safeURL }}"{{ if .title }} data-sub-html="<h2>{{ .title }}</h2><p>{{ .description }}</p>"{{ end }}>
+{{- $alt := .alt | default .src -}}
+{{- if .linked -}}
+    <a class="lightgallery" href="{{ $large | safeURL }}" title="{{ .title | default $alt }}" data-thumbnail="{{ $small | safeURL }}"{{ with .caption }} data-sub-html="<h2>{{ . }}</h2>{{ with $.alt }}<p>{{ . }}</p>{{ end }}"{{ end }}{{ with .rel }} rel="{{ . }}"{{ end }}>
        <img
            class="lazyload"
            src="{{ $loading.RelPermalink | safeURL }}"
            data-sizes="auto"
            data-srcset="{{ $small | safeURL }}, {{ .src | safeURL }} 1.5x, {{ $large | safeURL }} 2x"
            data-src="{{ .src | safeURL }}"
-            alt="{{ .title | default .description }}" />
+            alt="{{ $alt }}"{{ with .height }} height="{{ . }}"{{ end }}{{ with .width }} width="{{ . }}"{{ end }} />
    </a>
-    {{- with .scratch -}}
-        {{- .Set "lightgallery" true -}}
-    {{- end -}}
 {{- else -}}
+    {{- if not .large -}}
+        {{- $loading = resources.Get "svg/loading.small.svg" | minify -}}
+    {{- end -}}
    <img
        class="lazyload"
        src="{{ $loading.RelPermalink | safeURL }}"
        data-sizes="auto"
        data-srcset="{{ $small | safeURL }}, {{ .src | safeURL }} 1.5x, {{ $large | safeURL }} 2x"
        data-src="{{ .src | safeURL }}"
-        alt="{{ .title | default .description }}"
-        title="{{ .description }}" />
+        alt="{{ $alt }}"
+        title="{{ .title | default $alt }}"{{ with .height }} height="{{ . }}"{{ end }}{{ with .width }} width="{{ . }}"{{ end }} />
 {{- end -}}
--- a/layouts/posts/single.html
+++ b/layouts/posts/single.html
@@ -48,7 +48,7 @@
        {{- /* Featured image */ -}}
        {{- with .Params.featuredImage -}}
            <div class="featured-image">
-                {{- partial "plugin/image.html" (dict "src" . "description" $.Description "scratch" $scratch) -}}
+                {{- partial "plugin/image.html" (dict "src" . "alt" $.Description "large" true) -}}
            </div>
        {{- end -}}

--- a/layouts/shortcodes/image.html
+++ b/layouts/shortcodes/image.html
@@ -1,18 +1,28 @@
-<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
-    {{- $options := .Get "src" | dict "src" -}}
-    {{- $options = .Get "src_s" | dict "src_s" | merge $options -}}
-    {{- $options = .Get "src_l" | dict "src_l" | merge $options -}}
-    {{- $title := .Get "title" | $.Page.RenderString  -}}
-    {{- $options = $title | dict "title" | merge $options -}}
-    {{- $description := .Get "description" | $.Page.RenderString  -}}
-    {{- $options = $description | dict "description" | merge $options -}}
-    {{- $lightgallery := ne .Page.Site.Params.page.lightgallery false | and (ne .Page.Params.lightgallery false) -}}
-    {{- $options = $lightgallery | dict "lightgallery" | merge $options -}}
-    {{- $options = .Page.Scratch.Get "scratch" | dict "scratch" | merge $options -}}
-    {{- partial "plugin/image.html" $options -}}
-    {{- with $title | default $description -}}
+{{- $options := cond .IsNamedParams (.Get "src") (.Get 0) | dict "src" -}}
+{{- $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 -}}
+
+{{- if .IsNamedParams -}}
+    {{- $options = dict "title" (.Get "title") | merge $options -}}
+    {{- $options = dict "src_s" (.Get "src_s") | merge $options -}}
+    {{- $options = dict "src_l" (.Get "src_l") | merge $options -}}
+    {{- $options = dict "height" (.Get "height") | merge $options -}}
+    {{- $options = dict "width" (.Get "width") | merge $options -}}
+    {{- $options = dict "large" (.Get "large") | merge $options -}}
+    {{- $options = .Get "linked" | ne false | dict "linked" | merge $options -}}
+    {{- $options = dict "rel" (.Get "rel") | merge $options -}}
+{{- else -}}
+    {{- $options = cond $caption true false | dict "linked" | merge $options -}}
+{{- end -}}
+
+{{- with $caption -}}
+    <figure{{ with cond $.IsNamedParams ($.Get "class") "" }} class="{{ . }}"{{ end }}>
+        {{- partial "plugin/image.html" $options -}}
        <figcaption class="image-caption">
            {{- . | safeHTML -}}
        </figcaption>
-    {{- end -}}
-</figure>
+    </figure>
+{{- else -}}
+    {{- partial "plugin/image.html" $options -}}
+{{- end -}}
--- a/layouts/shortcodes/link.html
+++ b/layouts/shortcodes/link.html
@@ -1,12 +1,10 @@
-{{- $options := dict -}}
+{{- $options := cond .IsNamedParams (.Get "href") (.Get 0) | dict "href" -}}
 {{- if .IsNamedParams -}}
-    {{- $options = dict "href" (.Get "href") | merge $options -}}
-    {{- $options = dict "title" (.Get "title") | merge $options -}}
-    {{- $options = dict "rel" (.Get "rel") | merge $options -}}
-    {{- $options = dict "class" (.Get "class") | merge $options -}}
    {{- $options = dict "content" (.Get "content") | merge $options -}}
+    {{- $options = dict "title" (.Get "title") | merge $options -}}
+    {{- $options = dict "class" (.Get "class") | merge $options -}}
+    {{- $options = dict "rel" (.Get "rel") | merge $options -}}
 {{- else -}}
-    {{- $options = dict "href" (.Get 0) | merge $options -}}
    {{- $options = dict "content" (.Get 1 | default (.Get 0)) | merge $options -}}
    {{- $options = dict "title" (.Get 2) | merge $options -}}
 {{- end -}}