Framer Update, CMS

CMS: Conditionals and Transforms

Benjamin

8:40

21K views

Oct 27, 2022

About this lesson

This Framer update adds Conditionals and Transforms to the CMS, unlocking a new level of control over your CMS content. Remix the demo project: https://flix.framer.wiki/

🌞 Try Framer for free: https://framer.com

🎉 Follow on Twitter: https://twitter.com/framer

💎 Join Community: https://www.framer.community

#website #framer #cms

0:00yo my name is Benjamin and in this video 0:03I'm excited to introduce two brand new 0:06CMS features called conditionals and 0:09transforms these features unlock all new 0:13use cases and allow you to do much more 0:16with the data in your CMS collection and 0:19I have prepared this little demo to show 0:21you three examples in our little 0:24collection here we have a bunch of movie 0:27reviews 0:28we have a title a date a movie poster 0:32and here we have a few fields that are 0:35not shared across all items not all 0:38items have a YouTube link and not all 0:40items have a banner image plus we have a 0:44rating per movie and a tint color per 0:47movie as well and you can see all of the 0:50fields over here as well and let me open 0:53the first one so you can have a quick 0:55peek at how the data is populated for 0:58this movie we have a poster a YouTube 1:01link but no better image and then a 1:04rating tint and our review paragraph so 1:07let's start with the first example I'll 1:10open up one of the detailed pages and 1:12you can see our first issue right here 1:15as you have seen in our collection here 1:18we have a YouTube link for this movie 1:21review but we don't have a banner image 1:23this is a very common setup we want to 1:26conditionally show and hide a leading 1:29asset so what's happening here is that 1:31our movie Banner correctly has the fill 1:34assigned to the banner variable from the 1:37CMS but for this specific item the 1:41banner is not set in the CMS at all so 1:45for this page we do not get an image 1:48from the CMS at all and that's why you 1:50see this blank frame now traditionally 1:53you would have to add a toggle variable 1:56to your collection and Define it for 1:59every single item in the CMS with this 2:02release this is no longer necessary and 2:05there is a much easier way with the 2:08movie Banner selected I can head over to 2:10the visible property click on it and I'm 2:13now presented with a menu of conditions 2:17so here we can say only set visible to 2:20true if the banner is actually set in 2:24the CMS collection so this is our new 2:27condition UI AI you can see in the 2:30property panel that visible depends on a 2:33condition the variable used for our 2:36condition is the banner and the 2:38condition we're checking for is whether 2:41or not the banner is set in our CMS so 2:45while things look good here let's check 2:47the next detail page 2:50here you can see we still get the banner 2:53image so our condition works both ways 2:56however on this page we do not get a 2:59YouTube link from the CMS so we don't 3:02want to display a video we only want to 3:05display a banner image so again I can 3:09head over to the visible property in 3:11this case I want to check if the YouTube 3:14variable is set in the CMS collection 3:17so I'll add the is set condition there 3:22so the condition is right but we added 3:24it to the wrong layer as you can see in 3:27the layer panel our video is actually 3:30wrapped in a little stack so we want to 3:33be sure to apply our condition there 3:36undoing or deleting conditions is very 3:38simple in our case I can simply hit 3:41command Z to undo it I can then select 3:44the parent stack and apply the same 3:46condition there 3:48so I'll head over to the visible 3:50property select the YouTube variable and 3:54check whether or not it is set 3:57and as you can see the YouTube video is 4:00now properly hidden on this page 4:03and if we go back to the first page the 4:06banner image is still hidden and the 4:09YouTube video appears so we've now 4:11correctly added our conditionals and by 4:15using these new features we did not have 4:17to add any new fields to our CMS 4:20collection we now have control over 4:22which content displays on which page 4:25simply by editing our CMS 4:29that's it for the first example let's 4:32now continue to the second example where 4:34we take a look at how we can add a 4:37transform to text 4:39above each paragraph We have this little 4:43title that says review 4:45but it's the same for each item in our 4:48collection ideally we could reference 4:50the movie title here as well this 4:52release also adds the ability to 4:55transform text in this case we could add 4:58suffixes and prefixes to existing 5:02variables so first I can pull in the 5:06actual Title Here by referencing the 5:09title variable 5:11this is the same thing we do over here 5:13to add a transform I'll click on content 5:16and then hit add transform and I can 5:19select a prefix or suffix 5:22here with the suffix selected we could 5:25add any copy at the end of our variable 5:29and this will say lock review I can also 5:33switch this to be a prefix allowing us 5:36to type something in front of our title 5:39variable like maybe movie review and 5:42then the title I think I prefer the 5:44suffix but I want to highlight that you 5:46can also chain your transforms in other 5:50words I can add another prefix here so 5:53we can really construct a little 5:55sentence around a variable 5:57and now we have applied both a suffix 6:00and a prefix to a single variable this 6:04is a very flexible and Powerful concept 6:07that allows you to get really creative 6:09with your CMS content for this demo I 6:12think the suffix suffices so I'll remove 6:15the prefix and that's pretty much it for 6:17the second example here 6:19I can cycle through a few different 6:22posts to see that all these titles are 6:26working correctly 6:28with our transforms in place let's have 6:31a look at our third example I'll go back 6:34to the index page 6:36and I would like to add a little badge 6:39next to each title if the rating equals 6:435 stars 6:45as you can see we currently have two 6:47movies that we have rated 5 stars 6:51I have already created a little badge 6:53let me bring that back 6:56there we go so now we have this little 6:59batch that appears on every single item 7:01within our CMS collection list 7:04so how would we go about doing this we 7:07know we have the rating number in our 7:10CMS collection and we have this little 7:13badge in our collection list so the 7:16condition we're after is checking if the 7:19rating number equals a certain amount we 7:23only want it to be visible if the rating 7:25equals five so with our condition added 7:29I can start cycling through the values 7:32and as I do so notice how the batch 7:35starts appearing behind each movie title 7:39that has the same rating and with the 7:43value set to 5 we now have the batch 7:45showing up correctly only for the movies 7:48that have 5 star ratings with these 7:51conditions we're essentially adding 7:53little bits of logic to our CMS pages I 7:57think this is super cool as it allows 7:59you to do so much more with your CMS 8:02content in framer if you would like to 8:05try some of these new features yourself 8:07I'll be sure to include a link to this 8:10demo project in the description down 8:12below that's pretty much it for this 8:15video we hope you enjoy this CMS update 8:18thank you so much for watching and see 8:21you in the next one

TeachesCMS Pages / Dynamic Content CMS Fields

Also coversCollection Lists Collections Frames Links Stacks Variables

Watch on YouTube ↗

‹ Framer Update: Scroll Animations

Boost – Responsive Website Template ›