forked from IT-Syndikat/website
64 lines
1.9 KiB
HTML
64 lines
1.9 KiB
HTML
{{- $image_file := .Destination -}}
|
|
{{- $image := $.Page.Resources.Get $image_file -}}
|
|
<!-- Page-Resources -->
|
|
{{- with $image -}}
|
|
{{- $image = . -}}
|
|
{{- else -}}
|
|
<!-- Static-Resources -->
|
|
{{- with resources.Get $image_file -}}
|
|
{{- $image = . -}}
|
|
{{- end -}}
|
|
{{- end -}}
|
|
|
|
{{- $background_colour := "#020221" -}}
|
|
{{- $alt := .Text -}}
|
|
{{- $label := .Text -}}
|
|
{{- $caption := "" -}}
|
|
{{- if ne .Title "" -}}
|
|
{{- $caption = .Title | $.Page.RenderString -}}
|
|
{{- $label = $caption -}}
|
|
{{- end -}}
|
|
{{- $imageSizes := site.Params.imageSizes -}}
|
|
|
|
{{- with $image -}}
|
|
{{- $image_width := $image.Width -}}
|
|
{{- $image_height := $image.Height -}}
|
|
{{- $fallback_image := ($image.Resize (print "640x jpg " $background_colour)) -}}
|
|
|
|
<figure role="figure" aria-label="{{- $label | plainify -}}">
|
|
<a href="{{- $image.RelPermalink -}}">
|
|
<div class="image-wrapper">
|
|
<img
|
|
alt="{{- $alt -}}"
|
|
title="{{- $label | plainify -}}"
|
|
width="{{- $image_width -}}"
|
|
height="{{- $image_height -}}"
|
|
{{- if (or (strings.HasSuffix $image ".gif") (strings.HasSuffix $image ".svg")) -}}
|
|
src="{{- $image.RelPermalink -}}"
|
|
{{ else }}
|
|
srcset="
|
|
{{- if le $image.Width (index $imageSizes 0) }}
|
|
{{- with $image.Resize (print $image.Width "x webp " $background_colour) -}}
|
|
{{- print .RelPermalink " " .Width "w, " -}}
|
|
{{- end -}}
|
|
{{- end -}}
|
|
{{- with $imageSizes -}}
|
|
{{- range $index, $size := . -}}
|
|
{{- if ge $image.Width $size -}}
|
|
{{- with $image.Resize (print $size "x webp " $background_colour) -}}
|
|
{{- print .RelPermalink " " $size "w, " -}}
|
|
{{- end -}}
|
|
{{- end -}}
|
|
{{- end -}}
|
|
{{- end -}}"
|
|
sizes="(min-width: 1024px) 100vw, 50vw"
|
|
src="{{- $fallback_image.RelPermalink -}}"
|
|
decoding="async"
|
|
{{- end }}
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
</a>
|
|
<figcaption>{{- $caption -}}</figcaption>
|
|
</figure>
|
|
{{ end }}
|