--- title: "Uniform and Cloudinary play very well together!" description: "In this video, Tim shows how Cloudinary integrates with Uniform as a headless DAM. https://docs.uniform.app/integrations/content/cloudinary https://uniform.to/discord https://cloudinary.com" date: "2023-07-20T07:58:38.000Z" url: "https://timbenniks.dev/videos/uniform/016-oqqj-tu-urc" youtube_url: "https://www.youtube.com/watch?v=OQQJ-tU-urc" playlist: "uniform" image: "https://i.ytimg.com/vi/OQQJ-tU-urc/maxresdefault.jpg" tags: ["composable-architecture", "cms", "api-design", "content-ops", "cloud-infra"] --- # Uniform and Cloudinary play very well together! In this video, Tim shows how Cloudinary integrates with Uniform as a headless DAM. https://docs.uniform.app/integrations/content/cloudinary https://uniform.to/discord https://cloudinary.com Watch on YouTube: https://www.youtube.com/watch?v=OQQJ-tU-urc ## Transcript this is tim from uniform and in this video we're going to be talking about how you can add a dam system like cloudanary to a composable stack and at uniform where i work we actually deal with how you can orchestrate your composable system with all these headless sources and we make it friendly for content editors and developers alike which is kind of a cool thing and so let's talk about dabs because traditionally a damn system is a system that's not really connected to your front end of your website it's kind of like a system where you put your media assets you enrich them you categorize them and kind of where your center of truth lives for your media assets but then if you want to serve them you have to actually get them out optimize these assets somehow so they work for mobile phones for laptops with retina screens and different sizes and then you go for it and you put that in your system however we now have cloudinary and they've been around for a while and they're actually really cool because they started off with just serving images in a really nice way through their cdn optimized the whole thing and then they added damn functionality on top which makes it really cool because it also works in a headless way and it fits perfectly with how uniform actually wants to do an orchestration of these headless sources so we can now add a cms a commerce engine whatever you want and then add cloudani as another integration so you can actually connect up these images to your front-end components really really easily and so let's actually dive into the browser here so i'll show you how it works with uniform this is my uniform dashboard and in this dashboard i have built my press kit website so this is the dashboard for the press kit and i have a few integrations and so you can see we have a ton of headless sources that we can put into uniform from cdns to salesforce to cdp to cms's to search engines a whole bunch of things and in this project i have cloud and airy markdown and for cell and cloudinari is that dam system that we're using for the media assets of this project and for cell is used as the cdn you can actually see here there's an integration with for cell of is this website being built at the moment what are the logs things like that so let's go to canvas where i'm building my pages so before i go into this if you don't know what uniform is feel free to go to docs.uniform.app and read our documentation or at least the beginnings of it so you can get a bit of a grasp of what we do so here we have a landing page and this landing page has a structure with a few components that kind of represents my press git website right so it has a hero component which has an image and some text then there's a little introduction there's like a biography like with a small one and a big one and before i continue let's just have a preview let's have a look right so this is my hero there's my two biographies there's some images some details of me this is basically a website for conference organizers if they want to have me speak at their conference i send them this so they have all they need so let's put these two side by side all right let's move this slightly here okay so basically this is now in preview mode i click the preview button and so we can kind of change up how this page looks on the live website and so how about we look at that cloud in their integration let's imagine there is no image and so i've set up an image parameter on my hero component that looks at cloudinary so if we want to add a media item um it logs you in into the cloudanary cloud and this is my damn system and in here i have images videos like whatever fun stuff and also folders and you can actually upload stuff in here directly if you wanted to you can do bulk there's a whole bunch of things so for now let's just find an image i recently uploaded and then hit insert and also how about we just change this name and hit save and so now the preview gets updated with the new stuff that we added and basically this is a relatively simple way of using your damn logged in to what you as a user are allowed to see in the dam access that and add an image and you can directly see that in your website of course if your frontend has implemented the sdk with uniform we can also now click on edit and so here i have not implemented this directly in my website so you won't see the results but you can really easily do that basically here you there's just a bunch of specific crop sizes that you can select or you can just say you know what i kind of only like the bread and let's make it square and just let's go to the bread here here we go so let's select this and then you can even say the width and the height should be it should be around this how about pure breadth and then you can actually select it like how do what what are my dimension this is kind of an overview here for you and so now when i export you haven't seen anything change right but what is because it's just it's not implemented on the front end um another time i can show you how to do that it's really easy when you actually look at the source of what uniform has stored now this is actually the public id is french right and it's a type of image and it has a width and a height and there's the original url but also there is now a transformation stored and it's cropping from to 400 by 400 that's the square the crop plus the the 400 i typed in and on the x and the y coordinate of where so it goes to the bread and then it does a whole bunch of other stuff and so you get this transformation in your front end you can just apply it to the image url in cloudinary and you're off to the races and so that works actually pretty well and if you actually look at this media library here you can also upload different things you can build upload things you can drag and drop stuff around and while i'm at it i'll just put back my original image and hit save and there it is we are back in business and i've done this for a few other images like we can look at the media for example here we go to media and i've just set up i want to have four images for this one and you can actually then do all the same things i just showed you select another one change them up and we have now combined the world of a damn system that works in a headless way plus in a normal way plus we have connected it to how cloudinary serves these images by giving you the code in the front end to actually render that i know i haven't shown you that but you can find it in the documentation so if you liked what you just saw or you don't and you want to discuss stuff feel free to join us on discord you can go to uniform.2 discord and join the fun show what you've built all that stuff see you there cheers