hugo-theme-stack-stars/layouts/_default/_markup/render-image.html

{{- $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) -}}
{{- if $image -}}
	{{- $small := $image.Resize "480x" -}}
	{{- $big := $image.Resize "1024x" -}}
	{{- $alt := .PlainText | safeHTML -}}
	{{- $caption := "" -}}
	{{- with $alt -}}
	{{- $caption = . | safeHTML -}}
	{{- end -}}
	<figure style="flex-grow: {{ div (mul $image.Width 100) $image.Height }}; flex-basis: {{ div (mul $image.Width 240) $image.Height }}px">
		<a href="{{ $image.RelPermalink }}" data-size="{{ $image.Width }}x{{ $image.Height }}">
			<img srcset="{{ $small.RelPermalink }} 480w, {{ $big.RelPermalink }} 1024w"
				src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" loading="lazy"
				alt="{{ if $alt }}{{ $alt }}{{ else if $caption }}{{ $caption | markdownify | plainify }}{{ else }}&nbsp;{{ end }}">
		</a>
		{{ with $caption }}
		<figcaption>{{ . | markdownify }}</figcaption>
		{{ end }}
	</figure>
{{- else -}}
	<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}"{{ end }} />
{{- end -}}