I’ve been asked to replicate this grid of photos with associated content displaying after clicking a photo. To make it more interesting, the content (thumbnail photos, names, big photo, bio, etc) will be stored and loaded through the CMS.
I have some experience working with the collection list, so I can probably figure out the grid and text overlays. My biggest concern is loading the related content and pushing down the rest of the page similar to an accordion menu. I don’t even know where to begin. Will this require custom code? Any help at all or even a nudge to info that gets me started would be greatly appreciated.
Basically, the “Ability to push down” content on a page generally needs to be set to Display: Block. There’s other css that can help. The wrappers have Height: Auto. But I would set 2 Divs, inside a wrapper Div, then when one expands, it’ll push the other down, and the wrapper will auto-expand. No custom code needed.
That’s the gist, without seeing what you’re doing. Hope that helps.
My question now is if there is a way to populate the accordion section with content from the CMS that loads when each thumbnail is clicked, instead of manually creating a “bio block” (pic, name, bio, etc) for each performer. Something like passing variables from each thumbnail link into the accordion section. I’m guessing something like that would require some custom code.
I started looking into the CMS API, but I’m not really a coder so a lot of that stuff is over my head. For now, I will begin the manual process, but if anyone has any ideas of how to do this more dynamically, I’m all ears!
And one other question. The way it works now, you have to close the accordion before you can see content from another thumbnail click. But with the original link I referenced, each thumbnail will load new content without having to close the accordion first. Any help there would be greatly appreciated as well.
Oh no you don’t need code for dynamically populating each accordion section. That’s the beauty of Webflow!
First watch this CMS video:
Now - Before you start! You need to sit and write this down because CMS’s are actually not supposed to be on websites!! It’s a created way for users to develop and interact with database architechture without knowing how to write programming or creating databases. Web development coding, Programming coding and Database coding, are all 3 different.
Webflow has managed to bring all this language and database architechture into their application and allow you see it visually - which is Awesome! (You have to consider, if it was easy to do, all these web building apps would have done it, but it’s not)
You don’t need to be a guru, but you really should read up on how CMS’s work, then watch the tutorials.
After this, just create a org chart of your desired content, the names of items, which items go where, etc. Honestly, DON’T jump right in and create a cms database in your project. Take a little time to visualize what you want to happen.
When you finish watching and you still have questions, I’m available just shout out to my profile.
Hey, thanks again for your time, I really appreciate it!
I do have a basic understanding of the Webflow CMS. I’ve already created the collection for performer info and I’m pulling some of that into the grid now (name and thumbnail pic). I’m also using that for the accordion content (big pic, name and bio text).
What I don’t understand is this: Click on Neko Case thumbnail, you see the info for Neko Case. Now close the accordion and click on Sylvan Esso. Currently you still see the info for Neko Case. How do I get the content for Sylvan Esso to show, dynamically? The only way I can figure now is to create a separate collection list with Neko Case info in the accordion section and display that when her thumbnail is clicked. So ultimately I have a separate “bio block” for each artist. What I WANT to happen is when you click Sylvan Esso, her info is DYNAMICALLY loaded into the accordion section and displayed. When you click any other artist, their info is dynamically loaded into the accordion section and displayed. I know this could be possible with code, maybe something like javascript or AJAX, but I don’t know enough about that to even know where to start.
I’m thinking this probably isn’t possible within Webflow without using custom code. Any other Webflow experts out there able to shed some light on this for me?
Gotcha. First, where is the content inside the accordion? The close button, image, bottom description box. Where is that in the site? I can’t seem to find it.
I guess what I’m after is something like the idea of a collection page, where you build a template with collection lists and then a page is created for every other item in the collection. In my case, instead of a separate page, I want a collection “section” (accordion content) if you will.
My accordion section is hidden in the designer view with a height of 0px. It then gets expanded with an interaction when the thumbnail image is clicked. You can find it here:
section-performers > block-performer-bio
The “block-performer-bio” is the Divblock that holds the accordion content.
Understood. Well a collection page is just that a page. You can replicate this by creating 1 parent collection section to wrap and hold each section. Then add each collection into a section and stack them inside the parent div, one on top of the other. Making each of them in their own mini-page. They’re just inside a section/div that’s hidden. Then you can call them with the image block. To show as a modal, slide down, etc. But the user stays on the primary page, they’ll just close the hidden mini-div, so to speak.
It would actually be the same thing. And they wouldn’t be collections so you can add interactions to the sections later if you want.
I think you are saying I need to create a separate little “mini-page” inside a hidden div for every single artist. So if I have 20 artists, I need 20 different “mini-pages” inside a hidden div. Is that correct?
I’m really looking for a more dynamic solution for this, where I wouldn’t have to make 20 of everything.
@bartekkustra, @bart, @thesergie, @cyberdave do any of you understand what I am trying to do? I’ve read your advice on other posts regarding Ajax, javascript, etc.
I just saw one discussing loading content from another page into a div. Could I load an entire collection page into a hidden div each time a different thumbnail image is clicked? I do have a collection page template created. And again, here is my share link:
No I’m not saying that Listen it’s the same thing. You’re either going to have a cms page or 1 cms block (with all the content). They’re both the same.
So I’m saying if you don’t want to do multiple pages, which is understandable, you’ll to replicate/simulate that with divs.
You won’t be re-creating each one. You will be adding 1 div template, with divs, layout, styles, etc. Then, yes, you will pull cms content into 1. Then you’ll copy that whole block into another div, and so on. Then all will be hidden inside another parent div as a wrapper. There’s no other way to build this if you don’t want multiple pages.
There’s no more dynamic solution that having a cms page created for you, when a collection database is added. That’s the easiest way to do it. Even in Wordpress, you’d have to create content for each artist. The data has to typed somewhere. Divs would just be flexible in where you show the content, whereas a page is on it’s own. Sorry if I was seeming confusing.
Hi again. Sorry for disappearing for a couple days. I had a death in the family, but I’m now back at the task. I do understand what you are saying, but you lose me when you say “copy that whole block… and so on”. This is a problem for a couple reasons. A) Let’s say I have 60 artists. With the copy method, I’m now loading 60 artists worth of data on page load. B) If I have to change something in the layout or add a new piece of content to these hidden divs, I would have to do it 60 times, or delete all but one, make the change, and then duplicate them all again, change each div to display the appropriate content from the CMS using filters, etc…
Also, I do understand the content has to be typed somewhere. That would be the CMS. And that’s the other thing. I have other team members who may be adding new artists and populating the content for these things. I shouldn’t have to touch the site every time they need to add a new artist. That is certainly not the most efficient way to do it. They should be able to add the artist and content in the CMS, then the photo grid is updated and when you click that new thumbnail, the accordion opens and presents the bio content for that new artist. You can’t do that with the copy method, which defeats the whole point of a dynamic CMS in my opinion.
Again, many thanks for your time and suggestions. I very much appreciate your willingness to help a stranger on the internet!
Thanks for your time @aaronocampo. I do have the “slide” part of the problem figured out, now I’m just trying to figure out how to make it more efficient and dynamic. Thanks again.
I guess I should also mention that I’m aware the easiest thing to do in this case would be to have each thumbnail in the grid simply link out to a collection page for each respective artist instead of using this accordion thing on the same page. However that is not what I have been asked to do, so I’m just trying to figure out a solution to a client request. Just so everyone knows I’m not just creating this problem to make my own life harder! haha.
Sorry, I thought you were just showing the interactions part of the system. I didn’t realize you were pulling data from the CMS. Can you explain how the content is loaded in the “modal” overlay, or do you have a read only link I could check out? Thanks again.
Dude, you just might be my hero! It works great. I even added another team member, the bio text and a name and it all just works. The one thing I cant figure out is how the content in the popup modal changes with each button click? I couldn’t find any special code or variables to tell each button to change the content. Is it just because the pop up is inside the collection item in the element structure? I had my accordion content outside of that structure so maybe that’s why it didn’t work like that for me.
Either way, thanks so much for sharing this. If I can get this to work for mine, you have made my day!!
Listen it’s the same thing. You’re either going to have a cms page or 1 cms block (with all the content). They’re both the same.