Help me think this challenge!

Hey guys — I hope you’re all well.

I am creating a location agency website, and I encountered an issue.

The context:

  1. My main collection list is called “Locais” and has many properties (houses, gyms, etc.);
  2. I have a 2nd collection list called “Características” which has different features (fireplace, bath, etc.);
  3. Each property has a multi-reference field to the categories. So, for example, if a house has a fireplace, I add the category “fireplace” to it.

The Issue:
On the overview page of the properties, I use the field “main image” of each item as a thumbnail. This is all fine. But when a user clicks on a specific category (example: fireplace), it shows all the properties with a fireplace, but their thumbnails are still the “main image”.

What I want:
When a user clicks, for example, “fireplace”, I want the properties to automatically assume the image that contains a fireplace as a thumbnail. So, on the category template pages, the thumbnails of each property should change depending on the category we are on.

The approach/My idea:
(please note I don’t know how to code)
I thought a good way of doing this could be through the Alt Text. For example, when I add images to each property, I can use the Alt Text as a way to tag them. The images with a fireplace would have the word “fireplace” as part of the Alt Text. And with code, make sure the thumbnail corresponds to the one containing the “current category” on the Alt Text. Would this work/makes sense?

If not, can you please help me finding out a solution for this? Ideally as dynamic/automatic as possible.

Thank you so much in advance.


Here is my site Read-Only: [LINK][1]