Dynamically display image of posts

support
1

I’m trying to build a template that lists only the posts with a image parameter.

So far I’ve sorted the logic to only include posts with image, but I can’t quite figure out how to link to that image. Here is my list.html

{{ define "section_content" }}
<article class="flex-container">
    {{ .Content }}
</article>

{{ $keepAspectRatio := default false .Params.keepAspectRatio }}
<div class="grid {{ cond $keepAspectRatio "keep-aspect-ratio" "" }}">
  {{ range .Data.Pages }}
  <a href="{{.RelPermalink}}">
      {{ with .Params.image }}
      {{ $image := $.Params.image.Fit "600x600" }}
      <img
        style="height: 90%;
        width: 100%;
        object-fit: cover;
        display: block;
        overflow: hidden;"
        src="{{ $image.RelPermalink }}"
        alt="Project Image Missing">
        {{.Params.title | markdownify}}
      {{ end }}

  </a>
{{ end }}
</div>

{{ end }}

There are two problems here. Firstly, this line src="{{ $image.RelPermalink }}" doesn’t seem to work. Secondly, Hugo doesn’t like me putting {{.Params.title | markdownify}} before the {{end}}. What’s the proper way to refer to the post title here?

For info, in the post I have image: "/images/900-2.jpg" in my YAML.

2

In your snippet .Params.image variable is a string, not a resource, so you cannot use .Fit or .RelPermalink on it.

You need to get it as a resource, then use .Fit, something like:

:warning: I haven’t tested this code

{{ with .Params.image }}
{{ $resource := resources.Get . }}
{{ $image := $resource.Fit "600x600" }}

...

<img src="{{ $image.RelPermalink }}">
{{ end}}

You could even simplify both variables $resource and $image with:

{{ $image := (resources.Get .).Fit "600x600" }}

I would suggest to take a look to Hugo Pipes:

Just use {{ .Title | markdownify }}, you can read more about the available variables in the following link:

3

Thanks.

After changing my code to

{{ with .Params.image }}
      {{ $resource := resources.Get . }}
      {{ $image := $resource.Fit "600x600" }}
      <img
        style="height: 90%;

I still got this error:

<$resource.Fit>: nil pointer evaluating resource.Resource.Fit

It seems like Hugo can’t locate my image for some reason?

The image in my example is stored here: /static/images/900-2.jpg

4

Ok, now I’m confused what you are doing.

The docs states that content inside the static/ directory is copied as is.

If you need to process the image, it should be placed inside the assets/ directory, or the one you’ve specified in your configuration file for the key assetDir.

assets/images/900-2.jpg

Take a look to the Hugo Pipes Introduction from my previous message.

5

Thanks. I’m still quite new to all these. Now the image problem is sorted. The title issue is still there.

<.Title>: can't evaluate field Title in type string

If I put {{ .Title | markdownify }} outside {{end}} it works. But that’s not exactly what I want. So how do I access the page variable while I’m inside the with loop?

6

You can’t call a file in static via resource functions. Resources belong into or below the folder of the markdown file. For working on files in static you need to use the imageConfig function.