How to randomize CMS items with low code in Webflow

Join host Nelson Abalos Jr for a Build with me (BWM) session. We’ll learn how to randomize CMS items with low code in Webflow. In this session you’ll learn the basics of Webflow collections, Collection lists, and adding low code to randomize the CMS items every time the page is loaded.
Clone this project here:
webflow.com/made-in-webflow/w...
Reorder CMS items:
webflow.com/apps/detail/toolkit
----------
Chapters
00:00:00 Stream starting soon
00:00:42 Stream start
00:01:53 Today's topic
00:04:57 Stream agenda
00:05:43 Set up the Collection
00:06:47 Randomize using the Webflow UI
00:11:40 Randomize with low code
00:15:46 Creating floating cards in a 3D space
00:19:32 Enabling CSS 3D
00:20:49 Creating a 3D rotation on mouse over
00:21:06 Explaining the 3D rotation concept
00:24:55 Creating the 3D interaction
00:26:49 Adding the random floating cards
00:35:19 Adding the randomizing low code
00:38:43 Q&A
00:38:55 Q: Reorder CMS items manually?
00:40:48 Q: Randomize a featured blog post?
00:41:44 Q: Can randomize HTML embeds?
00:43:07 Outro
----------
Get started with Webflow: wfl.io/2r7cVUW
Join the Webflow Community: webflow.com/community
webflow.com
/ webflow
/ webflow

[@alex-pattison]

Great tutorial as always Nelson. Thanks!

[@Webflow]

My pleasure!

[@sabuein]

Thank you.

[@Webflow]

You're welcome!

[@tomvoltz7506]

Fun tutorial, thanks Nelson. Question: In a cms file I have 1 featured image plus 10 more images for an author. On the front page where all blog posts are displayed I now see the same featured img many times. Can I somehow randomize those images so not only the featured image is displayed but also the others on a randomized basis?

[@Webflow]

Thanks for watching! :) You can have two collection lists. One with a filter for featured images and a second for non-featured images. Then have the second collection list use a different class that the first and make the code point to that one. Hope this helps.

[@tomvoltz7506]

@@Webflow thanks

[@SammyStep]

The random code seems to disable my hover state for the images in my CMS (a block of text which overlays the image). Is there any way around that?

[@Webflow]

Can you post this question and your project's read-only link on our forum? discourse.webflow.com university.webflow.com/lesson/share-your-site

[@ihajo]

Is it possible to execute the code on hover/scroll/click instead of reload the page?

[@Webflow]

Yes. You can execute a function on all of this triggers with jQuery. api.jquery.com/on/ Hope this helps 😀

[@rebeccalowe9061]

This seems not to work on a paginated CMS collection with only 1 item showing at a time. Is there any work around for this?

[@Webflow]

This will only work with collection lists that don't have a pagination. The reason being is that the custom code goes through the list thats already on the page.

[@christofferfurnes]

@@Webflowdoes not work with collection lists with only one item showing

[@ionelCristianLupu_]

For the question on min 40:30: will this work if I have 1000 articles? I mean, Webflow will render all 1000 of them and then get the three random articles from there? I think we want to get three random articles directly from the database.

[@Webflow]

You can try combining multiple collections on a single page using this script by Finsweet: finsweet.com/attributes/cms-combine Then you can use the shuffle script to help you with picking three random articles. Hope this helps :😀

[@stephanlenting]

@@Webflow It’s good other talented devs create these plugins, but personally speaking i’d rather have as much native support for these features as possible. It’s a bit concerning i see Webflow moving towards plug-ins and APIs, instead of building these features natively. Like with Wordpress, I don’t want to manage scripts or plugins, neither manage multiple sources to pay for functionality. I want one tool where you can do it all.

[@stephanlenting]

Less low-code, more no-code ❤ 😅

[@Webflow]

Thanks for watching. We'd love to hear what you'd be interested in learning with no-code 😀

[@stephanlenting]

@@Webflow doing the same without code 😅