Hugo Page Bundles and images with no path

[kenmorse]

Hugo has a feature called page bundles where you can include images in the same folder as the HTML, rather than a separate static folder. This is nice in some cases because the html and pictures can be moved around together and the image paths don't need to be updated.

So for a page bundle, you might have something like this in your source:

![alt text](image.png)

instead of a full path to the image like this:

 ![alt text](/full/path/to/image.png)

This seems to be a problem for Pagefind though, as the search results panel won't have a full path to the image.

Anyone else run into this and/or have suggestions for a work-around?

[bglw]

Hey @kenmorse 👋

Ah, yes Pagefind hasn't considered relative URLs before, but this case is something that should definitely be handled. Off the top of my head, I don't know whether the indexing step should resolve these, or if it's a job for the UI — my gut says UI, though, since image URLs are technically just generic "metadata".

I'll create an issue for the UI frontends to resolve relative URLs to images automatically, but in the meantime here's a fix for the Default UI (if that's what you're using):

new PagefindUI({
    element: "#search",
    showSubResults: true,
    showImages: true,
    processResult: function (result) {
        if (result?.meta?.image) {
            let resultBase = new URL(result.url, window.location);
            let remappedImage = new URL(result.meta.image, resultBase);
            if (remappedImage.hostname !== window.location.hostname) {
                result.meta.image = remappedImage.toString();
            } else {
                result.meta.image = remappedImage.pathname;
            }
        }
    }
});

This ensures that all images are resolved relative to the URL of the page they were from, if they need to. URLs that are already absolute will flow through without being affected. Let me know if that code snippet works out for you 🙂

[kenmorse]

Hi @bglw – thanks very much for that info. I'm using the Pagefind API with my own UI but was able to reproduce the issue with the default UI too. I should be able to do something very similar to your snippet with the API I would think to remap a relative link to a full path.

[kenmorse]

In case anyone else is using the Pagefind API with Alpine.js, I used @bglw 's code above to go from:

<div>
    <img :src="searchResult.meta.image" :alt="searchResult.meta.image_alt" />
…

to:

<div
  x-data="{
    get imageWithPath() {
      let searchResultBase = new URL(this.searchResult.url, window.location);
      let remappedImage = new URL(this.searchResult.meta.image, searchResultBase);
      if (remappedImage.hostname !== window.location.hostname) {
        return remappedImage.toString();
      } else {
        return remappedImage.pathname;
      }
    }
  }"
>
    <img :src="imageWithPath" :alt="searchResult.meta.image_alt" />
…

We essentially replace the direct use of searchResult.meta.image (which could be a relative link) with the computed property imageWithPath.