Untitled

{{/* hugo will resize to all of these sizes that are smaller than your original. configure if you like! */}}
{{- $sizes := (slice "480" "625" "815" "980" "1150" "1370") -}}

{{/* get file that matches the filename as specified as src="" in shortcode */}}
{{- $src := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) -}}

<!-- Check to see if the image can be processed; i.e., is is not an SVG file -->
{{- $myTransform := "" -}}
{{- if ne $src.MediaType.SubType "svg" -}}
{{- $orientation := 0 -}}
{{- with $src.Exif -}}
    {{- $orientation = .Tags.Orientation -}}
{{- end -}}
{{- if eq $orientation  "0" -}}
    {{- $myTransform = "" -}}
{{- else if eq $orientation 1 -}}
    {{- $myTransform = "" -}}
{{- else if eq $orientation 2 -}}
    {{- $myTransform = "" -}}
{{- else if eq $orientation 3 -}}
    {{- $myTransform = " r180" -}}
{{- else if eq $orientation 4 -}}
    {{- $myTransform = "" -}}
{{- else if eq $orientation 5 -}}
    {{- $myTransform = "" -}}
{{- else if eq $orientation 6 -}}
    {{- $myTransform = " r270" -}}
{{- else if eq $orientation 7 -}}
    {{- $myTransform = "" -}}
{{- else if eq $orientation 8 -}}
    {{- $myTransform = " r90" -}}
{{- else -}}
    {{- $myTransform = "" -}}
{{- end -}}
{{- end -}}

<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
      {{ if $src -}}
         {{- if ne $src.MediaType.SubType "svg" -}}
            sizes="(min-width: 35em) 1200px, 100vw"
            {{/* only srcset images smaller than or equal to the src (original) image size, as Hugo will upscale small images */}}
            srcset='
            {{ range $sizes }}
                   {{ if ge $src.Width . }}{{ ($src.Resize (printf "%sx webp q90 %s" . $myTransform)).Permalink }} {{ (printf "%sw" .) }},{{ end }}
            {{ end }}'

            {{/* when no support for srcset (old browsers, RSS), we load small (800px) */}}
            {{/* if image smaller than 800, then load the image itself */}}
            {{- if ge $src.Width "800" -}}src="{{ ($src.Resize "800x q90 webp" ).Permalink }}"
            {{- else }}src="{{ $src.Permalink }}"{{- end -}}
        {{- else -}}
            src="{{ $src }}"
        {{- end -}}
    {{- else -}}
        {{/* fall back to stock hugo behaviour when image is not available in bundle */}}
        src="{{ .Get "src" }}"
    {{- end -}}

    {{- 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 -}}
    /> <!-- 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 }}
</figure>