I named my CMS options "Tall" instead of "tall" (then put "tall" in the CSS). Pulled my hair out for a good 10 whilst it didn't work. Thought I'd add the comment incase someone else did the same. Great tutorial :)
Hey I tried this but I haven't been able to get it to work. I changed BOTH my CSS and CMS code to lowercase and it still hasn't worked. Were there any special settings that im missing??
This is exactly the tutorial I needed for a current project. You always seem to come out with things at the exact right time! Thank you for all the time and energy you put into these videos 🙌
Amazing Timothy! As for many others here in the comments this came out just in the right time. With the help of your content I can really take my projects to the next level. Thank you so much!
As usual you're a mad lad! I have two functions of this on my site. The first funtion works perfectly as shown in this video. But now I'm trying to apply the same logic to my multi reference gallary images for my portfolio, the work flow obviously is slightly different. Any advice?!
Is there any previous tutorial explaining how you built these cards, text-over-image, and all the alignment\auto cropping stuff? I'm trying doing it in different ways but nothing seems to work. Welp :'(
Hello Timothy! It doesn't work inside e-commerce products collection. The purple point that allows to connect the attribute value to cms field is disabled
Timothy, can you tell me, if there is no pop-up that pops up when you select a value for a custom attribute, how can you tie up a custom field in this case?
Nice tutorial! I would rather control it all with CSS. Let's say we set a grid for the first 10 divs and then control each cell within every 10s with code: .blog div:nth-child(10n + 1) { grid-row-start: span 2; grid-row-end: span 2; grid-column-start: span 1; grid-column-end: span 1; } This way we can order / sort / filter / paginate grid without gaps
Nth child is another great solution! It really just depends on the needs of the project. Data attributes are useful when a certain item needs to always be a certain size instead of relying on its order.
Hey Tim, this doesn't seem to be working on the published site. It works in the Designer & Preview, but on the published site it's simply showing the standard grid columns... Any ideas?
i fixed it. The issue was with the embed. The code was originally placed in the page-specific CSS embed. But when I moved it to the global CSS embed component it worked
Hi Tim, Great Idea and Tutorial! Is there a Wway to also affect the name of the dynamic attribute? We can only set the value, for some cases i would like to also set and not set some attribute names. Some integrations and custom code solutions would really benefit from the possibility to have attributes only show op on certain cms items. thank you so much for your content tim!
For some reason this isn't working for me. Is there something that im doing wrong? I reset every setting in my Collection Block so I didn't have conflicted settings and its still not working.
Always amazing, Timothy! Do you think there is a way to make this draggable and infinite? Trying to create an infinite grid that can have multiple sizes from CMS and that can also be draggable.
Thank you for this tutorial! It works perfectly for my design! Can this same technique be applied to stylizing flex box direction? In my case, I want tall items to be stacked vertically and wide items to be horizontal. I used the same technique as above and it doesn't seem to be working for me. Any insight on this would be greatly appreciated, and keep up the amazing videos! Update: I managed to get it to work! The attribute was being placed on the wrong element, but now it works plus some other custom attributes I made. Thank you again for making this eye opening video that’s literally gonna take my website to the next level!!
Thank you so much for that amazing tutorial, but on the version webflow has now (29.06.2024) there is no "dense" option. Can you tell us where to find or how to fix it maybe with additional css code? Br
@@OAGMedia Hey I noticed that it's an ICON instead of the word in the newer versions of Webflow. Its next to the "Direction" Tab in your Grid Settings under Layout.
This came up right when I needed it. Thanks a lot, Tim! Q: what if I don’t want to manipulate the style of an item through the CMS field, but want to always force my 3rd, 4th, 5th and 6th items shown on the cms list pagination to have that wide layout applied? Is there a code snippet to do that magic?
So glad this helps, and good question! If you want only the 3rd, 4th, 5th, and 6th items in the list to have that style, you could do something like this. .your-cms-item:nth-child(3), .your-cms-item:nth-child(4), .your-cms-item:nth-child(5), .your-cms-item:nth-child(6) { grid-column-start: span 2; grid-column-end: span 2; grid-row-start: span 1; grid-row-end: span 1; } Or if it needs to be a repeatable pattern like every 3, 4, 5, and 6 out of 8, you could do something like this. .your-cms-item:nth-child(8n + 3), .your-cms-item:nth-child(8n + 4), .your-cms-item:nth-child(8n + 5), .your-cms-item:nth-child(8n + 6) { grid-column-start: span 2; grid-column-end: span 2; grid-row-start: span 1; grid-row-end: span 1; }
Yes, that should be possible natively with a switch field and conditional visibility to hide the image and show the video when the switch is on or if the video field is set
this was my initial question, too. I'll probably be going with this option although it's not ideal - I'd prefer to house all of the images from a portfolio in the same CMS collection as all of the other portfolio info.
The effect doesn't work on my project. Does anyone know why could that be? I am a bit confused with why we use the embed and if I need to do something to that as well.
fixed it. The issue was with the embed. The code was originally placed in the page-specific CSS embed. But when I moved it to the global CSS embed component it worked
I named my CMS options "Tall" instead of "tall" (then put "tall" in the CSS). Pulled my hair out for a good 10 whilst it didn't work. Thought I'd add the comment incase someone else did the same. Great tutorial :)
Hey I tried this but I haven't been able to get it to work. I changed BOTH my CSS and CMS code to lowercase and it still hasn't worked. Were there any special settings that im missing??
@@whothewho82 doesnt work for me either
This is exactly the tutorial I needed for a current project. You always seem to come out with things at the exact right time! Thank you for all the time and energy you put into these videos 🙌
Oh, wow! Thank you, Grace! I’m really glad this helps
The best teacher in this space. So clear and what a beautiful solution
Accessing CMS data in attributes is such a game changer
Amazing! This issue comes up so many times, and this is such an elegant solution, especially for clients! Thank you!
Now I see why they call you a Webflow wizard. This is so impressive!
Great use of dynamic attribute binding!
FANTASTIC TUTORIAL TIMOTHY!!
You are a hero! What a great and actually simple solution for a fantastic layout. Thank you.
So glad this helps! Thank you!
Great tutorial, direct to the point and a very clever use of the grid, thanks
Thank you for everything you do, Timothy. 👏😊
This video came out just at the right time! I was literally searching for how have dynamic sizes for my cms grid. Thanks so much!! :D
Oh, awesome!! Glad this helps!
Same here.... Thanks @Timothy Ricks🎉
this is so good. going to use this to refactor a project this week.
Damn Timothy, everytime I need something you have a video for it. Thank you a lot for all the help ✌✌
You're a wizard. This is so useful and it's such a clever approach. I want to be like you when I'm older!
Thank you very much!
This tutorial has helped me a lot!
Greetings from Peru, the Webflow community is growing little by little here.
I’m so glad this helps! Great to meet you!!
As always! Timothy Straight to the points thanks for this one!
Wow! As always amazing trick Timothy! 🎉
Thanks so much, Harshit!
You make it look very easy!! You are a Webflow machine!!
How about if its multiple images field?
Awesome video, thanks!
Thanks for this, Timothy! Great use-case for the new dynamic attributes. Love your tutorials.
Brilliant, thanks for sharing!
This is so sneaky and awesome, great work man and thanks for sharing.
Thanks so much!
Thank you Tim!!! You are awesome
Amazing Timothy! As for many others here in the comments this came out just in the right time. With the help of your content I can really take my projects to the next level. Thank you so much!
Awesome use case for the dynamic attributes! Game changer. Thanks Tim!
Ok wow, this is awesome!! Thanks :)
Amazing! Would love more of these! :D
Brilliant! Never thought about styling CMS items via data-attributes, but that is such a smart idea! WIll put to good use soon. Thanks for sharing!
This is super smart!!
thank you
Smart! Thanks for sharing.
Almost exactly what I was looking for. Would it be possible to add a lightbox feature when clicking the photos?
Really a smart solution, thank you! 😄
Love this solution!! Top stuff
As usual you're a mad lad! I have two functions of this on my site. The first funtion works perfectly as shown in this video. But now I'm trying to apply the same logic to my multi reference gallary images for my portfolio, the work flow obviously is slightly different. Any advice?!
I find myself just shaking my head and saying to myself, "of course..."
Very Thank you sir
brilliant. and so simple
Top notch! Thanks for the amazing work. Exactly what i needed.
Is there any previous tutorial explaining how you built these cards, text-over-image, and all the alignment\auto cropping stuff? I'm trying doing it in different ways but nothing seems to work. Welp :'(
Hello Timothy! It doesn't work inside e-commerce products collection. The purple point that allows to connect the attribute value to cms field is disabled
Great work 🎉🎉🎉 You are just awesome ❤
Just brilliant man!
Thanks so much!
As always, great tutorial 👨🏻💻🚀Got a site for a client coming soon that this will be perfect for! - Thank you! 🔆
Timothy, can you tell me, if there is no pop-up that pops up when you select a value for a custom attribute, how can you tie up a custom field in this case?
You are the man! 🫡🫡
Nice tutorial! I would rather control it all with CSS. Let's say we set a grid for the first 10 divs and then control each cell within every 10s with code:
.blog div:nth-child(10n + 1) {
grid-row-start: span 2;
grid-row-end: span 2;
grid-column-start: span 1;
grid-column-end: span 1;
}
This way we can order / sort / filter / paginate grid without gaps
Nth child is another great solution! It really just depends on the needs of the project. Data attributes are useful when a certain item needs to always be a certain size instead of relying on its order.
Webflow wizard ✨️
Tnx ❤
Helpful Thanks so much!!
Can I do that without editing the code? I want to put my CMS collection in grid mode but I don't want all the images to be the same size.
Hey Tim, this doesn't seem to be working on the published site. It works in the Designer & Preview, but on the published site it's simply showing the standard grid columns... Any ideas?
i fixed it. The issue was with the embed. The code was originally placed in the page-specific CSS embed. But when I moved it to the global CSS embed component it worked
Doesn't seem to work if using lists with Finsweet Attributes enabled?
Awesome!
Hi Tim,
Great Idea and Tutorial! Is there a Wway to also affect the name of the dynamic attribute? We can only set the value, for some cases i would like to also set and not set some attribute names. Some integrations and custom code solutions would really benefit from the possibility to have attributes only show op on certain cms items.
thank you so much for your content tim!
For some reason this isn't working for me. Is there something that im doing wrong? I reset every setting in my Collection Block so I didn't have conflicted settings and its still not working.
Always amazing, Timothy! Do you think there is a way to make this draggable and infinite? Trying to create an infinite grid that can have multiple sizes from CMS and that can also be draggable.
wow love this tutorial. Its super awesome :)
Thank you for this tutorial! It works perfectly for my design! Can this same technique be applied to stylizing flex box direction? In my case, I want tall items to be stacked vertically and wide items to be horizontal. I used the same technique as above and it doesn't seem to be working for me. Any insight on this would be greatly appreciated, and keep up the amazing videos!
Update: I managed to get it to work! The attribute was being placed on the wrong element, but now it works plus some other custom attributes I made. Thank you again for making this eye opening video that’s literally gonna take my website to the next level!!
Genius
True Genious ! 🤩
Thanks!
Thank you so much for that amazing tutorial, but on the version webflow has now (29.06.2024) there is no "dense" option. Can you tell us where to find or how to fix it maybe with additional css code?
Br
So glad this helps! The dense button is still there. It just looks different now. It’s the third, final button under "Direction" in the style panel.
i added 'grid-auto-flow: dense' in the Custom properties (bottom of Style panel)
I don't see the dense option in the new interface of webflow. Can someone tell me where can I find it?
same here. searching for that setting.
@@OAGMedia Hey I noticed that it's an ICON instead of the word in the newer versions of Webflow. Its next to the "Direction" Tab in your Grid Settings under Layout.
This came up right when I needed it. Thanks a lot, Tim!
Q: what if I don’t want to manipulate the style of an item through the CMS field, but want to always force my 3rd, 4th, 5th and 6th items shown on the cms list pagination to have that wide layout applied? Is there a code snippet to do that magic?
So glad this helps, and good question! If you want only the 3rd, 4th, 5th, and 6th items in the list to have that style, you could do something like this.
.your-cms-item:nth-child(3),
.your-cms-item:nth-child(4),
.your-cms-item:nth-child(5),
.your-cms-item:nth-child(6) {
grid-column-start: span 2;
grid-column-end: span 2;
grid-row-start: span 1;
grid-row-end: span 1;
}
Or if it needs to be a repeatable pattern like every 3, 4, 5, and 6 out of 8, you could do something like this.
.your-cms-item:nth-child(8n + 3),
.your-cms-item:nth-child(8n + 4),
.your-cms-item:nth-child(8n + 5),
.your-cms-item:nth-child(8n + 6) {
grid-column-start: span 2;
grid-column-end: span 2;
grid-row-start: span 1;
grid-row-end: span 1;
}
This is great! Thank you ❤
Can you make a tutorial on creating a custom product review for Webflow e-commerce website?
Is it possible to choose between an image or a video thumbnail?
Yes, that should be possible natively with a switch field and conditional visibility to hide the image and show the video when the switch is on or if the video field is set
Is it possible to do something similar to this with multiple items on a single cms item like a portfolio project?
this was my initial question, too. I'll probably be going with this option although it's not ideal - I'd prefer to house all of the images from a portfolio in the same CMS collection as all of the other portfolio info.
Genius!
The effect doesn't work on my project. Does anyone know why could that be? I am a bit confused with why we use the embed and if I need to do something to that as well.
To me it looks perfect in the designer but on the published URL it's just showing them normal grid.. did you find a solution?
fixed it. The issue was with the embed. The code was originally placed in the page-specific CSS embed. But when I moved it to the global CSS embed component it worked
@@AVMmmm not yet... I don't understand the embed step, I have made an embed but it doesn't work at all. Where is the global css embed?
Oh! I used this and worked perfect but then client wanted a filtering system so my grid broke :(
Is there any another way to do this without code embed?
I'm wondering the same :(
Dang...it's not working. What did I miss...?
Update* deerrrrpp!!! I had my code wrong.
instead of correct:
check your code everyone!! :p
THANK YOU Timothy this is fabulous and so easy to follow.
🤩
🎉 smart 😎
Omg🤯🔥🔥🔥
WOAH
realy cool tutorial .. but only works with paid version :D
you skipped over alot in the begining like how do i setup my cms collection. this wouldve been perfect :(
If anyone should go to heaven it should be you my friend!
You don't know how many damns I've said while watching this
nasheee
Amazing
now do Framer. :) But, seriously. It's frustrating me to no end. Should've gone with webflow.
@timothyricks is not working for me! I don't know if I am a stupid hehehehe.