{{- /* lazysizes and lightgallery */ -}}
{{- $src := .Src -}}
{{- $width := .Width -}}
{{- $height := .Height -}}
{{- with dict "Path" $src "Resources" .Resources | partial "function/resource.html" -}}
  {{- $src = .RelPermalink -}}
  {{- /* Resources can not get width and height of image for svg type */ -}}
  {{- if ne .MediaType.SubType "svg" -}}
    {{- $width = $width | default .Width -}}
    {{- $height = $height | default .Height -}}
  {{- end -}}
{{- end -}}

{{- $style := "" -}}
{{- with $width -}}
  {{- $style = printf "width: %v;" . -}}
{{- end -}}
{{- with $height -}}
  {{- $style = printf "%vheight: %v;" $style . -}}
{{- end -}}
{{- /* with $style }} {{ printf "style=\"%v\"" $style | safeHTMLAttr -}}{{- end */ -}}

{{- $small := .SrcSmall | default $src -}}
{{- with dict "Path" .SrcSmall "Resources" .Resources | partial "function/resource.html" -}}
  {{- $small = .RelPermalink -}}
{{- end -}}

{{- $large := .SrcLarge | default $src -}}
{{- with dict "Path" .SrcLarge "Resources" .Resources | partial "function/resource.html" -}}
  {{- $large = .RelPermalink -}}
{{- end -}}

{{- $alt := .Alt | default $src -}}
{{- $caption := .Caption | default $alt -}}
{{- $loading := resources.Get "svg/loading.svg" | minify -}}
{{- if .Linked -}}
  <a class="lightgallery" href="{{ $large | safeURL }}" data-thumbnail="{{ $small | safeURL }}"{{ with $caption }} data-sub-html="<h2>{{ . }}</h2>{{ with $.Title }}<p>{{ . }}</p>{{ end }}"{{ end }}{{ with .Rel }} rel="{{ . }}"{{ end }}>
    <img
      class="lazyload{{ with .Class }} {{ . }}{{ end }}"
      src="{{ $loading.RelPermalink }}"
      data-src="{{ $src | safeURL }}"
      data-srcset="{{ $small | safeURL }}, {{ $src | safeURL }} 1.5x, {{ $large | safeURL }} 2x"
      data-sizes="auto"
      alt="{{ $alt }}"
      title="{{ .Title | default $alt }}"
      {{- with $width }} width="{{ . }}"{{- end -}}
      {{- with $height }} height="{{ . }}"{{- end -}}
      {{- with .Width }} data-w{{- end -}}
      {{- with .Height }} data-h{{- end -}}
    />
  </a>
{{- else -}}
  <img
    class="lazyload{{ with .Class }} {{ . }}{{ end }}"
    src="{{ $loading.RelPermalink }}"
    data-src="{{ $src | safeURL }}"
    data-srcset="{{ $small | safeURL }}, {{ $src | safeURL }} 1.5x, {{ $large | safeURL }} 2x"
    data-sizes="auto"
    alt="{{ $alt }}"
    title="{{ .Title | default $alt }}"
    {{- with $width }} width="{{ . }}"{{- end -}}
    {{- with $height }} height="{{ . }}"{{- end -}}
    {{- with .Width }} data-w{{- end -}}
    {{- with .Height }} data-h{{- end -}}
  />
{{- end -}}