FixIt/layouts/_partials/plugin/image.html

{{- /*  
The image plugin is a partial that handles image resources.

Parameters:
- Src: The path to the image. 
    It can be a page resource (inside a page bundle) https://gohugo.io/methods/page/resources/
    or a global resource (inside the assets directory) https://gohugo.io/functions/resources/get/
    or a link to a remote resource, which can be cached if the site parameter is set https://gohugo.io/functions/resources/getremote/
- Resources: If the image is a page resource, this parameter is required. It is the .Resources of the page.
- OptimConfig: optimisation parameter, defined like 
    {{- $optim := slice 
        (dict "Process" "resize 800x Center webp q75" "descriptor" "800w")
        (dict "Process" "resize 1200x Center webp q75" "descriptor" "1200w")
        (dict "Process" "resize 1600x Center webp q75" "descriptor" "1600w")
    -}}
    See https://gohugo.io/content-management/image-processing/ for more information.
- Alt: alt text for the image. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#alt
- Height: The intrinsic height of the image, in pixels. Must be an integer without a unit.
    We try to generate this value automatically if possible. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#height
- Width: The intrinsic width of the image, in pixels. Must be an integer without a unit.
    We try to generate this value automatically if possible. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#width
- Loading: Indicates how the browser should load the image: eager or lazy. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading
- Optimise: Override the site parameter to optimise the image.
- CacheRemote: Override the site parameter to cache remote images.
- BlackList: A list of image file names or patterns to exclude from optimisation, default is from site parameter.
- Matches: If the image is a page resource, this parameter can help to find the resource by names. e.g. ["featured-image", "featured-image-preview"].

Thanks @HEIGE-PCloud for the original code in the DoIt theme.
https://github.com/HEIGE-PCloud/DoIt/blob/main/layouts/_partials/plugin/image.html
*/ -}}

{{- $config := site.Params.image -}}
{{- $Resources := .Resources | default page.Resources -}}
{{- $isInline := strings.HasPrefix .Src "data:image" -}}
{{- $isRemote := urls.Parse .Src | partial "function/is-url-remote.html" -}}
{{- $resource := dict -}}

{{- /* Get local image resource */ -}}
{{- if not $isRemote | and (not $isInline) -}}
  {{- /* Try to get resource by matched names */ -}}
  {{- $matchNames := .Matches | default (slice (strings.TrimPrefix "./" (urls.Parse .Src).Path)) -}}
  {{- range $matchNames -}}
    {{- $resource = $Resources.GetMatch . -}}
    {{- if $resource -}}{{- break -}}{{- end -}}
  {{- end -}}
  {{- /* Try to get resource from page or global resources */ -}}
  {{- $resource = $resource | default ($Resources.Get .Src) | default (resources.Get .Src) -}}
{{- end -}}

{{- /* Get remote image resource */ -}}
{{- $cacheRemote := .CacheRemote | default $config.cacheRemote | default false -}}
{{- if not $resource | and $cacheRemote -}}
  {{- with partial "function/get-remote-image.html" (dict "Src" .Src) -}}
    {{- $resource = . -}}
  {{- end -}}
{{- end -}}

{{- /* Check if the image is blocked from optimisation */ -}}
{{- $blackList := .BlackList | default $config.blackList | default slice -}}
{{- $isBlocked := false -}}
{{- $regex := "" -}}
{{- $disableImageTypes := slice "svg" "gif" "avif" -}}
{{- with $blackList -}}
  {{- $regex = replace (delimit . "|") "." "\\." -}}
  {{- $regex = replace $regex "*" ".*" -}}
{{- end -}}
{{- /* raster graphics */ -}}
{{- $rasterTypes := slice "svg" "avif" -}}
{{- $isRaster := false -}}
{{- if $resource -}}
  {{- if $regex -}}
    {{- $isBlocked = gt (findRE $regex $resource.Name | len) 0 -}}
  {{- end -}}
  {{- if not $isBlocked -}}
    {{- $isBlocked = in $disableImageTypes $resource.MediaType.SubType -}}
  {{- end -}}
  {{- $isRaster = in $rasterTypes $resource.MediaType.SubType -}}
{{- end -}}

{{- /* Optimise image and generate srcset processing */ -}}
{{- $optim := .OptimConfig -}}
{{- $optimise := .Optimise | default $config.optimise | default false -}}
{{- $srcset := "" -}}
{{- if $optim | and $resource | and $optimise | and (not $isBlocked) -}}
  {{ $srcsetSlice := slice -}}
  {{- range $optim -}}
    {{- if .Process -}}
      {{- $processed := $resource.Process .Process -}}
      {{- $srcsetSlice = $srcsetSlice | append (printf "%s %s" $processed.RelPermalink .descriptor) -}}
    {{- end -}}
  {{- end -}}
  {{- $srcset = delimit $srcsetSlice ", " -}}
{{- end -}}

{{- $src := $resource.RelPermalink | default .Src -}}
{{- $alt := .Alt | default $src -}}
{{- $caption := .Caption | default $alt -}}
{{- $height := .Height -}}
{{- $width := .Width -}}
{{- if not $isRaster -}}
  {{- $height = $height | default $resource.Height | default "" -}}
  {{- $width = $width | default $resource.Width | default "" -}}
{{- end -}}

{{- if .Linked -}}
<a class="lightgallery" target="_blank" href="{{ $src }}" title="{{ .Title | default $alt }}" data-thumbnail="{{ $src }}"{{ with $caption }} data-sub-html="<h2>{{ . }}</h2>{{ with $.Title }}<p>{{ . }}</p>{{ end }}"{{ end }}{{ with .Rel }} rel="{{ . }}"{{ end }}>
{{- end -}}
<img {{- with .Class }} class="{{ . }}"{{ end }}{{ with .Loading }} loading="{{ . }}"{{ end }} {{ printf "src='%v'" $src | safeHTMLAttr }}{{ with $srcset }} srcset="{{ . }}"{{ end }}{{ with .Sizes }} sizes="{{ . }}"{{ end }}{{ with $alt }} alt="{{ . }}"{{ end }}{{ with $height }} height="{{ . }}"{{ end }}{{ with $width }} width="{{ . }}"{{ end }}{{ with .Decoding }} decoding="{{ . }}"{{ end }}{{ with .Referrerpolicy }} referrerpolicy="{{ . }}"{{ end }}>
{{- if .Linked -}}
</a>
{{- end -}}