GetPage from URL

Hi there. I’m using Hugo to create my website (let it be example.com for now). Each markdown file
under section posts,
under section life,

has the following frontmatter.

---
title: New
image: /images/new.jpg
related_posts:
  - link: https://www.example.com/posts/nice-post/
  - link: https://www.example.com/posts/nice-post2/
  - link: https://www.example.com/life/nice-post3/
---

My goal is to iterate over related_posts. Then for each link, I want to display a HTML link with image from it’s frontmatter.

Expected output

With reference to the above code, the output should be something like this:

<a href="https://www.example.com/posts/nice-post/"> <img src="/*image from the frontmatter of nice-post.md*/"/></a>
<a href="https://www.example.com/posts/nice-post2/"> <img src="/*image from the frontmatter of nice-post2.md*/"/></a>
<a href="https://www.example.com/life/nice-post3/"> <img src="/*image from the frontmatter of nice-post3.md*/"/></a>

How do I achieve this ?

What I know so far

{{ with .Params.related_posts }}
  {{ range . }}
        {{ $url := (index . "link") | safeURL }}
        <a href="{{$url}}> </a> 
  {{ end }}
{{ end }}

I also know that I have to use GetPage.
PS: Is there any better way of accessing front matter of another page instead of using this method ?

You cannot access the front matter of a published page because there is none.

The front matter is entered in the content files (markdown, HTML) and then consumed by Hugo so that the HTML (or another output format) is generated.

Sorry for lack of clarity. I meant frontmatter of example-post.md file.

Again, the Markdown is not published by Hugo, unless you specify a Markdown Output Format.

If you go down that route, then the only way to retrieve data from a remote URL is with the resources.GetRemote method.

Thanks again @alexandros for pitching in. I have modified my question to include all the details.

You are going about it in a very complex way.

It would be much simpler to use Hugo’s Related Content feature to display the link and the thumbnail of related posts on a post’s page, rather than trying to do, what you describe above, in the amended first post.

1 Like

I appreciate @alexandros for your suggestion. I am aware of related content in Hugo. The thing is that, I want fine grain control over what gets displayed on each page. That’s why I am storing related posts in frontmatter.

You can limit what is displayed by configuring related content according to your needs.

Anyway that is all I can contribute to your question.

Perhaps someone else may be interested in your approach and offer further insights.

1 Like

This is fundamentally the wrong way to do it, for a number or reasons:

  • The URL can can be affected by configuration (permalinks) and front matter (slug, url), but you’ve hardcoded the result.
  • By the same token, there is not an efficient way to perform a reverse lookup from URL to .File.Path, which is what you need in order to .GetPage

Instead…

---
title: Post 1
date: 2022-02-04T18:58:11.000Z
draft: false
related:
  - /post/post-2
  - /post/post-3
---

Then:

{{ with .Params.related }}
  {{ range . }}
    {{ with site.GetPage . }}
      <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
    {{ end }}
  {{ end }}
{{ end }}
3 Likes

Thanks a ton @jmooring for that suggestion. I just had another idea of doing this using urls.Parse | Hugo (gohugo.io) function. But in doing so, once again I am coming back to perform a reverse lookup from URL to .File.Path & the url path need not be equal to file path always.

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