Избранное изображение Хьюго с атрибутами

У меня есть код на сайте Хьюго. В шаблоне single.html я вывожу этот код.

      {{- /* Featured image */ -}}
{{ with .Params.featuredImage }}
<div class="featured-image">
    <figure class="image">
        <img class="lazyload" src="{{ . }}" alt="{{ $.Title }}" />
    </figure>
</div>
{{ end }}

Отвечает за вывод основного изображения поста с помощью записи во фронтматерном *.md файле поста. Код работает, но хотелось бы его улучшить -

  1. Добавьте атрибуты srcset
  2. Добавьте атрибуты ширины и высоты.

Я еще плохо знаю Хьюго. Но у меня есть шорткод 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?

0 ответов

Другие вопросы по тегам