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 }}
    <!-- prettier-ignore -->
    <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) }}
              srcset="{{ .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 }} 1320w
            {{ else }}
              {{ with .Resize (printf "%dx%d webp" .Width .Height) }}
                ,{{ .RelPermalink }} {{ .Width }}w
              {{ end }}
            {{ end }}"
          {{ end }}
          sizes="100vw"
          type="image/webp"
        />
      {{ end }}
      <img
        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 }}
          src="{{ (.Resize "660x").RelPermalink }}"
          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 }} 1320w
          {{ else }}
            ,{{ .RelPermalink }} {{ .Width }}w
          {{ end }}"
          sizes="100vw"
        {{ end }}
      />
    </picture>
  {{ end }}
{{ end }}