Избранное изображение Хьюго с атрибутами
У меня есть код на сайте Хьюго. В шаблоне single.html я вывожу этот код.
{{- /* Featured image */ -}}
{{ with .Params.featuredImage }}
<div class="featured-image">
<figure class="image">
<img class="lazyload" src="{{ . }}" alt="{{ $.Title }}" />
</figure>
</div>
{{ end }}
Отвечает за вывод основного изображения поста с помощью записи во фронтматерном *.md файле поста. Код работает, но хотелось бы его улучшить -
- Добавьте атрибуты srcset
- Добавьте атрибуты ширины и высоты.
Я еще плохо знаю Хьюго. Но у меня есть шорткод figure.html который добавляет вполне рабочий код изображения с нужными атрибутами, но как сделать аналог этого шорткода, только чтобы он работал в *.html.
{{ $src := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) }}
{{ $lqipw := default "320x webp" }}
{{ $tinyw := default "640x webp" }}
{{ $smallw := default "960x webp" }}
{{ $mediumw := default "1280x webp" }}
{{ $largew := default "1600x webp" }}
{{/* resize the src image to the given sizes */}}
{{ $lqip := $src.Resize $lqipw }}
{{ $tiny := $src.Resize $tinyw }}
{{ $small := $src.Resize $smallw }}
{{ $medium := $src.Resize $mediumw }}
{{ $large := $src.Resize $largew }}
{{ $img := imageConfig ($src.RelPermalink | printf "content/%s" ) }}
<figure{{ with .Get "class" }} class="figure-wrap {{ . }}" {{ end }}>
{{- if .Get "link" -}}
<a href="{{ .Get "link" }}" {{ with .Get "target" }} target="{{ . }}" {{ end }}{{ with .Get "rel" }} rel="{{ . }}"
{{ end }}>
{{- end -}}
<img class="lazyload"
{{- if or (.Get "alt") (.Get "caption") }}
alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
{{- end -}} {{- with .Get "width" }} width="{{ . }}" {{ end -}} {{- with .Get "height" }} height="{{ . }}"
{{ end -}}
data-srcset="{{ if ge $src.Width "640" }}{{ with $tiny.RelPermalink }}{{.}} 640w{{ end }}{{ end }}{{ if ge $src.Width "960" }}{{ with $small.RelPermalink }}, {{.}} 960w{{ end }}{{ end }}{{ if ge $src.Width "1280" }}{{ with $medium.RelPermalink }}, {{.}} 1280w{{ end }}{{ end }}{{ if ge $src.Width "1600" }}{{ with $large.RelPermalink }}, {{.}} 1600w {{ end }}{{ end }}"
{{ if .Get (print $medium) }} data-src="{{ $medium.RelPermalink }}" {{ else }}
data-src="{{ $src.RelPermalink }}" {{ end }} width="{{ $img.Width }}" height="{{ $img.Height }}" />
<!-- Closing img tag -->
<noscript>
<img loading="lazy" {{ with .Get "sizes" }}sizes='{{.}}' {{ else }}{{ end }}
srcset="{{ if ge $src.Width "640" }}{{ with $tiny.RelPermalink }}{{.}} 640w{{ end }}{{ end }}{{ if ge $src.Width "960" }}{{ with $small.RelPermalink }}, {{.}} 960w{{ end }}{{ end }}{{ if ge $src.Width "1280" }}{{ with $medium.RelPermalink }}, {{.}} 1280w{{ end }}{{ end }}{{ if ge $src.Width "1600" }}{{ with $large.RelPermalink }}, {{.}} 1600w {{ end }}{{ end }}"
{{ if .Get (print $medium) }} src="{{ $medium.RelPermalink }}" {{ else }} src="{{ $src.RelPermalink }}"
{{ end }} width="{{ $img.Width }}" height="{{ $img.Height }}" />
</noscript>
{{- if .Get "link" }}</a>{{ end -}}
{{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
<figcaption>
{{ with (.Get "title") -}}
<small>{{ . }}</small>
{{- end -}}
{{- if or (.Get "caption") (.Get "attr") -}}<p>
{{- .Get "caption" | markdownify -}}
{{- with .Get "attrlink" }}
<a href="{{ . }}">
{{- end -}}
{{- .Get "attr" | markdownify -}}
{{- if .Get "attrlink" }}</a>{{ end }}</p>
{{- end }}
</figcaption>
{{- end }}
</figure>
Как вытащить избранное изображение и как сделать, чтобы из него брались атрибуты ширины и высоты, а также как построить srcset?