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!
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
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?!
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?
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!
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.
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
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.
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.
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.
hi, I'm a beginner and I try to build my own portfolio on Webflow, I didn't find it but how did he came to this cms looking cause mine if far away than what he got to the beginning 😅
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
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.
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!!
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
![I.N "HALLUCINATION" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/n5B5q1Hwt_U/mqdefault.jpg)
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
Amazing! This issue comes up so many times, and this is such an elegant solution, especially for clients! Thank you!
Accessing CMS data in attributes is such a game changer
FANTASTIC TUTORIAL 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🎉
Great use of dynamic attribute binding!
omg that is SO SMART, I didn't know about that CSS selectors, this opens so many doors!!
Great tutorial, direct to the point and a very clever use of the grid, thanks
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!
You are a hero! What a great and actually simple solution for a fantastic layout. Thank you.
So glad this helps! Thank you!
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!
Thank you for everything you do, Timothy. 👏😊
Thanks for this, Timothy! Great use-case for the new dynamic attributes. Love your tutorials.
As always! Timothy Straight to the points thanks for this one!
Now I see why they call you a Webflow wizard. This is so impressive!
You make it look very easy!! You are a Webflow machine!!
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!!
Wow! As always amazing trick Timothy! 🎉
Thanks so much, Harshit!
this is so good. going to use this to refactor a project this week.
Awesome use case for the dynamic attributes! Game changer. Thanks Tim!
Damn Timothy, everytime I need something you have a video for it. Thank you a lot for all the help ✌✌
Awesome video, thanks!
Brilliant, thanks for sharing!
Ok wow, this is awesome!! Thanks :)
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 so sneaky and awesome, great work man and thanks for sharing.
Thanks so much!
This is super smart!!
Almost exactly what I was looking for. Would it be possible to add a lightbox feature when clicking the photos?
thank you
How about if its multiple images field?
Thank you Tim!!! You are awesome
Amazing! Would love more of these! :D
True Genious ! 🤩
Very Thank you sir
Love this solution!! Top stuff
Really a smart solution, thank you! 😄
Top notch! Thanks for the amazing work. Exactly what i needed.
Awesome!
Great work 🎉🎉🎉 You are just awesome ❤
Smart! Thanks for sharing.
You are the man! 🫡🫡
brilliant. and so simple
Webflow wizard ✨️
Helpful Thanks so much!!
Just brilliant man!
Thanks so much!
Genius
As always, great tutorial 👨🏻💻🚀Got a site for a client coming soon that this will be perfect for! - Thank you! 🔆
Tnx ❤
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
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?!
Doesn't seem to work if using lists with Finsweet Attributes enabled?
wow love this tutorial. Its super awesome :)
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?
Thanks!
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!
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.
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.
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?
I find myself just shaking my head and saying to myself, "of course..."
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.
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.
Genius!
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.
Can you make a tutorial on creating a custom product review for Webflow e-commerce website?
hi, I'm a beginner and I try to build my own portfolio on Webflow, I didn't find it but how did he came to this cms looking cause mine if far away than what he got to the beginning 😅
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
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.
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!!
Omg🤯🔥🔥🔥
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 ❤
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
WOAH
Is there any another way to do this without code embed?
I'm wondering the same :(
Amazing
🎉 smart 😎
🤩
Oh! I used this and worked perfect but then client wanted a filtering system so my grid broke :(
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.
If anyone should go to heaven it should be you my friend!
realy cool tutorial .. but only works with paid version :D
nasheee
you skipped over alot in the begining like how do i setup my cms collection. this wouldve been perfect :(
You don't know how many damns I've said while watching this
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.