I’m working on a project that has a map with a bunch of link-divs that, when pressed, are supposed to play a video transition for each location and then open (fade-in) a modal overlay that displays the associated collection record for that location. I have two issues:
How do I get the benefit of having the collection populate the name for each location on the map, but get the benefit of being able to style each individual label so that it appears at the correct location on the map? Right now it seems that I must style each item in the collection in the same way.
I’m designing the model in a section on the main page that will be hidden when live such that it will appear as a modal overlay in a static position on z-index: 999. My question is, how do I pass in information to my layout so that it puts the correct data from the collection into each field. Because this modal design lives outside of a collection list object, there is no way to assign field values to each display object.
Here’s an example of the type of placement I need.
Q2, A2: For this, you could duplicate the homepage on the collection page related to this content. That way you can track you goes where and therefore have your CMS collection items available to you.
Id like to see you have your design laid out and then have your models in place to see where your thought process is going with this?
Not sure if any of this helped but could be a starting point.
Also, could you please reference the collection you want to be used for this thread?
I think I follow you on your first answer, but am not quite clear on the second answer. I get that I can take my modal layout (the section right under the map) and place it on the collection page, but then how do I get that layout to appear inside the modal as an overlay to my map?
Another new qustion is, when I use a background video object, where is that video stored? We’re writing custom code that will, when one of the village links is clicked, will swap out the base background video with the correct background video to show the transition animation to that village. It doesn’t appear that these videos are accessible through the library and we’ll need those links to do the swap.
@jlenker, sorry for the late response. With the 4th this past week I took some time with the fam and enjoyed some relaxing time. To answer your questions here are my responses.
For the modal overlay: Did you watch the YouTube video from Nelson on how to make different collection layouts? That should give you direction as to the direct you should go. 2nd part: you would have to add a collection list into each modal overlay to get your different layouts you want.
Thanks, Brandon. A follow up question: Do these background videos need to live on an active page for the link to be valid? The reason I ask is that, in our project, we’re going to be swapping 14 different background videos in code. We can’t have them all loading on the page, so they’re going to need be called up based on a URL. My two options are:
Load a background video into the background video object, copy its URL, and then replace it with the next background video, copy its URL, and so on.
Creat a draft page and put 14 background video objects on that page, upload one of the background videos into each, and then copy the URLS.
Can I do option 1, or are the files cleared on your server if they are replaced? In which case, I think I’d have to do option 2 unless you can give me a better suggestion.
It would be really helpful if background video resources lived in the library just like any other media item. Just a suggestion.
What string do I need to place in our Javascript to change the collection record that is displayed in a collection list? I have a collection list with only 1 record displayed. We need to switch which record that is displayed on the pape based on a button click.
It’s in the Village Section / Collection List here
@jlenker, the first part of your question, No they don’t need to live on a page. You do need to upload them, and then get the link for that video. You can then either use display none or upload over that file.
As for the second part, I am not sure. That is a bit out of my knowledge wheelhouse. Let’s see is @webdev has an answer to your question. He is a madman (lol) when it comes to custom code.
