How to get author image from headless setup?

Hello there,

My goal is to display the author’s image and name in posts without having to create separate author pages. This is the current configuration.

content/authors/john-d/index.md

---
name: John D
nickname: null
bio: null
image: profiel-picture.jpeg
headless: true
---

I’m using {{ .Params.authors}} for the name, which yields the proper name. When it comes to resizing the photographs, I’m failing miserably. What’s the issue with this code?

{{- $image := .Site.Params.authors.image }}
{{ $image40 := $image.Resize "40x" }}
{{ $image40webp := $image.Resize "40x webp" }}

The author’s name is provided in the post front matter, so that makes it really easy for the image. I have to add the image url of the author in each post, or I can fetch it directly from the author’s front matter and resize and reformat images.

Thank you in advance for taking the time to help.

What is the error message you get ?

To resize images I use this code in my partials :

  {{ $asset := resources.Get .image  }}
  {{ $img := $asset.Fit "1900x340" }}

To resize an image you have to Get it first, as a resource to access the methods (Resize, Fit etc…)

I am usually good at using Hugo image processing but I am unable to understand how can I get the image resource from a headless author file. the error I get is execute of template failed: template: partials/blog-card.html:37:44: executing "partials/blog-card.html" at <.image>: can't evaluate field image in type *hugolib.pageState

# line 37
{{- $image := resources.Get .image }}

the resources get works when I am getting an image from the same page but now the image is in content/authors/author/index.md

this is where I am confused for last 2 days and not sure what I am doing wrong I have tried several methods including your {{- $image := resources.Get .image }} & {{- $image := .Site.Params.authors.image }}

Not sure how can I access a param value from the author front matter

thanks

A global resource is a file:

  • Within the assets directory, or
  • Within any directory mounted to the assets directory, or
  • Located on a remote server accessible via http or https

Make sure that you have stored your images in the asset folder.

For instance if you have this link inside your frontmatter :

image : "services/my_image.png"

make sure the image is stored in :

assets/services/

if the image link is at the first level in your frontmatter. use this :

{{ $asset := resources.Get .Params.image }}

If the image is at an other level, for instance if you image is under the object object_root :

object_root :
    image : "services/my_image.png"

to get the image you should use this :

{{ $asset := resources.Get .Params.object_root.image }}

you can also use a scope :


{{ with .Params.object_root }}

this way you can access the image with :

{{ $asset := resources.Get .image }}

2 Likes

Hi @Cloud-Forge

the params.image works normally but here is the content directory structure

content/
├── authors/
│   ├── John-d/
│       ├── profile-image.jpg
│       └── index.md
|
├── blog/
│   │   ├── feature.jpg
│   │   └── index.md
│   └── _index.md
└── _index.md  <-- home page

# content/authors/john-d/index.md
---
name: John D
nickname: null
bio: null
image: profile-image.jpg
headless: true
---

Now on the homepage I have a blog card where I want to display the author image I cannot use simple resources.Get .image as the author image is inside the authors directory. I need to telll the Hugo to get the image value for the author from the front mater of that authors.md file.

thanks for taking the time.

ok so in your case the images are pages resources,
to access an image as a page resource:

{{ $image := .Resources.GetMatch "sunset.jpg" }}

See the example here :

The Get keyword is for global resources stored in the asset folder.

1 Like

Hi @Cloud-Forge

it is not exactly page resource as the page is the home page or post page and the image is defined in the author directory which have headless: true. The {{ $image := .Resources.GetMatch "sunset.jpg" }} is really helpful at the blog posts. the author picture cannot be hard coded as there will be more than 1 author and the blog card need to fetch the author image from the author front matter

there is a dedicated .md page for each author and author is also defined in the post front matter. but it makes no sense to add all the author info at each posts front matter. I suppose to access the author info from the content/authors/john-d/index.md file.

but I am failing in my attempts, how do you manage the authors in Hugo I read mostly outdated content and now I am lost with not knowing what I am doing wrong or what I need to do.

thanks

https://discourse.gohugo.io/t/list-of-content-on-homepage-with-resources-headless/38133/2

1 Like

For me an easy fix would be to store your author images in the asset folder (so the “global resources” way):

{root_folder}/assets/authors/

this way you could access you author images with the Get function, as global resources.

1 Like

Hi @jmooring

