Dynamic Thumbnails Based on Jetboost Filters – CMS API Approach?

Developers Developer APIs
1

Hi guys,
Please note that I’m not a programmer, but I’ve been researching a LOT about this.

This is the website we’ll be referring to:
:backhand_index_pointing_right: Belmira - Locations for film, photography and events

What I want:
I’d like the thumbnails of the locations to change depending on the selected Feature filter.
For example, if a user selects “fireplace”, the thumbnails should update to show the images that include a fireplace.

What I believe could work (after many conversations with ChatGPT):
Using the CMS API in read-only mode, and writing custom code to access the native Gallery field I have in each item of the Locations collection.
Then, by targeting the image via alt text (e.g., an image with “fireplace” in the alt text), we could dynamically display that image when the user applies the corresponding filter.

The Problem:
ChatGPT tells me that to do this, I need to use a third-party server (like Vercel or Cloudflare).

My question:
Am I on the right track here? Is ChatGPT guiding me in the right direction?
I’d really appreciate your input to better understand if this is a feasible and efficient approach.

Thank you so much!

2

You need 3 things;

  1. A way to tell when the filter has been changed, after the results have been updated
  2. A way to store multiple tagged images for each card, only one of which shows at a time, with a default (1st?) showing initially.
  3. A way to determine the selected filter, and to “change” the image that’s appearing.

On #1, I’m not aware of any API or events that Jetboost provides. Finsweet Filter v1 did. Finsweet Filter v2 might, but you’d have to check. You might contact some support departments. Worst case you may be able to use JS with a mutationobserver, but it will take some R&D to make it solid, if it even works.

On #2, that’s relatively easy using CSS and a multi-image field for up to 10 images per card. Alt text is a good approach BUT Webflow had a bug here where the alt text is blank in multi-image lists, I’d test that first.

On #3, that’s custom code that fires when your change event triggers.