Unable to make images show in related section

support
1

Hi, how are you?
I need some help.
I am trying to setup a related section beneath every post but I can’t get images to show. I’ve tried different things but I keep failing. Here’s the code.
The title and date all work as they should but the images don’t show up

{{ $related := .Site.RegularPages.Related . | first 3 }}
			{{ with $related }}
			<h4 class="related title">Related Articles</h4>
<div class="row">
			{{ range . }}
			<div class="col-lg-4">
				<div class="blog-preview__item">
					<div class="blog-preview__item-thumb">
						<a href="{{ .Permalink }}"><img src="{{ .Params.hero | absURL }}" alt="featurepost-image"></a>
					</div>
					<div class="blog-preview__item-content bg-white">
						<span class="small">{{ .PublishDate.Format "January 2, 2006" }}</span>
						<h5 class="mb-0">
							<a class="text-dark" href="{{ .Permalink }}">{{ .Title }}</a>
						</h5>
					</div>
				</div>
			</div>
			{{ end }}
		</div>
		{{ end }}

NB:
Actually, I just noticed that the code pulls pages from different sections but seemingly fails to pull from the blog section. I want it to pull them strictly from the blog. I also want it to only show the related articles when they are available

2 
{{ $related := .Site.RegularPages.Related . | first 3 }}

should be (untested)

{{ $blogPosts := where .Site.RegularPages "Type" "blog" }}
{{ $related := $blogPosts.Related | first 3 }}

For the first part of your query:

For that we need to know what .Params.hero is evaluating to, as well as your site structure (and if you have any render hooks that alter the way images are handled).

See Requesting Help

3

Hi sir. SInce pasting code may cause a long message. Here’s my website: https://stephenajulu.com and here’s my repository: GitHub - stephenajulu/stephenajulu.com7: Stephen Ajulu's Personal Website and Portfolio built with Portio and Hugo.

My desire is to add a Related Posts section just under the comments where visitors could read more articles. I want it to strictly work on my blog as I have 3 other sections. The {{ .Params.hero }} doesn’t show anything but the alt and the image icon(which is supposed to show when the image was not found.) I’ve tried adding $ like this: {{ $.Params.hero }} but it displays the current post’s image, I’ve tried adding {{ $related.Params.hero }} and it fails to deploy, I’ve even tried {{ .Params.hero | absURl }}. But nothing works. hero is supposed to show the related article’s hero as that’s the frontmatter parameter used in the markdown file. Could you kindly help me. I’ve deleted the related.html partial(used to show 3 related posts) as my site couldn’t deploy with the code you gave me.

4

layouts/blog/single.html

{{ partial "comments.html" . }}
{{ partial "related.html" . }}

layouts/partials/related.html

{{ range (where site.RegularPages "Type" .Type).Related . | first 3 }}
  {{ if .Params.hero }}
    <a href="{{ .Permalink }}"><img src="{{ .Params.hero | absURL }}" alt="featurepost-image"></a>
  {{ end }}
{{ end }}
2 Likes
5

@jmooring Beat me to it! But one question, shouldn’t it be .Params.hero? The frontmatter has (for example):

hero: "/images/brooke-lark-nmffl1zjbw4-unsplash.jpg"
1 Like
6

Yes, edited response. It works regardless because the key is lowercased.

2 Likes
7

Thank you so much

8

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