DON'T CHANGE A THING!!! You're an EXCELLENT Webflow teacher. I instantly subbed! Thank you for this video and for taking the time to thoroughly explain what you were doing.
Thank you for this tutorial. I was giving up on the start checked (all button) functionality because the grouping is poorly explained on the Finsweet website. Thanks to you, I got it working. Great content. Keep it up 🤙 🔥
I feel you! I often forget one of the steps to get everything perfect. That's also why I left the wrong radio group in the video, since that's what I've messed up the most.
Wonderful tutorial! This is exactly what I was looking for; however, I have one (potentially dumb) question. When I got the cloneable, none of the filter buttons worked. The hover animations all respond, but I can't get the images to filter by using the buttons. Is that normal for a cloneable? I just want to make sure I won't have the same problem if I try to implement this workaround on my own site. Thank you again!
Thank you! I’m using an app called Screen Studio, it’s really great for this type of content and makes editing a breeze. I have an affiliate link for it here screenstudio.lemonsqueezy.com?aff=wwRey
Great tutorial! Your explanaitions are very clear. I have an issue with the "All" button, it's not funcioning. When I click it, it shows nothing. What can I be doing wrong?
It sounds like the filter can't find the hidden 'All' text in the collection items. You can check if it is added in the collection item. It may be case-sensitive, so you can also check if the 'All' text is written in the same way. It could also be the IDENTIFIER in the [fs-cmsfilter-field="IDENTIFIER"] attributes which are not matching between the filter elements and the text 'All' text in the collection item.
Love your work! Wanted to ask if there was a way to make the page scroll to the top as you press the radio button? I have the filter on the side as a sticky. Do I use java script?
Thanks! You can use the built in ‘anchor scroll’ attribute which is a part of Finsweet CMS Filter finsweet.com/attributes/cms-filter Just add it to the element you want to scroll to when the filter is used 👌
Hey thelazygod, again super helpful tutorial! Is it possible to link to these tabs? E.g. on the Home Page I show a preview of projects with these tags and if I click on a tag -> Can it take me to the Projects list with the tab already chosen?
Thanks! Yeah, if you enable the “show query” option on your CMS Filter you can link to the page with the projects list with the filter set through queries in the URL e.g. ?category=Fire. You can read more in the “show query” option on Finsweet’s website: finsweet.com/attributes/cms-filter
Thanks for this. When you add additional posts, I guess you mark them with the "All" field. Correct? If so, you could have added an "All" category. But this was helpful!
Great video! I've noticed that somehow the finsweet CMS filter is breaking my vimeo embed once I've clicked on a button tag. Have you ever had the same issue?
I haven’t heard about any issues with Vimeo embeds and Finsweet CMS Filter before. They do have an attribute you can add if the filter breaks your Webflow interactions, could be worth checking if the issue is related to.
@@thelazygod Just implemented CMS filters thanks to your video, thank you! My only question is how you format it for mobile stacking? I was hoping to make my buttons a little smaller on mobile and wrap them so that I end up with maybe the all button and two options on first line and then 2 or 3 on second line. However the all button seems to always sit on it's own line as it's not part of the collection list group. Any ideas on how you'd solve it? Cheers PAT
Yeah, with this method the all button is not part of the same flexbox as the other buttons, which makes it a bit harder to get them in the same layout like that. That's why I went for a horizontal scroll on mobile in this video, but it could probably be done.
I've watched a few CMS filter videos and this one was really good. Shows all the steps without wasting time. Only thing is your voice is a little difficult to hear clearly.
Hello thelazygod, thank you so much for this video! This saved my client project. I now added multiple tags to each project and now the "All" button doesn't work anymore. Do you now why this might happen?
Glad you liked it! Hard to say without checking the page, but I'd suggest to check the attributes are referring to the same 'field identifier', and make sure the radio buttons are in the same group.
Please ! That will be very helpful to understant how you make this CSS styling please ! Even if we can use clonable , its more satisfy to build himsel. If you can explain please
My theme is a multi reference field so I created a nested collection list. However, after I set the text attribute to the text, it does not work. What should I do? Thank you!
It should definitely also work for nested collection lists. I've added an example that also uses multi-reference to the cloneable. Check it out here: cms-filter-all-styling.webflow.io/multi-reference
