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

{{ $url := urls.Parse .Destination }}
{{ $altText := .Text }}
{{ $caption := .Title }}
{{ $lazyLoad := $.Page.Site.Params.enableImageLazyLoading | default true }}
{{ if findRE "^https?" $url.Scheme }}
  <figure>
    <img
      class="mx-auto my-0 rounded-md"
      src="{{ $url.String }}"
      alt="{{ $altText }}" 
      {{ if $lazyLoad }}
        loading="lazy"
      {{ end }}
    />
    {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
  </figure>
{{ else }}
  {{ $resource := "" }}
  {{ if $.Page.Resources.GetMatch ($url.String) }}
    {{ $resource = $.Page.Resources.GetMatch ($url.String) }}
  {{ else if resources.GetMatch ($url.String) }}
    {{ $resource = resources.Get ($url.String) }}
  {{ end }}
  {{ with $resource }}
    <figure>
      {{ if ne .MediaType.SubType "svg" }}
        {{ $lqip := .Resize "20x webp" }}
        <div class="mx-auto my-0 rounded-md"
          style="background: url(data:image/webp;base64,{{ $lqip.Content | base64Encode  }}); background-size: cover">
      {{ end }}
      <img
        class="mx-auto my-0 rounded-md"
        {{ if eq .MediaType.SubType "svg" }}
          src="{{ .RelPermalink }}"
        {{ else }}
          width="{{ .Width }}"
          height="{{ .Height }}"
          {{ if lt .Width 660 }}
            src="{{ .RelPermalink }}"
          {{ else }}
            srcset="
            {{- (.Resize "330x").RelPermalink }} 330w,
            {{- (.Resize "660x").RelPermalink }} 660w,
            {{- (.Resize "1024x").RelPermalink }} 1024w,
            {{- (.Resize "1320x").RelPermalink }} 2x"
            src="{{ (.Resize "660x").RelPermalink }}"
          {{ end }}
        {{ end }}
        alt="{{ $altText }}"
        {{ if $lazyLoad }}
          loading="lazy"
        {{ end }}
      />
      {{ if ne .MediaType.SubType "svg" }}
        </div>
      {{ end }}
      {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
    </figure>
  {{ else }}
    <figure>
      <img
        class="mx-auto my-0 rounded-md"
        src="{{ $url.String }}"
        alt="{{ $altText }}"
        {{ if $lazyLoad }}
          loading="lazy"
        {{ end }}
      />
      {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
    </figure>
  {{ end }}
{{ end }}