Hugo server sometimes work with the same code

[Ajdegar]

With the same code below, hugo server works or not. When I try to start the server, there is error:

executing "partials/post-card.html" at <$src.RelPermalink>: nil pointer evaluating resource.Resource.RelPermalink

but when I remove $src variables, run the server - Hugo started and runs well - then retype the same code below and safe the file, Hugo still runs well. CTRL+F5 in the browser, still Hugo runs well. Then when I want to restart the Hugo server, that error shows up again.

partials/post-card.html

<article class="post-card">
    <div class="featured-image">
      {{ $src := .Resources.GetMatch .Params.image }}
      <a href="{{ .RelPermalink }}" class="card-link" aria-label="{{ .Params.title }}"></a>
      <img alt="{{ .Params.title }}" src="{{ $src.RelPermalink }}"/>
    </div>
    <div class="about-post">
      <div class="tags">
        {{ with .Params.tags }}
        {{- range first 1 . -}}
        <a class="tag-wrapper" href="/subject/{{ . | urlize}}/">{{ . }}</a>
        {{- end -}}
        {{ end }}
        <div class="break"></div>
        {{ with .Params.tags }}
        {{- range first 2 (after 1 . ) }}
        <a class="tag-wrapper" href="/subject/{{ . | urlize}}/">{{ . }}</a>
        {{- end -}}
        {{ end }}
      </div>
      <h2 class="post-card-title"><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
      <p class="post-summary">{{ .Summary }}</p>
    </div>
  </article>

the page uses partials/post-card.html:

<section>
    <div class="latest-posts-section">
      <div class="loop-wrap">
        {{- $paginator := .Paginate .RegularPages -}}
        {{ if $paginator }}
        {{- range $paginator.Pages -}}
        {{ partial "post-card.html" . }}
        {{ end }}
      </div>
      <div class="break"></div>
      <div class="pagination">
        <a href="{{ .RelPermalink }}page/2/" aria-label="Load more" style="display: none;"></a>
        <button class="button-primary">Load more</button>
      </div>
      {{ end }}
    </div>
</section>

Hugo on Windows

[idarek]

It’s not a Hugo bug. Hanging in the layout file sometimes (not always) requires stopping hugo server and starting again. This is why when you save the layout, Hugo is not re-evaluating it in full until you run it again.

[steppa]

What if you do this instead

{{- with .Resources.Get .Params.img }}
<img alt="{{ .Params.title }}" src="{{ .RelPermalink }}"/>
{{- end }}

[Ajdegar]

It passes image indeed, but img ALT is empty.

[steppa]

Try this

{{- $Title := .Params.title }}
{{- with .Resources.Get .Params.img }}
<img alt="{{ $Title }}" src="{{ .RelPermalink }}"/>
{{- end }}

If you want to resize the image…

{{- $Title := .Params.title }}
{{- with .Resources.Get .Params.img }}
{{- with .Fill "500x362" }}
<img alt="{{ $Title }}" 
  src="{{ .RelPermalink }}" 
  width="{{ .Width }}" 
  height="{{ .Height }}" 
/>
{{- end }}
{{- end }}

Chnge the dimensions 500x362 to your liking. To convert to webP,replace it with 500x362 webp.

@Ajdegar I edited the code to include image dimensions (width and height).

[Ajdegar]

Bingo!