EDIT: I’ve found this previous post tackling a similar issue, and Vincent, a community contributor, suggested to create an independent CMS collection to house the multi-image field. I’ve tried this, but it’s the same issue as before of trying to connect a referenced cms multi-image field. Referencing multi-image field from one collection in another one
Good evening everyone. I’m working on a website for a promotion company and trying to add images of the venue on the event pages. My “Parties” CMS collection has a reference field to assign a “Venue”, which contains a multi-image field where I’ve uploaded images of the venue.
When I go to the “Parties” CMS Template page, I’m not able to attach the venue images to the page. I’ve tried creating a collection list on the page and attach the ‘multi-image’ field, which works for the “parties” multi-image that I have, but the option is not available for the attached venue.
I assume this is because you cannot pull a multi-image field from a referenced CMS collection. I’ve I thought I might be able to use Finsweet Attributes, but you can’t use CMS nest on a Template page - it’s noted in their documentation and it breaks.
How could I accomplish this functionality so that my parties page will showcase a list of images from the connected venue? I really appreciate it!
Yeah this is a bit of an ugly one.
These are the options I’ve used;
JUST LINK
You’d promo the venue, but then encourage people to click the venue to view the details from the venue page. Otherwise, no venue photos on the party page.
AJAX THE PHOTOS
Use javascript and AJAX to clone over the photo gallery from the separate Venues page. This works well especially if you want to merge the two photo galleries together to “backfill” parties that don’t have party-specific photos.
USE ADVANCED FILTERING
Use a separate collection list on the page to render all Venues, with a nested one for the galleries. Use script to filter it so that only the venue matching the party actually shows, and the rest is hidden.
Thanks for your response. It’s strange this is not more straightforward, but nonetheless, I found your ‘USE ADVANCED FILTERING’ suggestion worked perfectly.
In order for this to work, I had to create a ‘Multi-reference’ field within my ‘Venues’ CMS Collection linking to the ‘Parties’ CMS Collection. Then on my ‘Parties’ template page I created a Collection list for ‘Venues’, then created a nested CMS collection inside pointed to the ‘Multi-image’ field. Lastly, I just filtered so that the ‘Which Party’ multi-reference field ‘equals’ the ‘CURRENT PARTY’.
While it’s an extra step, it worked exactly as expected. Thanks again for your help!
Heh heh that’s actually a 4th way, I didn’t mention it because I’ve found that forcing clients to link events to venues, and then venues back to events, is too painful. Plus, if you ever want to delete a record OMG, I get calls every time.
It does do the job though, and it’s easy enough to implement.
If at some point you decide the maintenance cost is too high, the “advanced filtering” option I described as a bit different. The basic shape of it is;
Add collection list of all venues to the page. Inside it, embedded collection list with your photos. Design as desired, you can limit-1 temporarily just to see your page layout without 50 venues in it. But make sure to remove that limit-1 later.
In your venue items, you need a way to identify the slug of the venue item, anyway you want. Usually that means creating an element using an HTML Embed inside of each venue.
Set the Venue collection items to hidden. I usually add an is-hidden subclass.
In your event item, you also need a way to get the Venue slug that event is running at. Same approach. HTML embed somewhere on the page you can find with code, which contains the event’s venue-slug.
Script runs on page load, gets the event’s venue-slug, and then locates the collection item that matches, and makes it visible.
The scripting is actually simple but it requires a very solid understanding of how to navigate the DOM, and change elements. I often use jQuery because it’s ideally designed for this.
I have a easy NO_CODE webflow native solution for this.
I the gallery collection that is the collection that you are referencing create 2 text fields that will be for the finsweet slider attributes. this is where you can add a number per gallery so the attributes will still work when repeated multiple times on the one project page. so the go to the attributes field in the slider settings and add the cms item from the gallery collection options with the ‘attributes number’ filed you created along with the list number field as well. here is a video to explain further.
