Relative path to featured image in page bundle not working

[metbril]

I use page bundles for my articles. The featured image is applied through front matter. The theme currently supports this with the featuredImage front matter parameter.

When adding the front matter, my featured image is not shown as expected.

Both featuredImage: some-image.jpg and featuredImage: ./some-image.jpg are rendered as <img src="/some-image.jpg" alt="">.

My expectation is, that the path is rendered as specified, so <img src="some-image.jpg" alt=""> and <img src="./some-image.jpg" alt=""> respectively.

[igor-baiborodine]

@metbril, could you please confirm that the main issue here is that the featured image, defined via the front matter variable featuredImage with a relative path in a page bundle, is not shown at all?

[metbril]

I can confirm it is not shown at all.

The tag currently refers to the root of the site, but should refer to /path/to/page/bundle/some-image.jpg or a relative address.

front matter:

---
title: "Genieten van De Nes"
slug: "genieten-van-de-nes"
date: 2022-02-13T22:29:00+01:00
author: Robert van Bregt
tags: [buiten,wandelen,route,track]
categories:
  - Buiten
featuredImage: "nespolder-minibrug.jpg"
---

rendered page:

    <div class="featured-image">
        <a href="http://localhost:1313/posts/2022/02/genieten-van-de-nes/">
            <img src="/nespolder-minibrug.jpg" alt="">
        </a>
    </div>

screenshot:

page bundle:

[igor-baiborodine]

@metbril, in README, I added a new section named Featured Image:

In your case, the image path is not relative to the base URL. That's why it is not working. When using the page bundle, you can use the featuredImage front matter variable, but in this case, the featured image will not be cropped and resized.

Please see these test articles I created back then on the Bilberry Sandbox:

• Article 1
  https://github.com/igor-baiborodine/bilberry-hugo-theme-sandbox/tree/master/content/article/test-featured-image-resizing
  https://www.bilberry-sandbox.kiroule.com/article/test-featured-image-resizing/

• Article 2
  https://github.com/igor-baiborodine/bilberry-hugo-theme-sandbox/tree/master/content/article/test-featured-image-resizing-via-front-matter
  https://www.bilberry-sandbox.kiroule.com/article/test-featured-image-resizing-via-front-matter/

[metbril]

Too bad you have closed this issue. I still believe that the current way it works for page bundles is not how it should.

Page bundles are intended to be self contained. So relative addressing should be possible. This is how most other themes work.

In bilberry when you currently change the permalink structure, for example, absolute paths would need to be changed in the front matter.

The workaround should be to just copy any featured image to one with the hard coded filename, but then I would have 2 copies of that image in my file bundle when I need that somewhere else in the post with a regular filename.

In the current featured-image.html partial, only one line should need to be changed from

            <img src="{{ .Params.featuredImage | relURL}}" alt="">

to

            <img src="{{ .Params.featuredImage }}" alt="">

to make it work.

What is the purpose of the relURL?

[andreagrandi]

I'm having the same issue and honestly I'd rather change the template (thanks for suggesting how) than my content. I'm trying to migrate from Pelican to Hugo and I'm finding it very unusual (and not good practice, imho) that each theme has to re-define its own way of configuring very common stuff (like social links, footer copyright information, open graph metadata etc....)

[igor-baiborodine]

@andreagrandi, here is how you can change the template for the featured image:

1. Copy the v4/layouts/partials/featured-image.html file from the Bilberry Hugo theme to <your-website-root>/layouts/partials/featured-image.html:

2. Modify the copied template as needed:

[igor-baiborodine]

@metbril, you can read more on the relUrl function here.

As for the relative URLs in your particular case, you can set the relativeUrls property to true in your configuration file to rewrite all relative URLs to be relative to the current content. Here is the Hugo documentation on this property.

I made a quick test in my local dev with the Bilberry Sandbox:

I'm moving this issue to Discussions since it can be helpful for other users.

[metbril]

It's been some time since, but I'm still going to try the relativeUrls parameter. Thanks so far.