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

73 lines
2.3 KiB
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 }}