Обработка изображения в пределах диапазона в Hugo

Я пытаюсь применить некоторую обработку изображения к изображению, которое я получаю из метаданных страницы. У меня есть ряд сообщений, и это работает:

      {{ range sort (where .Site.Pages ".Params.layout" "playlist") ".Params.sort" }}
    <div class="w-full max-w-sm bg-gray-900 hover:bg-brand border border-gray-900 rounded-lg shadow">
        <a href="{{ .Params.permalink }}">
            <img class="rounded-t-lg" src='{{ .Params.cover }}' alt="{{ .Title }}" />
        </a>
        <div class="px-5 mt-4 pb-5 text-center">
             <span class="text-lg mt-8 text-gray-200">{{ .Params.description }}</span>  
        </div>
    </div>
{{ end }}

Итак, мое изображение доступно как{{ .Params.cover }}, но я не могу понять синтаксис, чтобы применить к нему некоторую обработку. Я могу получить доступ к URL-адресу изображения следующим образом:

      {{ $image := resources.Get .Params.cover }}
<p>{{ $image }}</p>

Я пытался изменить его размер несколькими способами:

      <img class="rounded-t-lg" src='{{  $image.Resize "500x" }}' alt="{{ .Title }}" />
      <img class="rounded-t-lg" src='{{ with $image.Resize "500x" }}{{ . }}{{ end }}' alt="{{ .Title }}" />

Я также пробовал за пределами<img/>элемент так:

      {{ $image := resources.Get .Params.cover }}
{{ $image := $image.Resize "500x" }}
<p>{{ $image }}</p>
<a href="{{ .Params.permalink }}">
    <img class="rounded-t-lg" src='{{ $image }}' alt="{{ .Title }}" />
</a>

Во всех этих случаях изображение рендерится, и я не получаю ошибок от Hugo, но в исходном размере (1080x1080), а не 500x500. Итак, что я делаю неправильно?

0 ответов

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