How to list images/resources from multiple related pages?

This is an extension of the previous question How to display an image from a “related” page. The issue is very similar, but dealing with an array of related pages rather than a single one, it seems much more difficult.

Specifically, I want to display the thumbnail images and names of multiple authors of an article. The authors are referenced in the article frontmatter by uuid, not name:

---
title: "Article Title"
contributors: [8871, 11302]
---

Each author has its own page bundle with frontmatter like this:

---
title: "Jane doe"
avatar: "jane_doe.jpg"
uuid: 8871
---

How can I display a list of all author avatars and names, each linked to their own author page in my article/single.html layout?

Assistance greatly appreciated!

I am far from a professional but in the footnotes I include this:

{{ $p := first 3 (union (apply .Params.relatedPages “site.GetPage” “.”) (where (site.RegularPages.Related .) “Params.bookHidden” “!=” true)) }}
{{ range $p }}

So assuming your author pages are in their own section, this should do the trick:

{{ $p := where (where .Site.Pages
 "Section" "Authors") "Params.uuid" "in" .Params.contributors }}
{{ range $p }}
<p>{{.Title}}</p>
<img src="{{relURL .Params.avatar}}">
{{end}}
1 Like

The @regis article is for you: Better Relationships in Hugo | Regis Philibert

1 Like

thanks for this article, I had found the lack of information about .RelatedIndices on gohugo mildly unhelpful…
Very good semantic, intelligent function, what I expect from a modern program !
But in his case I’m not sure it would be any faster or simpler than a simpler where. But more scalable, of course. Also, is it a case where this system is not used / does not take time when you don’t ask for it?

1 Like

Thank you for this article. My understanding is that to use Hugo’s Related methods the related pieces of content must share a common Page.param that relates them. In my case, I want to relate contributors: to uuid:. Am I missing something?

Thank you for the reply and suggestion! This looks wonderfully simply and intuitive, but unfortunately it’s not working for me.

but it should. publish the error messages. How are your pages structured ? Of course the code depends on it. Please show the arborescence of your content directory (use the command “tree”)

1 Like

I’m not receiving any error message, just not returning any results… not sure why.

No problem, given the patience the elders of this place had for me, now I can return the favors for those less experienced than me. For my code to make a bit of sense, you need your content to be structured like this:

/project/content
 ├──􀀂  docs 
 │  ├──􀀂  Authors 
 │  │  ├──􀇱  _index.md 
 │  │  ├──􀇱  author1.md
 │  │  ├──􀇱  author3.md
 │  │  └──􀇱  author2.md
 │  └──􀇱  .index.md  
 └──􀇱  .index.md

Also, rectification:
use .Site.Pages, not .Pages
.Pages is an alias for .Data.Pages meaning it only looks under your current page context. so it’s not gonna see anything of course.

1 Like

Very grateful for your help with this! Here is my content structure:

/project/content
 ├──􀀂  articles
 │  ├──􀇱  _index.md
 │  ├──􀀂  Article Title
 │  │  ├──􀇱  index.md 
 │  │  ├──􀇱  featured_image.jpg
 └──􀇱  contributors
 │  ├──􀇱  _index.md
 │  └──􀀂  Jane Doe
 │     ├──􀇱  index.md 
 │     ├──􀇱  jane_doe.jpg

Ok, what about this ?

{{ $p := where (where $.Site.Pages
 "Section" "contributors") "Params.uuid" "in" .Params.contributors }}
{{ range $p }}
<p>{{.Title}}
<img src="{{relURL .Params.avatar}}">
{{end}}
1 Like

Yay! This is correctly getting the .Title but it’s returning broken links for the images…

I must say I’m never sure how to write image urls since I only ever use global assets.
give the html code so I can correct. I think {{ .Params.avatar }} would suffice.

1 Like

Ok, I got it to work with the following:

{{ $p := where (where .Site.Pages "Section" "contributors") "Params.uuid" "in" .Params.contributors }}
 {{ range $p }}
 {{ $image := .Resources.GetMatch .Params.avatar }}
 <p>{{.Title}}</p>
 <img src="{{ $image.RelPermalink }}">
 {{end}}

Thank you again so much for helping solve this!

You are right!

Is it possible to change à param name? For example, Régis changed id → novel. Cf. Better Relationships in Hugo | Regis Philibert

1 Like

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