Trez/congo-hindi-gujarati
4
0
Fork 0
mirror of https://github.com/TrezOne/congo-hindi-gujarati.git synced 2026-07-18 16:48:28 -04:00
Code Issues Packages Projects Releases Wiki Activity

✨ Add image resizing and srcset generation

Browse Source
This commit is contained in:
James Panther
2022-01-12 14:21:22 +11:00
parent 9ead2c33e8
commit 3b5b93d965
10 changed files with 67 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/shortcodes/figure.html
+21 -25
View File
@@ -1,27 +1,23 @@
{{ if .Get "src" }}
{{ $image := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) }}
<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="{{ $image.RelPermalink }}"
{{- 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 -}}
/>
{{- 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 }}
{{ $altText := .Get "alt" }}
{{ $caption := .Get "caption" }}
{{ $href := .Get "href" }}
{{ $class := .Get "class" }}
{{ with $.Page.Resources.GetMatch (.Get "src") }}
<figure {{ with $class }}class="{{ . }}"{{ end }}>
{{ with $href }}<a href="{{ . }}">{{ end }}
<img
class="my-0"
srcset="
{{ (.Resize "320x").RelPermalink }} 320w,
{{ (.Resize "635x").RelPermalink }} 635w,
{{ (.Resize "1024x").RelPermalink }} 1024w,
{{ (.Resize "1270x").RelPermalink }} 2x"
src="{{ (.Resize "635x").RelPermalink }}"
alt="{{ $altText }}"
/>
{{ if $href }}</a>{{ end }}
{{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
</figure>
{{ else }}
{{ errorf `[CONGO] Shortcode "figure" error in "%s": Resource "%s" not found. Check the path is correct or remove the shortcode.` .Page.Path (.Get "src") }}
{{ end }}
layouts/shortcodes/screenshot.html
+16 -29
View File
@@ -1,35 +1,22 @@
{{ if .Get "src" }}
{{ $image := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) }}
<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
{{- if .Get "link" -}}
<a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
{{- if .Get "href" -}}
<a href="{{ .Get "href" }}">
{{- end -}}
<img src="{{ $image.RelPermalink }}"
{{- if or (.Get "alt") (.Get "caption") }}
alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify | plainify }}{{ end }}"
{{- end -}}
<img src="{{ $image.RelPermalink }}"
{{- if or (.Get "alt") (.Get "caption") }}
alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
{{- end -}}
width="100%"
height="auto"
style="max-width:{{ div $image.Width 2 }}px; max-height:{{ div $image.Height 2 }}px;"
/><!-- 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 }}
width="100%"
height="auto"
style="max-width:{{ div $image.Width 2 }}px; max-height:{{ div $image.Height 2 }}px;"
/>
{{- if .Get "href" }}</a>{{ end -}}
{{- if .Get "caption" -}}
<figcaption>
{{- .Get "caption" | markdownify -}}
</figcaption>
{{- end }}
</figure>
{{ end }}