Conditional variable assignment thumbnail image post-meta preview

I followed this link to add images to previews of posts on list pages:
https://discourse.gohugo.io/t/cant-seem-to-add-images-to-blog-summary-ananke-theme/20071

That worked out fine. When I add a conditional to set the variable it doesn’t set the variable.

Here’s the code that works:

<!--post-meta title and thumbnail-->
<a class="title post-meta-styling" href="{{ .Permalink }}">
<div class="d-lg-flex flex-row   post-meta-styling">
<!-- thumbnail div -->

{{ $featureImage := .Params.featureImage }}

<div class="thumb-img col-lg-2 " style="background-image: linear-gradient(rgba(0, 0, 0, 0.15),rgba(0, 0, 0, 0.15)), url('{{ $featureImage | absURL |safeCSS }}');"></div> <!--end thumbnail div-->
<div class="col-lg-6 text-center text-lg-left   align-self-center">
<h2>{{ .Title }}</h2>
</div> <!--end title-->
</div>                          <!--end dflex-row-->
</a>                            <!--end post-meta title and thumbnail-->

When I add the conditional, instead of just the assignment of {{$featureImage := .Params.featureImage}}, it no longer works ($featureImage gets an ‘undefined’ error)

{{if .Params.featureImage }}
{{ $featureImage := .Params.featureImage }}
{{else}}
{{ $featureImage := .Site.Params.heroImage }}
{{end}}

The error is the same using “isset” or “with” and later {{.}}.

The goal here is to assign a link to the .featureImage variable set in each post’s front matter,
or an image based on the posts Type (so the Type of the post described in the post-meta, not the Type of the list page listing the post previews) , or if nothing else works a fall back to the a hero image variable set in the config. The Types are set with directories in the content directory, and work in other code.

{{if .Params.featureImage }}
{{ $featureImage := .Params.featureImage }}

{{ else if (eq .Type "motivation") }}
{{ $featureImage := .Site.Params.motivationImage }}

{{ else if (eq .Type "science") }}
{{ $featureImage := .Site.Params.scienceImage }}

{{ else if (eq .Type "categories") }}
{{ $featureImage := .Site.Params.categoriesImage }}

{{ else if (eq .Type "tags")}}
{{ $featureImage := .Site.Params.tagsImage }}

{{ else if (eq .Type "books")}}

{{ $featureImage := .Site.Params.booksImage }}

{{ else if (eq .Type "current")}}
{{ $featureImage := .Site.Params.currentImage }}

{{ else if (eq .Type "archives")}}
{{ $featureImage := .Site.Params.archivesImage }}

{{else}}
{{ $featureImage := .Site.Params.heroImage }}
{{ end }}

Other than the scoping of the .Type variable, it should be straight forward (if not a long-winded version), of course because of the early error I’ve yet to see if the type business falls through.

Anybody know what’s going on here?

You are defining your variable inside the if block; so it is not available outside of it.

{{ $featureImage := .Site.Params.heroImage }}

{{if .Params.featureImage }}
{{ $featureImage = .Params.featureImage }}
{{else}}
...
{{end}}

I actually tried that (though I still want some kind of award when the answer is sorted :sunglasses: )

It sets every image to .Site.Params.heroImage, so the if block doesn’t execute at all.

Make sure you are using = (equal sign) inside the if block, not := (colon + equal sign).

If you are and it is still not executing, you will have to share your site code so we can reproduce.

Also, what version of Hugo are you using?

1 Like

That worked. Thanks hugely. :+1: Still reading through the Templates Introduction.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.