How to list images/resources from multiple related pages?

support
1

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!

2

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
3

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

1 Like
4

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
5

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?

6

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

7

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
8

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

9

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
11

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
12

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
13

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

14

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
15

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!

16

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
18

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