I have a client that needs a redesign of their portfolio site. They’re an artist, and they have an extensive archive of images and projects they want to host.
At the most basic functionality, they want users to be able to search to find a project, by search query or by clicking a tag (concept art, sci-fi, fantasty, vehicles, etc). Each tag would take the user to a page listing the projects tagged by that category. No problem, this is easy to achieve in Webflow…
BUT, they would love images within the projects to also be searchable and/or tag-able. So say you search “Vehicles”. Instead of just a list of projects tagged “Vehicles” and having to click them to find the 1 or 2 vehicles among the 30 artworks in the project, the user would also see a gallery of all images within ANY project tagged “Vehicles” (without having to click into the project).
Any tips on how this could be achieved? Does Webflow search index alt text on images? Can I have search results show only images that match the query based on an alt text?
And is there a way I can assign tags to images within projects, so clicking a tag would take me to a page listing all images with that tag, regardless of project?
Any help with how I can best organize this in the CMS and with search indexing would be huge. Thanks!
Hey @helmsmith
Here’s a way you can solve this only using CMS collections and lists. Now I can’t preview the search results without hosting, but I don’t foresee any issues on that part. It was a fun challenge 
and something I’ve thought about before. This setup will allow a lot of flexibility for the client with no limit to the number of photos per project. Well… up to 100 because that is all that collection lists support. You can always add more lists and use the “limit” feature to go higher. 
Site structure.
Collections
We can use multi-reference fields to “tag” both photos and projects. Then for the projects I used a single-reference field to get a hero image then a multi-reference field to bring in all of the photos for that project.
The main description is rich text that comes before all of the photos on the template page. Then the list of photos is populated underneath with each one having it’s own rich text to complete the project page. Do note that the order items are added to the multi-reference is the order in which they will appear on the project page. It might be good to add a “conclusion” rich text to end the project page.
Then here is the photo collection fields.
Everything works. I’m able to easily navigate between related projects, photos, and tags. The navigation and search will just be extra sauce to complete the UX.
Here is the published link. https://cms-photo-project-library.webflow.io/
Here is the share link. Webflow - CMS Photo Project Library
Homepage
Project Page
Photo Page
Tag Page
Here is some ways you can connect the fields inside the collection search settings. Currently it won’t be possible to show any photo results on tags unless a single-reference field is created to assign a “hero” photo for each tag which is easily doable.
Hope this helps. Let me know if you have any questions.
3 Likes
This is amazing! Wow, thank so much for taking the time. I’ll reach out if I hit any snags but it looks like it might just work!
1 Like
Hi there! What about multi image uses?
I have a client, and we’re wanting to show, live, or current projects, which we want to pull from the overall gallery. We just want to create the gallery, as a database of sorts, so we don’t lose all of those images, and there is always a page for them for Future leads/customers
