Browse Source

feat(snippets): abstract figure shortcode for use in layout

creates a custom snipppet allowing figure markup reuse
Josh Habdas 9 months ago
parent
commit
8ca09f4854
Signed by: Josh Habdas <jhabdas@protonmail.com> GPG Key ID: B148B31154C75A74

+ 10
- 4
docs/content/shortcode/figure.md View File

@@ -19,8 +19,8 @@ With progressive image placeholder:
19 19
 
20 20
 ```html
21 21
 {{</* figure
22
-  src="/images/watercolor_pTIyYTqAlF8_w1440h700.jpeg"
23 22
   alt="Artistic map"
23
+  src="/images/watercolor_pTIyYTqAlF8_w1440h700.jpeg"
24 24
   lqipsrc="/images/watercolor_pTIyYTqAlF8_w936h455.jpeg"
25 25
   title="Map of Bali in Watercolor"
26 26
   attr="Stamen Design"
@@ -29,12 +29,18 @@ With progressive image placeholder:
29 29
 ```
30 30
 
31 31
 {{< figure
32
-  src="/images/watercolor_pTIyYTqAlF8_w1440h700.jpeg"
33 32
   alt="Artistic map"
34
-  lqipsrc="/images/watercolor_pTIyYTqAlF8_w936h455.jpeg"
33
+  src="/images/watercolor_pTIyYTqAlF8_w936h455.jpeg"
34
+  lqipsrc="/images/watercolor_pTIyYTqAlF8_w1440h700.jpeg"
35 35
   title="Map of Bali in Watercolor"
36 36
   attr="Stamen Design"
37 37
   attrlink="https://maps.stamen.com/"
38 38
 >}}
39 39
 
40
-See {{< external href="https://gohugo.io/content-management/shortcodes/#figure" text="Figures in Hugo" />}} for additional usage.
40
+Above as a [Snippet](/feature/snippets/) used in a [Custom Layout](/feature/custom-layouts/):
41
+
42
+```go-html-template
43
+{{ partial "components/figure.html" (dict "alt" "Artistic map" "src" "/images/watercolor_pTIyYTqAlF8_w936h455.jpeg" "lqipsrc" "/images/watercolor_pTIyYTqAlF8_w1440h700.jpeg" "title" "Map of Bali in Watercolor" "attr" "Stamen Design" "attrlink" "https://maps.stamen.com/") }}
44
+```
45
+
46
+See {{< external href="https://gohugo.io/content-management/shortcodes/#figure" text="Figures in Hugo" />}} for Hugo-specific implementation.

+ 53
- 0
layouts/partials/components/figure.html View File

@@ -0,0 +1,53 @@
1
+{{/*
2
+Copyright (C) 2019  Josh Habdas <jhabdas@protonmail.com>
3
+
4
+This file is part of After Dark.
5
+
6
+After Dark is free software: you can redistribute it and/or modify
7
+it under the terms of the GNU Affero General Public License as published by
8
+the Free Software Foundation, either version 3 of the License, or
9
+(at your option) any later version.
10
+
11
+After Dark is distributed in the hope that it will be useful,
12
+but WITHOUT ANY WARRANTY; without even the implied warranty of
13
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
14
+GNU Affero General Public License for more details.
15
+
16
+You should have received a copy of the GNU Affero General Public License
17
+along with this program.  If not, see <https://www.gnu.org/licenses/>.
18
+*/ -}}
19
+
20
+<figure{{ with .class }} class="{{ . }}"{{ end }}>
21
+  {{ if .link }}
22
+    <a href="{{ .link }}"{{ if .linktarget }} target="{{ .linktarget }}"{{ end }}{{ if eq .linktarget "_blank" }} rel="external noopener noreferrer"{{ end }}>
23
+      {{- if .lqipsrc -}}
24
+        <img class="lazyload blur-up" src="{{ .lqipsrc }}" data-src="{{ .src }}" {{ if or .alt .caption }}alt="{{ with .alt }}{{ . }}{{ else }}{{ .caption }}{{ end }}"{{ end }}>
25
+      {{- else -}}
26
+        <img class="lazyload" data-src="{{ .src }}" {{ if or .alt .caption }}alt="{{ if .alt }}{{ .alt }}{{ else }}{{ .caption }}{{ end }}"{{ end }}>
27
+      {{- end -}}
28
+    </a>
29
+  {{ else }}
30
+    {{- if .lqipsrc -}}
31
+      <img class="lazyload blur-up" src="{{ .lqipsrc }}" data-src="{{ .src }}" {{ if or .alt .caption }}alt="{{ with .alt }}{{ . }}{{ else }}{{ .caption }}{{ end }}"{{ end }}>
32
+    {{- else -}}
33
+      <img class="lazyload" data-src="{{ .src }}" {{ if or .alt .caption }}alt="{{ if .alt }}{{ .alt }}{{ else }}{{ .caption }}{{ end }}"{{ end }}>
34
+    {{- end -}}
35
+  {{ end }}
36
+  {{ if or (or .title .caption) .attr }}
37
+    <figcaption>
38
+      {{ with .title }}
39
+        <header><b>{{ . }}</b></header>
40
+      {{ end }}
41
+      {{ if or .caption .attr }}
42
+        <small>
43
+          {{ .caption }}
44
+          {{ if .attrlink }}
45
+            <a href="{{ .attrlink }}">
46
+              {{ .attr }}
47
+            </a>
48
+          {{ end }}
49
+        </small>
50
+      {{ end }}
51
+    </figcaption>
52
+  {{ end }}
53
+</figure>

+ 1
- 20
layouts/shortcodes/figure.html View File

@@ -27,23 +27,4 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
27 27
 {{ $alt := .Get "alt" }}
28 28
 {{ $title := .Get "title" }}
29 29
 {{ $class := .Get "class" }}
30
-<figure{{ with $class }} class="{{ . }}"{{ end }}>
31
-  {{ with $link }}<a href="{{ . }}"{{ if $linktarget }} target="{{ $linktarget }}"{{ end }}{{ if eq $linktarget "_blank" }} rel="external noopener noreferrer"{{ end }}>{{ end }}
32
-    {{ if $lqipsrc }}
33
-      <img class="lazyload blur-up" src="{{ $lqipsrc }}" data-src="{{ $src }}" {{ if or $alt $caption }}alt="{{ with $alt }}{{ . }}{{ else }}{{ $caption }}{{ end }}"{{ end }} />
34
-    {{ else }}
35
-      <img class="lazyload" data-src="{{ $src }}" {{ if or $alt $caption }}alt="{{ with $alt }}{{ . }}{{ else }}{{ $caption }}{{ end }}"{{ end }} />
36
-    {{ end }}
37
-  {{ if $link }}</a>{{ end }}
38
-  {{ if or (or $title $caption) $attr }}
39
-  <figcaption>{{ if isset .Params "title" }}
40
-    <header><b>{{ $title }}</b></header>{{ end }}
41
-    {{ if or $caption $attr }}
42
-    <small>{{ $caption }}
43
-    {{ with $attrlink }}<a href="{{ . }}"> {{ end }}
44
-      {{ $attr }}
45
-    {{ if $attrlink }}</a> {{ end }}
46
-    </small>{{ end }}
47
-  </figcaption>
48
-  {{ end }}
49
-</figure>
30
+{{ partial "components/figure.html" (dict "src" $src "lqipsrc" $lqipsrc "caption" $caption "link" $link "linktarget" $linktarget "attr" $attr "attrlink" $attrlink "alt" $alt "title" $title "class" $class) }}

Loading…
Cancel
Save