mirror of
https://github.com/gethinode/hinode.git
synced 2025-10-17 23:13:11 +00:00
76 lines
3.0 KiB
HTML
76 lines
3.0 KiB
HTML
<!--
|
|
Render an image with responsive image sizing. The image should be available as resource stored in the "assets"
|
|
folder. Images are resized using default media breakpoints and are converted to webp format. The image is
|
|
processed using the quality setting specified in the [imaging] section of the main config file (defaults to 75).
|
|
A fallback image is provided for older browsers. The partial supports the following arguments:
|
|
"src": Required relative url of the image, e.g. "img/example.jpg"
|
|
"ratio": Bootstrap ratio of the image, either "1x1", "4x3" (default), "16x9", or "21x9".
|
|
"class": Optional class attribute of the inner img element, e.g. "rounded".
|
|
"title": Optional alternate text of the image.
|
|
"caption": Optional figure caption.
|
|
-->
|
|
|
|
{{ if isset .Params "src" }}
|
|
{{ $url := .Get "src" }}
|
|
{{ $ratio := "4x3" }}
|
|
{{ $class := "" }}
|
|
{{ $title := "" }}
|
|
{{ $caption := "" }}
|
|
|
|
{{ $img := resources.Get $url }}
|
|
{{ with .Get "ratio" }}{{ $ratio = . }}{{ end }}
|
|
{{ with .Get "class" }}{{ $class = . }}{{ end }}
|
|
{{ with .Get "title" }}{{ $title = . }}{{ end }}
|
|
{{ with .Get "caption" }}{{ $caption = . }}{{ end }}
|
|
|
|
<!-- default ratio 4x3 -->
|
|
{{ $smDim := "576x432" }}
|
|
{{ $mdDim := "768x576" }}
|
|
{{ $lgDim := "992x744" }}
|
|
{{ $xlDim := "1200x900" }}
|
|
{{ $xxlDim := "1400x1050" }}
|
|
|
|
{{ if eq $ratio "1x1"}}
|
|
{{ $smDim = "576x576" }}
|
|
{{ $mdDim = "768x768" }}
|
|
{{ $lgDim = "992x992" }}
|
|
{{ $xlDim = "1200x1200" }}
|
|
{{ $xxlDim = "1400x1400" }}
|
|
{{ else if eq $ratio "16x9"}}
|
|
{{ $smDim = "576x324" }}
|
|
{{ $mdDim = "768x432" }}
|
|
{{ $lgDim = "992x558" }}
|
|
{{ $xlDim = "1200x675" }}
|
|
{{ $xxlDim = "1400x788" }}
|
|
{{ else if eq $ratio "21x9"}}
|
|
{{ $smDim = "576x247" }}
|
|
{{ $mdDim = "768x329" }}
|
|
{{ $lgDim = "992x425" }}
|
|
{{ $xlDim = "1200x514" }}
|
|
{{ $xxlDim = "1400x600" }}
|
|
{{ end }}
|
|
|
|
{{ $sm := ($img.Fill (printf "%s webp" $smDim)) }}
|
|
{{ $md := ($img.Fill (printf "%s webp" $mdDim)) }}
|
|
{{ $lg := ($img.Fill (printf "%s webp" $lgDim)) }}
|
|
{{ $xl := ($img.Fill (printf "%s webp" $xlDim)) }}
|
|
{{ $xxl := ($img.Fill (printf "%s webp" $xxlDim)) }}
|
|
{{ $fallback := ($img.Fill (printf "%s jpg" $xxlDim)) }}
|
|
|
|
|
|
<figure class="figure">
|
|
<img class="figure-img img-fluid {{ $class}}"
|
|
srcset="
|
|
{{- with $xxl.RelPermalink -}}{{.}} 1400w{{- end -}}
|
|
{{- with $xl.RelPermalink -}}, {{.}} 1200w{{- end -}}
|
|
{{- with $lg.RelPermalink -}}, {{.}} 992w{{- end -}}
|
|
{{- with $md.RelPermalink -}}, {{.}} 768w{{- end -}}
|
|
{{- with $sm.RelPermalink -}}, {{.}} 576w{{- end -}}"
|
|
sizes="100vw"
|
|
src="{{ $fallback.RelPermalink }}"
|
|
alt="{{ $title }}">
|
|
<figcaption class="figure-caption">{{ $caption }}</figcaption>
|
|
</figure>
|
|
{{ else }}
|
|
{{ errorf "missing value for param 'src': %s" .Position }}
|
|
{{ end }} |