Image thumbnail not displaying on Indiekit dashboard

[eclecticpassions]

Description of the bug

The image thumbnail isn't showing on the Indiekit dashboard. I use separate content store (store-github) and media store (store-s3 plugin).

The image loads and displays correctly when I click into the photo post or the file itself.

If I go into Firefox > Inspect > Inspector and click on the missing thumbnail, it says src="/assets/not-found.svg"

In the Inspect > Network tab, I see a 403 error for the image thumbnail:

Method: GET
Scheme: https
Host: indiekit-myblog.onrender.com
Filename: /image/s_240x240/https%3A%2F%2FBucketUrlSetInMediaUrlConfigFile.com%2Fcontent%2Fphotos%2F2026%2F0061.webp

If I visit the URL in the Filename line, https://BucketUrlSetInMediaUrlConfigFile.com/content/photos/2026/0061.webp, the image works, but right now, the src for the thumbnail image on Indiekit is joining the two, making https://<host><filename>, making it a invalid URL:

https://indiekit-myblog.onrender.com/images/s_240x240/https%3A%2F%2FBucketUrlSetInMediaUrlConfigFile.com%2Fcontent%2Fphotos%2F2026%2F0061.webp

Any ideas why?

Steps to reproduce

Use S3 object storage for media and upload a photo.

Expected behaviour

Should load the image with just the media url, not joined with host url and the additional /images/s_240x240/ string.

Environment

Render.com, Node 22.16, "@indiekit/indiekit": "^1.0.0-beta.25", "@indiekit/store-s3": "1.0.0-beta.26".

Additional context

Is it some config issue? My media paths in indiekitrc is in this format:

        "media": {
          "path": "content/photos/{yyyy}/{DDD}{n}.{ext}",
          "url": "https://bucketurl.com/content/photos/{yyyy}/{DDD}{n}.{ext}"

I've also set it to draft and published, but it doesn't make a difference.

---

Edit: IDK if this makes a difference to the problem, but the URL in publication > postTypes > photo (and notes) > media > url > is actually my CDN URL:

        "media": {
          "path": "content/photos/{yyyy}/{DDD}{n}.{ext}",
          "url": "https://cdn-for-bucket.com/content/photos/{yyyy}/{DDD}{n}.{ext}"

[eclecticpassions]

I think I might have some idea why this is happening. I need to set up the image resizing plugin and change the paths maybe to relative URLs, so the joining of the final thumbnail image URL is valid...

[eclecticpassions]

From what I understand:

1. media:url should be relative (instead of absolute of the CDN or bucketURL), e.g. "url": "content/media/{yyyy}/{DDD}{n}.{ext}"

2. This way, Indiekit will add the website's URL (publication:me) before the relative URL, e.g. https://yourwebsite.com/content/media/{yyyy}/{DDD}{n}.{ext}"`

3. But because I do not upload my media to the same location where the site files reside, the concatnated URL for the thumbnails fail.

   • It fails with the media:url set to the absolute URL of the CDN or bucket because the concatnation doesn't work with absolute URLs
   • It fails with the media:url set to relative because it concatnates to my publication:me URL where the images do not exist.

To fix this:

An option to set a separate "baseURL" (e.g. https://bucket-url.com, or https://cdn-url.com) for media URLs in cases when media store is not under the same location as "publication": {"me": "yourwebsite.com"}.
This way, the endpoint-image plugin can generate the thumbnails by using the + media:url = https://cdn-url.com/content/media/*

But I haven't figured out how or where to add this "separate baseURL" option. Is it supposed to be under a plugin (store-s3, endpoint-image, preset-hugo, post-type-photo) or under publication options?

I'd appreciate it a lot if anyone can help. Thank you!

---

Failing workflow:

Upload image on Indiekit > store-s3 plugin > s3 object bucket > CDN of bucket > endpoint-image plugin > concatnates the media:url with endpoint-image resize string > fails

[eclecticpassions]

Update

I figured a workaround in the meantime, before an option to add a separate media storage baseURL is added to Indiekit.

1. Use relative URL instead of an absolute URL to the media store (S3 bucket or CDN if using one) for "media": {"url":", e.g. from:

   "url": "https://cdn-for-bucket.com/content/photos/{yyyy}/{DDD}{n}.{ext}"
   

   to:

   url: "content/media/{yyyy}/{DDD}{n}.{ext}"
   

2. Now, Indiekit will generate an image URL in the front matter by concatenating "publication": {"me": "https://yourwebsite.com"} with the new relative URL in "media": {"url":" to form:

https://yourwebsite.com/content/media/{yyyy}/{DDD}{n}.{ext}

3. The image doesn't actually exist in the same location as your site files, because it's stored in a separate media store (S3 bucket --> served via a CDN in my case). But because I'm also using Bunny.net CDN for my Hugo site, I can set an Edge Rule to override-origin-url when it notices the pattern content/media/*.

4. I would still like to be able to have the links work without relying on this workaround—so if anyone or @paulrobertlloyd can guide me as to which plugin I could add this function to set a custom baseURL for separated media store image access, please let me know and I'll try to work on it. Thank you.

---

A note about Override Origin URL, explained by Bunny.net Support:

"Override Origin URL" is the name of the Action, use this instead of using a Redirect.