congo/layouts/partials/picture.html

{{ $img := .img }}
{{ $alt := .alt }}
{{ $class := .class }}
{{ $lazy := .lazy | default $.Page.Site.Params.enableImageLazyLoading | default true }}
{{ $webp := .webp | default $.Page.Site.Params.enableImageWebp | default true }}
{{ $lqip := .lqip | default false }}
{{ $x2 := .x2 | default false }}

{{ with $img }}
  {{ if (eq .MediaType.SubType "svg") }}
    {{ $width := ""}}
    {{ $height := ""}}
    {{ $svgContent := .Content }}
    {{ range (findRESubmatch `<svg[^>]*width=["']([.0-9]*)["'a-zA-Z]` $svgContent 1) }}
      {{ $width = index . 1 }}
    {{ end }}
    {{ range (findRESubmatch `<svg[^>]*height=["']([.0-9]*)["'a-zA-Z]` $svgContent 1) }}
      {{ $height = index . 1 }}
    {{ end }}
    {{ if (eq "" $width $height) }}
      {{ range (findRESubmatch `<svg[^>]*viewBox=["']?([.0-9]*) ([.0-9]*) ([.0-9]*) ([.0-9]*)` $svgContent 1) }}
        {{ $width = index . 3 }}
        {{ $height = index . 4 }}
      {{ end }}
    {{ end }}
    {{ if (eq "" $width $height) }}
      {{ warnf "Can't detect width and height for SVG %s" .RelPermalink }}
      {{/* do not use lazy without dimensions */}}
      {{ $lazy = false }}
    {{ end }}
    <picture {{ with $class }} class="{{ . }}" {{ end }}>
      <img
        src="{{ .RelPermalink }}"
        {{ with $width }} width="{{ . }}" {{ end }}
        {{ with $height }} height="{{ . }}" {{ end }}
        {{ with $class }} class="{{ . }}" {{ end }}
        {{ with $alt }} alt="{{ . }}" {{ end }}
        {{ with $lazy }} loading="lazy" decoding="async" {{ end }}
      >
    </picture>
  {{ else }}
    <picture 
      {{ with $class }} class="{{ . }}" {{ end }}
      {{ if $lqip }}
        {{ $bg := (.Resize "20x webp q20").Content | base64Encode }}
        style="background-image:url(data:image/webp;base64,{{ $bg }});background-size:cover"
      {{ end }}
    >
    {{ $width := .Width }}
    {{ $height := .Height }}
    {{ if $x2 }}
      {{ $width = div .Width 2 }}
      {{ $height = div .Height 2 }}
    {{ end }}
    {{ if $webp }}
      <source 
        {{ if lt .Width 660 }}
          {{ with .Resize (printf "%dx%d webp" .Width .Height) }}
            src="{{ .RelPermalink }}"
          {{ end }}
        {{ else }}
          srcset="
            {{- (.Resize "330x webp").RelPermalink }} 330w,
            {{- (.Resize "660x webp").RelPermalink }} 660w
            {{ if gt .Width 1024 }}
              ,{{ (.Resize "1024x webp").RelPermalink }} 1024w
            {{ else }}
              {{ with .Resize (printf "%dx%d webp" .Width .Height) }}
                ,{{ .RelPermalink }} {{ .Width }}w
              {{ end }}
            {{ end }}
            {{ if gt .Width 1320 }}
              ,{{ (.Resize "1320x webp").RelPermalink }} 2x
            {{ else }}
              {{ with .Resize (printf "%dx%d webp" .Width .Height) }}
                ,{{ .RelPermalink }} {{ .Width }}w
              {{ end }}
            {{ end }}"
          src="{{ (.Resize "660x webp").RelPermalink }}" 
        {{ end }}
        type="image/webp" 
      />
    {{ end }}
      <img
        src="{{ .RelPermalink }}"
        width="{{ $width }}"
        height="{{ $height }}"
        {{ with $class }} class="{{ . }}" {{ end }}
        {{ with $alt }} alt="{{ . }}" {{ end }}
        {{ with $lazy }} loading="lazy" decoding="async" {{ end }}
        {{ if lt .Width 660 }}
          src="{{ .RelPermalink }}"
        {{ else }}
          srcset="
          {{- (.Resize "330x").RelPermalink }} 330w,
          {{- (.Resize "660x").RelPermalink }} 660w
          {{ if gt .Width 1024 }}
            ,{{ (.Resize "1024x").RelPermalink }} 1024w
          {{ else }}
            ,{{ .RelPermalink }} {{ .Width }}w
          {{ end }}
          {{ if gt .Width 1320 }}
            ,{{ (.Resize "1320x").RelPermalink }} 2x
          {{ else }}
            ,{{ .RelPermalink }} {{ .Width }}w
          {{ end }}"
          src="{{ (.Resize "660x").RelPermalink }}"
        {{ end }}
      >
    </picture>
  {{ end }}
{{ end }}