blowfish/layouts/_default/_markup/render-image.html

{{- define "RenderImageSimple" -}}
  {{- $imgObj := .imgObj -}}
  {{- $src := .src -}}
  {{- $alt := .alt -}}
  <img
    class="my-0 rounded-md"
    loading="lazy"
    decoding="async"
    fetchpriority="low"
    alt="{{ $alt }}"
    src="{{ $src }}"
    {{ with $imgObj -}}
      {{ with $imgObj.Width }}width="{{ . }}"{{ end }}
      {{ with $imgObj.Height }}height="{{ . }}"{{ end }}
    {{- end }}>
{{- end -}}

{{- define "RenderImageResponsive" -}}
  {{/* Responsive Image
    The current setting sizes="(min-width: 768px) 50vw, 65vw" makes the iPhone 16 and 16 Pro
    select a smaller image, while the iPhone 16 Pro Max selects a larger image.

    Steps:
    1. Check the media queries in the `sizes` property.
    2. Find the first matching value. For example, on a mobile device with a CSS pixel width
    of 390px and DPR = 3 (iPhone 13), given setting sizes="(min-width: 768px) 50vw, 100vw",
    it matches the `100vw` option.
    3. Calculate the optimal image size: 390 × 3 × 100% (100vw) = 1170.
    4. Find the corresponding match in the `srcset`.

    To make the browser select a smaller image on mobile devices
    override the template and change the `sizes` property to "(min-width: 768px) 50vw, 30vw"

    The sizes="auto" is valid only when loading="lazy".
  */}}
  {{- $imgObj := .imgObj -}}
  {{- $alt := .alt -}}
  {{- $originalWidth := $imgObj.Width -}}

  {{- $img800 := $imgObj -}}
  {{- $img1280 := $imgObj -}}
  {{- if gt $originalWidth 800 -}}
    {{- $img800 = $imgObj.Resize "800x" -}}
  {{- end -}}
  {{- if gt $originalWidth 1280 -}}
    {{- $img1280 = $imgObj.Resize "1280x" -}}
  {{- end -}}

  {{- $srcset := printf "%s 800w, %s 1280w" $img800.RelPermalink $img1280.RelPermalink -}}


  <img
    class="my-0 rounded-md"
    loading="lazy"
    decoding="async"
    fetchpriority="auto"
    alt="{{ $alt }}"
    {{ with $imgObj.Width }}width="{{ . }}"{{ end }}
    {{ with $imgObj.Height }}height="{{ . }}"{{ end }}
    src="{{ $img800.RelPermalink }}"
    srcset="{{ $srcset }}"
    sizes="(min-width: 768px) 50vw, 65vw"
    data-zoom-src="{{ $imgObj.RelPermalink }}">
{{- end -}}

{{- define "RenderImageCaption" -}}
  {{- with .caption -}}
    <figcaption>{{ . | markdownify }}</figcaption>
  {{- end -}}
{{- end -}}

{{- $disableImageOptimizationMD := .Page.Site.Params.disableImageOptimizationMD | default false -}}
{{- $urlStr := .Destination | safeURL -}}
{{- $url := urls.Parse $urlStr -}}
{{- $altText := .Text -}}
{{- $caption := .Title -}}
{{- $isRemote := findRE "^(https?|data)" $url.Scheme -}}
{{- $resource := "" -}}

{{- if not $isRemote -}}
  {{- $resource = or ($.Page.Resources.GetMatch $urlStr) (resources.Get $urlStr) -}}
{{- end -}}


<figure
  {{- range $k, $v := .Attributes -}}
    {{- if $v -}}
      {{- printf " %s=%q" $k ($v | transform.HTMLEscape) | safeHTMLAttr -}}
    {{- end -}}
  {{- end -}}>
  {{- if $isRemote -}}
    {{- template "RenderImageSimple" (dict "imgObj" "" "src" $urlStr "alt" $altText) -}}
  {{- else if $resource -}}
    {{- $isSVG := eq $resource.MediaType.SubType "svg" -}}
    {{- $shouldOptimize := and (not $disableImageOptimizationMD) (not $isSVG) -}}
    {{- if $shouldOptimize -}}
      {{- template "RenderImageResponsive" (dict "imgObj" $resource "alt" $altText) -}}
    {{- else -}}
      {{/* Not optimize image
        If it is an SVG file, pass the permalink
        Otherwise, pass the resource to allow width and height attributes
      */}}
      {{- if $isSVG -}}
        {{- template "RenderImageSimple" (dict "imgObj" "" "src" $resource.RelPermalink "alt" $altText) -}}
      {{- else -}}
        {{- template "RenderImageSimple" (dict "imgObj" $resource "src" $resource.RelPermalink "alt" $altText) -}}
      {{- end -}}
    {{- end -}}
  {{- else -}}
    {{- template "RenderImageSimple" (dict "imgObj" "" "src" $urlStr "alt" $altText) -}}
  {{- end -}}

  {{- template "RenderImageCaption" (dict "caption" $caption) -}}
</figure>