Skip to content

Commit 59ab2c2

Browse files
neural-loopneural-loop
committed
Refactor(fig): Improve alt text handling in fig shortcode
1 parent 0cd9995 commit 59ab2c2

File tree

1 file changed

+156
-180
lines changed

1 file changed

+156
-180
lines changed

‎layouts/shortcodes/fig.html

Lines changed: 156 additions & 180 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<!-- layouts/shortcodes/fig.html -->
12
<!-- get value from params -->
23
{{ $imagePath:= .Get "src" }}
34
{{ $caption:= .Get "caption" }}
@@ -10,200 +11,175 @@
1011
{{ $command:= .Get "command" | humanize }}
1112
{{ $option:= .Get "option" }}
1213
{{ $webp:= .Get "webp" | default true }}
13-
{{ $zoomable:= .Get "zoomable" | default "false" }}
14+
15+
{{/* --- NEW LOGIC: Determine the final alt text --- */}}
16+
{{ $finalAlt := "" }}
17+
{{ if $alt }}
18+
{{ $finalAlt = $alt }}
19+
{{ else if $caption }}
20+
{{ $finalAlt = $caption | plainify }}
21+
{{ end }}
1422

1523

1624
<!-- image position -->
1725
{{ if eq $position `center` }}
18-
{{ .Scratch.Set "position" "img-center" }}
26+
{{ .Scratch.Set "position" "img-center" }}
1927
{{ else if eq $position `left` }}
20-
{{ .Scratch.Set "position" "img-left" }}
28+
{{ .Scratch.Set "position" "img-left" }}
2129
{{ else if eq $position `right` }}
22-
{{ .Scratch.Set "position" "img-right" }}
30+
{{ .Scratch.Set "position" "img-right" }}
2331
{{ else if eq $position `float-left` }}
24-
{{ .Scratch.Set "position" "img-float-left" }}
32+
{{ .Scratch.Set "position" "img-float-left" }}
2533
{{ else if eq $position `float-right` }}
26-
{{ .Scratch.Set "position" "img-float-right" }}
34+
{{ .Scratch.Set "position" "img-float-right" }}
2735
{{ end }}
2836

2937

