How to use CMS Nest in 8 min - Finsweet Attributes
Вставка
- Опубліковано 13 жов 2024
- Here's how to get around Webflow's 5 item nested CMS limit using Finsweet CMS Nest attributes solution. This no-code solution allows us to nest single and/or multi-reference collection items (categories, tags, etc.) inside their related Collection Item (Blog Post, Resource, etc.)
// CLONE IT
👯♀️ try.webflow.co...
// FREE resources
✂️ Code Snippet Library: code-snippets-...
🤝 CSS Nobody Told You About: www.webbae.net...
🚗 Roadmap to learn Webflow: www.webbae.net...
// Premium content
🤝 Patreon: / webbae
🕸️ Advanced Webflow Course (201): www.webbae.net...
// Discounts
🎢 Get 10% GSAP: WEBBAE10
♣️ Creative Coding Club (My favorite GSAP lessons): www.creativeco...
// Connect
🙋♀️ Join the Discord: / discord
🐥 Follow Me! / webisbae
Thanks for this walk-through, man. Super helpful to support the documentation.
Glad it helped
Thank you, that really did help a lot more than the documentation. Honestly, I think this limitation imposed by webflow is a dealbreaker for me for future projects...
🤞
You just saved my whole website project from becoming a total mess! Thank you!
Fantastic!
Completed the tutorial. Working perfect, thanks !
Thank you so much! I missed so many things 🙈 your walkthrough really helped. Liked and subbed 👍🏻
Glad I could help!
Thank you. I have not used FS nesting and just started a project with multiple nested cms. You rock brother.
Glad to help
nice, I love this videos, incredible Finsweet explain in a video of 1 hour
Great ,,Thanks
Thanks dude. You saved me so much time
glad it helped! CMS Nest is a bit tricky for sure but once you do it once or twice it makes sense. Watch out for those required link blocks!
thanks alot man saved so many hours
Glad it helped!
Could this be used to create a multi-level menu? Example: Tier 1, Tier 2, Tier 3 CMS Pages.
Thank you so much for walking us through this. Have you ran into issues with hover animations not working. In preview mode it works but once it's in the target div on the live site the animation doesn't work anymore.
yea that's probably because CMS nest replaces items after page load, and after Webflow JS runs.
To fix it you'll need to leverage the Finsweet CMS Nest API to reinitialize Webflow IX2 after CMS Nest finishes loading.
finsweet.com/attributes/api
I use the CMS Filter API in this Patreon video to make a Macy.js masonry grid work with CMS Filter. Super similar concept: www.patreon.com/posts/horizontal-grid-88560236?Link&
thank you sooo much!
Glad it helped!
Really helpful video! by any chance do you know if its possible to nest to more than 100 items in one collections (100+ categories)?
I’m not sure! I don’t think there’s any technical limitation though. The main challenge might be how many are displayed in page at once if you are using a finsweet solution like CMS nest? Hard to say without an example! I’ll bet HTMX could do it…
@@webbae i tried the your example and it works. However it only nest to the first 100 items of collections. 😌 so some of the parent collection doesnt have categories. I hope that make sense. 😬
Yea I think it might be because collection lists are limited to 100 items.
Try adding another collection list to the page? How many items do you have?
Hey mate, great video very helpful. Is there a solution to cms nesting but only on a template page?
Are you having trouble using nesting on a template page? I don't know if I've tried that but not sure why it wouldn't work.
I can't seem to get it to work on the template page. Works like charme on a normal page. @@webbae
Thank you so much for the video! I tried that and it works perfectly for 1 Collection list. But I have another List on the page (the same collection but with another filter) where I also want to show those tags with cms nest, but I can‘t quite get it working with the second one. Is there anything I need to take into consideration when setting it up for the second one? For example changing the attribute value to nest-source-2 etc. did not help. Any tips would be much appreciated :)
Hey Jasmin - hard to say without seeing but we have a great example on the documentation site that uses two instances of CMS Nest - finsweet.com/attributes/combos/nest-nest
DOMParser defeats infinity once again 🎉
Thank you. This worked perfect.... except now I have a bunch of Category Links that link to a category cms template page.... an empty page with just the category names. Am I missing something?
it depends on the setup you want.
you can hide a link if that's your preference.
from the docs:
If you do not want the user to navigate to the CMS Template page, you may hide a link inside the Collection Item. The link does not have to be visible or clickable by the user. However, this link is required to be a dirct child of the Collection Item element and it must be directed to the CMS Template page for that item.
Man, wish this was a workaround for "nested collection lists cant be inside component". I've used cms nest before but never had to on a component. Dangit.
Can you combine CMS combine and CMS nest?
not sure but I don't think so. If the example isn't in the finsweet docs then I don't think so.
Is this a dead feature? I've probably done this a dozen times to 3 different videos and I cannot get this thing to work.
nope still works I made this video pretty recently. Feel free to hop in the discord and ask there if you need help.
Instead of displaying on the DIV, it became a link and opens the CMS template page. Please help me. 😩😩😫
hard to give help without an example feel free to hop in discord
Dear Web Bae, I have a related issue:
I tried to link a blog-post-component inside a blog-post CMS list to the blog-post template site. Since components can not be linked to CMS template pages, i guess custom attributes could be a solution. Any idea for that?
Thanks a lot in advance!!
HI @JohannesBruns I don't think I fully understand the question maybe you can post an example in Discord? discord.gg/C6JMaeDP
Maybe this is out of the scope of the video but it looks like the tags are already filtered... how are you achieving that aspect? Is this combined with cms filter and nest?
no it's just cms nest. the attribute pulls categories relevant to each collection item. I hope that makes sense.
Hi this probably seems like a dumb question but how did you get those tags/categories in the CMS from the start of the video? I’ve gone through the field options and I don’t have one like that where I can add multiple tags or keywords to the cms
Hey never mind I didn’t realise that there was a whole process beforehand where you need to create a separate collection for tags
ooops! Glad you figured it out. Sometimes I skip stuff to try and keep video shorter.
Maybe bit of a long shot, but do you know if webflow interactions is usable on the nested elements. On a current project i'm working on i'm using the CMS Nest to nest multiple categories to their specific blogpost. But somehow i can't get webflow interactions to work on the nested elements. I want to create a hover effect on the tags/categories to identify for the user that the categories is clickable, and the desired effect is only able to be made through webflow interactions. But somehow the mouse over interactions is not triggering, even though you are able to make a simple hover effect through the effects panel. After a lot of trial and error i'm coming to the conclusion that webflow interactions might not work nested elements or have you got any luck making nested elements work with webflow interactions?
You need to “reset Webflow”. You can use the attributes API to run code after nest has done its thing. I’ll try to do a video on it sometime.
@@webbae any support on this would be great, as this nest was so helpful, but losing a really nice animation feature as a result. Great video though, and thank you!
Hey, as far as i can tell this wont work with multi image CMS fields since webflow only gives you the option to set an item to 'multi image' if it is already nested under another parent CMS item. Any advice to make this work? Trying to make a lightbox image portfolio without being limited to only 5 images
hey I'd have to see your implementation to understand where/why you are nesting the multiimage field. My Discord a good place to post more info.
Hi Bae, thank you for the tutorial. However, can I use this for multi-images? I have tried it, but it doesn't seem to work. Thank you.
I usually use this solution for tags/categories - not sure about what you are trying to achieve with multi-image. Pretty sure it doesn't work with the multi-image field if that's what your getting after.
@@webbae
Hi Bae, I am trying to use a multi-image field from 3 different collections that I need to display on one page. However, it doesn't work this way, so I ended up using several image fields for multiple images in my collection list. Thank you for your answer; I appreciate that.
Cheers mate, I got it working but now theres a big list at the bottom of the page, and if I try to hide it (display none), it doesn't show up in the div, obviously because it is now hidden.
I do not want the list of categories to be showing randomly at the bottom of the page, is there anyway to remove this list from showing up, but it still showing where needed?
Managed to fix that now by wrapping the collection list wrapper in a div block and hiding that div, it actually says that on the attributes documentation, all good now, thank you again mate.
glad you got it worked out!
Thank you for this clear turotial, have a great day and weekend! @@webbae
you're explaining too fast!!!!!
you're not the first to say that - I'll try to slow it down.