this example is still asking for an image url which I cannot add as for each author the image will be different dynamic based on the author. this is my current image processing

{{- $image := .Site.Params.authors.image }}

                {{/* mobile */}}
                {{ $image40 := $image.Resize "40x" }}
                {{ $image40webp := $image.Resize "40x webp" }}
                {{/* larger mobile */}}
                {{ $image80 := $image.Resize "80x" }}
                {{ $image80webp := $image.Resize "80x webp" }}
                {{/* Tablet - Mobile 2x */}}
                {{ $image120 := $image.Resize "120x" }}
                {{ $image120webp := $image.Resize "120x webp" }}

                <picture>
                    <source
                        srcset="{{ $image40webp.RelPermalink }} 3x, {{ $image80webp.RelPermalink }} 2x, {{ $image120webp.RelPermalink }}"
                        type="image/webp">
                    <source
                        srcset="{{ $image40.RelPermalink }} 3x, {{ $image80.RelPermalink }} 2x, {{ $image120.RelPermalink }}"
                        type="image/jpeg">
                    <img class="h-10 w-10 rounded-full" src="{{ $image.RelPermalink }}" alt="">
                </picture>

and this is the card layout which I am using

thanks for taking the time to help


A work around is to add

author: 
image:

in each post but it makes no sense to have authors directory with the required data already provided.

This points to a value in your site configuration, not to a content page.

If you need further assistance, post a link to the public repository for your project.

1 Like

this is one of the many desperate attempts from reading posts online. Seems like I am doing something not the correct way. Should I have authors directory or should I move this to data/ folder or the config.yaml file etc.?

I just want author name & image should I consider just moving it to the data folder instead. what is the Hugo recommended way of managing authors without generating custom pages for each author.

thanks

My author pictures are stored in

assets/blog/

front matter :

author_thumb = "blog/layla.jpg"

in the partial :

{{ $asset := resources.Get .Params.author_thumb }}

1 Like

So, in each post, you’re defining your author image? This doesn’t appear to be a particularly efficient way, since assume you need to update the picture or image url, or you have ten authors, and you now have to remember to add the front matter with the proper image url for each of them.

I was under the impression that the objective of Hugo authors was to identify an author once and then use the data, such as images, names, and bios, by just defining the author name in the post front matter. :frowning:

Thank you for sharing your method @Cloud-Forge

I disagree, when someone, say an author, is writing a piece, or an article, doesn’t he sign it at the end ? here, in my case, it’s the same, if someone of my team is writing something, he signs his or her, work. I don’t really understand your concern about efficiency here ? I don’t have to juggle with folders or complicated setting :
Each posts are in the blog folder,
Each blog articles are signed with there respective authors name / picture.

Pretty simple and quite logical.

Then again, I am not here to tell you what to do. I wanted to merely try to help you with your picture problem…

1 Like

Hi @Cloud-Forge

The site have around 6000 pages and there are around 100 authors most of them written 1-3 blogs but a few have 100’s now I have to add an image url and bio for each author manually on each post.

On the home page I also use sliding blog cards and those cards have author image which I am unable to generate as I am unsure how can I tell Hugo to get the picture of the author defined in the front matter in the content/authors or in the data/authors

My understanding is if I have already provide data either in data or content folder I should be Abel to access and use it instead of repeating the same step again and again on each post.

structure
assets
└── images/
    ├── jdoe.jpg
    └── rsmith.jpg
data
└── authors.json

data/authors.json
{
  "jdoe": {
    "bio": "Mr. Doe is an expert in the field of...",
    "name": "John Doe",
    "image": "images/jdoe.jpg"
  },
  "rsmith": {
    "bio": "Dr. Smith is an emeritus professor of mathematics...",
    "name": "Dr. Robert Smith, PhD",
    "image": "images/rsmith.jpg"
  }
}

content/post/test.md
+++
title = 'Test'
date = 2022-04-10T12:21:53-07:00
draft = false
author_id = 'jdoe'
+++

template
{{ with .Params.author_id }}
  {{ with index site.Data.authors . }}
    Name: {{ .name }}<br>
    Bio: {{ .bio }}<br>
    {{ with .image }}
      {{ with resources.Get . }}
        {{ with .Resize "200x webp" }}
          <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
        {{ end }}
      {{ end }}
    {{ end }}
  {{ end }}
{{ end }}
5 Likes

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