3038
<!-- check cdn image -->
3139
{{ if or (hasPrefix $imagePath "http") (fileExists (add `static/` $imagePath)) }}
32-
<!-- cdn image figure -->
33-
{{ if $caption }}
34-
<figure
35-
class="{{ .Scratch.Get `position` }}"
36-
role="group"
37-
aria-describedby="caption-{{ $caption | markdownify }}">
38-
<img
39-
title="{{ $title }}"
40-
loading="lazy"
41-
decoding="async"
42-
src="{{ $imagePath | absURL }}"
43-
alt="{{ $alt }}"
44-
class="img {{ $class }} {{ if eq $zoomable `true` }}
45-
glightbox
46-
{{ end }}"
47-
width="{{ $width }}"
48-
height="{{ $height }}" />
49-
<figcaption id="caption-{{ $caption | markdownify }}">
50-
{{ $caption | markdownify }}
51-
</figcaption>
52-
</figure>
53-
{{ else }}
54-
<!-- cdn image tag -->
55-
<img
56-
title="{{ $title }}"
57-
loading="lazy"
58-
decoding="async"
59-
src="{{ $imagePath | absURL }}"
60-
alt="{{ $alt }}"
61-
class="img {{ $class }} {{ .Scratch.Get `position` }} {{ if eq $zoomable `true` }}
62-
glightbox
63-
{{ end }}"
64-
width="{{ $width }}"
65-
height="{{ $height }}" />
66-
{{ end }}
67-
<!-- /cdn image -->
40+
<!-- cdn image figure -->
41+
{{ if $caption }}
42+
<figure
43+
class="{{ .Scratch.Get `position` }}"
44+
role="group"
45+
aria-describedby="caption-{{ $caption | markdownify }}">
46+
<img
47+
title="{{ $title }}"
48+
loading="lazy"
49+
decoding="async"
50+
src="{{ $imagePath | absURL }}"
51+
alt="{{ $finalAlt }}"
52+
class="img {{ $class }}"
53+
width="{{ $width }}"
54+
height="{{ $height }}" />
55+
<figcaption id="caption-{{ $caption | markdownify }}">
56+
{{ $caption | markdownify }}
57+
</figcaption>
58+
</figure>
6859
{{ else }}
69-
<!-- content and assets image path variable -->
70-
{{ $contentImage:= .Page.Resources.GetMatch (printf "*%s*" $imagePath) }}
71-
{{ $assetImage:= fileExists (add `assets/` $imagePath) }}
72-
73-
74-
<!-- check image existence -->
75-
{{ if or $contentImage $assetImage }}
76-
<!-- content or assets folder detection -->
77-
{{ if $contentImage }}
78-
{{ .Scratch.Set "image-exists" $contentImage }}
79-
{{ else if $assetImage }}
80-
{{ .Scratch.Set "image-exists" (resources.Get $imagePath) }}
81-
{{ end }}
82-
83-
{{ $image:= .Scratch.Get "image-exists" }}
84-
85-
86-
<!-- image extension -->
87-
{{ $imageExt := path.Ext $image }}
88-
89-
90-
<!-- image height, width -->
91-
{{ .Scratch.Set "image-height" "" }}
92-
{{ .Scratch.Set "image-width" "" }}
93-
{{ if not (or $height $width) }}
94-
{{ .Scratch.Set "image-height" $image.Height }}
95-
{{ .Scratch.Set "image-width" $image.Width }}
96-
{{ end }}
97-
{{ $imageHeight:= .Scratch.Get "image-height" }}
98-
{{ $imageWidth:= .Scratch.Get "image-width" }}
99-
{{ .Scratch.Set `caption-name` (replaceRE `[^-a-zA-Z0-9]` `` (replace $caption ` ` `-`)) }}
100-
101-
102-
<!-- checking gif/svg image -->
103-
{{ if or (eq $imageExt `.gif`) (eq $imageExt `.svg`) }}
104-
{{ .Scratch.Set `image` $image.RelPermalink }}
105-
{{ .Scratch.Set `image-height` $height }}
106-
{{ .Scratch.Set `image-width` $width }}
107-
{{ else }}
108-
<!-- image processing -->
109-
{{ $options:= add (add (add (add (string ($width | default $imageWidth)) "x") (string ($height | default $imageHeight))) " webp ") (string $option) }}
110-
111-
{{ if eq $webp "false" }}
112-
<!-- if webp false -->
113-
{{ $options = add (add (add (add (string ($width | default $imageWidth)) "x") (string ($height | default $imageHeight))) " ") (string $option) }}
114-
{{ end }}
115-
116-
117-
<!-- end -->
118-
119-
<!-- image Fit -->
120-
{{ if eq $command `Fit` }}
121-
{{ .Scratch.Set `newimage` ($image.Fit $options) }}
122-
{{ .Scratch.Set `fallback` ($image.Fit (replace $options `webp` ``)).RelPermalink }}
123-
<!-- image Fill -->
124-
{{ else if eq $command `Fill` }}
125-
{{ .Scratch.Set `newimage` ($image.Fill $options) }}
126-
{{ .Scratch.Set `fallback` ($image.Fill (replace $options `webp` ``)).RelPermalink }}
127-
<!-- image Resize -->
128-
{{ else }}
129-
{{ .Scratch.Set `newimage` ($image.Resize $options) }}
130-
<!-- {{ .Scratch.Set `image` ($image.Resize $options).RelPermalink }} -->
131-
{{ .Scratch.Set `fallback` ($image.Resize (replace $options `webp` ``)).RelPermalink }}
132-
{{ end }}
133-
{{ .Scratch.Set `image` (.Scratch.Get `newimage`).RelPermalink }}
134-
{{ .Scratch.Set `image-height` (.Scratch.Get `newimage`).Height }}
135-
{{ .Scratch.Set `image-width` (.Scratch.Get `newimage`).Width }}
136-
137-
{{ end }}
138-
<!-- /checking gif/svg image -->
139-
140-
<!-- image figure -->
141-
{{ if $caption }}
142-
<figure
143-
class="{{ .Scratch.Get `position` }}"
144-
role="group"
145-
aria-describedby="caption-{{ $caption | markdownify }}">
146-
{{ if eq $zoomable `true` }}
147-
<a
148-
href="{{ $image.RelPermalink }}"
149-
class="glightbox" data-glightbox="description: .caption-{{ .Scratch.Get `caption-name` }}">
150-
{{ end }}
151-
<img
152-
title="{{ $title }}"
153-
loading="lazy"
154-
decoding="async"
155-
class="img {{ $class }}"
156-
width="{{ .Scratch.Get `image-width` }}"
157-
height="{{ .Scratch.Get `image-height` }}"
158-
src="{{ .Scratch.Get `image` }}"
159-
alt="{{ $alt }}"
160-
onerror="this.onerror='null';this.src='{{ .Scratch.Get `fallback` }}'" />
161-
{{ if eq $zoomable `true` }}
162-
</a>
163-
{{ end }}
164-
<figcaption id="caption-{{ $caption | markdownify }}" class="caption-{{ .Scratch.Get `caption-name` }}">
165-
{{ $caption | markdownify }}
166-
</figcaption>
167-
</figure>
168-
{{ else }}
169-
<!-- image tag -->
170-
{{ if eq $zoomable `true` }}
171-
<a
172-
href="{{ $image.RelPermalink }}"
173-
style="display: block;"
174-
class="glightbox">
175-
{{ end }}
176-
<img
177-
title="{{ $title }}"
178-
loading="lazy"
179-
decoding="async"
180-
class="img {{ $class }} {{ .Scratch.Get `position` }}"
181-
width="{{ .Scratch.Get `image-width` }}"
182-
height="{{ .Scratch.Get `image-height` }}"
183-
src="{{ .Scratch.Get `image` }}"
184-
alt="{{ $alt }}"
185-
onerror="this.onerror='null';this.src='{{ .Scratch.Get `fallback` }}'" />
186-
{{ if eq $zoomable `true` }}
187-
</a>
188-
{{ end }}
189-
{{ end }}
190-
191-
{{ else }}
192-
<!-- image not found -->
193-
<strong style="color:red; margin-bottom:15px; display:inline-block;"
194-
>{{ site.BaseURL }}{{ $imagePath }} does not exist</strong
195-
>
196-
{{ end }}
197-
<!-- /check image existence -->
60+
<!-- cdn image tag -->
61+
<img
62+
title="{{ $title }}"
63+
loading="lazy"
64+
decoding="async"
65+
src="{{ $imagePath | absURL }}"
66+
alt="{{ $finalAlt }}"
67+
class="img {{ $class }} {{ .Scratch.Get `position` }}"
68+
width="{{ $width }}"
69+
height="{{ $height }}" />
19870
{{ end }}
199-
<!-- /check cdn image -->
71+
<!-- /cdn image -->
72+
{{ else }}
73+
<!-- content and assets image path variable -->
74+
{{ $contentImage:= .Page.Resources.GetMatch (printf "*%s*" $imagePath) }}
75+
{{ $assetImage:= fileExists (add `assets/` $imagePath) }}
76+
77+
78+
<!-- check image existence -->
79+
{{ if or $contentImage $assetImage }}
80+
<!-- content or assets folder detection -->
81+
{{ if $contentImage }}
82+
{{ .Scratch.Set "image-exists" $contentImage }}
83+
{{ else if $assetImage }}
84+
{{ .Scratch.Set "image-exists" (resources.Get $imagePath) }}
85+
{{ end }}
86+
87+
{{ $image:= .Scratch.Get "image-exists" }}
88+
89+
90+
<!-- image extension -->
91+
{{ $imageExt := path.Ext $image }}
92+
93+
94+
<!-- image height, width -->
95+
{{ .Scratch.Set "image-height" "" }}
96+
{{ .Scratch.Set "image-width" "" }}
97+
{{ if not (or $height $width) }}
98+
{{ .Scratch.Set "image-height" $image.Height }}
99+
{{ .Scratch.Set "image-width" $image.Width }}
100+
{{ end }}
101+
{{ $imageHeight:= .Scratch.Get "image-height" }}
102+
{{ $imageWidth:= .Scratch.Get "image-width" }}
103+
{{ .Scratch.Set `caption-name` (replaceRE `[^-a-zA-Z0-9]` `` (replace $caption ` ` `-`)) }}
104+
105+
106+
<!-- checking gif/svg image -->
107+
{{ if or (eq $imageExt `.gif`) (eq $imageExt `.svg`) }}
108+
{{ .Scratch.Set `image` $image.RelPermalink }}
109+
{{ .Scratch.Set `image-height` $height }}
110+
{{ .Scratch.Set `image-width` $width }}
111+
{{ else }}
112+
<!-- image processing -->
113+
{{ $options:= add (add (add (add (string ($width | default $imageWidth)) "x") (string ($height | default $imageHeight))) " webp ") (string $option) }}
200114

201-
{{ .Page.Scratch.Add "lightbox" 1 }}
202-
{{ $lightbox:= .Page.Scratch.Get "lightbox" }}
203-
{{ if eq $lightbox 1 }}
204-
<script>
205-
window.addEventListener("load", (e) => {
206-
const lightbox = GLightbox();
207-
});
208-
</script>
115+
{{ if eq $webp "false" }}
116+
<!-- if webp false -->
117+
{{ $options = add (add (add (add (string ($width | default $imageWidth)) "x") (string ($height | default $imageHeight))) " ") (string $option) }}
209118
{{ end }}
119+
120+
121+
<!-- end -->
122+
123+
<!-- image Fit -->
124+
{{ if eq $command `Fit` }}
125+
{{ .Scratch.Set `newimage` ($image.Fit $options) }}
126+
{{ .Scratch.Set `fallback` ($image.Fit (replace $options `webp` ``)).RelPermalink }}
127+
<!-- image Fill -->
128+
{{ else if eq $command `Fill` }}
129+
{{ .Scratch.Set `newimage` ($image.Fill $options) }}
130+
{{ .Scratch.Set `fallback` ($image.Fill (replace $options `webp` ``)).RelPermalink }}
131+
<!-- image Resize -->
132+
{{ else }}
133+
{{ .Scratch.Set `newimage` ($image.Resize $options) }}
134+
{{ .Scratch.Set `fallback` ($image.Resize (replace $options `webp` ``)).RelPermalink }}
135+
{{ end }}
136+
{{ .Scratch.Set `image` (.Scratch.Get `newimage`).RelPermalink }}
137+
{{ .Scratch.Set `image-height` (.Scratch.Get `newimage`).Height }}
138+
{{ .Scratch.Set `image-width` (.Scratch.Get `newimage`).Width }}
139+
140+
{{ end }}
141+
<!-- /checking gif/svg image -->
142+
143+
<!-- image figure -->
144+
{{ if $caption }}
145+
<figure
146+
class="{{ .Scratch.Get `position` }}"
147+
role="group"
148+
aria-describedby="caption-{{ $caption | markdownify }}">
149+
<img
150+
title="{{ $title }}"
151+
loading="lazy"
152+
decoding="async"
153+
class="img {{ $class }}"
154+
width="{{ .Scratch.Get `image-width` }}"
155+
height="{{ .Scratch.Get `image-height` }}"
156+
src="{{ .Scratch.Get `image` }}"
157+
alt="{{ $finalAlt }}"
158+
onerror="this.onerror='null';this.src='{{ .Scratch.Get `fallback` }}'" />
159+
<figcaption id="caption-{{ $caption | markdownify }}" class="caption-{{ .Scratch.Get `caption-name` }}">
160+
{{ $caption | markdownify }}
161+
</figcaption>
162+
</figure>
163+
{{ else }}
164+
<!-- image tag -->
165+
<img
166+
title="{{ $title }}"
167+
loading="lazy"
168+
decoding="async"
169+
class="img {{ $class }} {{ .Scratch.Get `position` }}"
170+
width="{{ .Scratch.Get `image-width` }}"
171+
height="{{ .Scratch.Get `image-height` }}"
172+
src="{{ .Scratch.Get `image` }}"
173+
alt="{{ $finalAlt }}"
174+
onerror="this.onerror='null';this.src='{{ .Scratch.Get `fallback` }}'" />
175+
{{ end }}
176+
177+
{{ else }}
178+
<!-- image not found -->
179+
<strong style="color:red; margin-bottom:15px; display:inline-block;"
180+
>{{ site.BaseURL }}{{ $imagePath }} does not exist</strong
181+
>
182+
{{ end }}
183+
<!-- /check image existence -->
184+
{{ end }}
185+
<!-- /check cdn image -->

0 commit comments

Comments
 (0)