How to integrate Cloudinary with headless CMS w/ Colby Fayock

[Music] all right we are live I just clicked the button to go live and it kept spinning while our countdown was going it's like oh more like three seconds left we were live so I'm pretty happy it's working good good good stuff welcome Colby we done stuff like this before like on stream I don't think so right I don't know we've you know we've definitely collaborated over the years but I don't know how often we've actually hopped on I don't think anyways people we have Colby here from cloud andary and so did you just get promoted recently what was your fancy title now so I'm the director of developer experience engineering I cloud and yes thank you for acknowledging nice like sometimes you just need to like highlight these things because yeah I appreciate that yeah because these things it's really hard to figure out where in death rail you can grow and what growth paths are and very true how business are you how Tech are you you're traversing that really well so I just wanted to highlight thank you so for the folks who don't know what cloudinary is I don't think there are many but do you have like an elevator pitch you give someone like at a conference or something a little bit so we're the image and video API for the web and kind of what that means is we handle everything from upload and management to delivery and once it's being delivered from cloud Nary we can start to do things like optimization transformation so maybe remove a background or uh dynamically crop and resize based off what's uh what's in the actual image but then we actually have some really cool AI uh oriented features right now including uh image analys so trying to determine what's in an image to maybe automatically tag an image or generate captions from that which is really cool and AI moderation which is and the thing that I like about how we're really taking a dive into AI is we're really thinking about how it's going to help make your workflow more efficient as opposed to you know some of the stuff you see out there so yeah you just slam some AI on it right that's not really it's not gonna stick yeah yeah I remember the early Cloud andary AI that wasn't really marketed much I made a video on that because I had this thing where my image wasn't in the crop that I needed it and so I would just use clouding AI to just you know make it wider and just guess yeah and that worked pretty well the thing is um it wouldn't remember because if you make the pixel like one the image one pixel wider it would have another background but things have to grow and this was a while back though yeah but it's funny how times have changed especially in the last year because you know we've always had a lot of the interesting we've always had some interesting Ai and machine learning features but now that it's become such a big hype now it's marketed completely differently exactly yeah you gotta have you have to jump on and you know what I might be because I don't really know all the AI features you guys have so we might actually go into that a little bits at one point cool so today what I wanted to do is like um because cloud in a is like the API for media on the web right and so I want to dive in a little bit how do you then connect to all these systems because you don't really have a front end to Showcase you just have the output of the asset yeah for sure and so we'll just have a look at how for example we integrate that with cloudinary and hgraph but then also there are so many people out there and it's fine that they're there and think that way but lots of people think an image is an image just whack it on yeah not not quite like that now in these days yeah it's it's it's a little bit more complicated than that just a tiny bit the funny thing is I came up when cloudinary wasn't there and we realized that IM like web was it was so slow or we couldn't get stuff done so I had all these like local grunt workflows that would then remember grunt oh yeah oh yeah and we had gulp so I could code a little bit more that would then just like change my images on built and it was holy crap so much going on and there's a bunch of that now again when you look at like Gatsby image and next image and stuff for images I used to build that myself and we had like image magic and stuff and then Cloud andary came and my world changed yeah it's crazy it's funny there was a lot of you know really creative and compelling uh Solutions people were able to come up with and really helped you know move the web forward from the media perspective but yes you know every time you add a new image it starts to slow down your build and all that exctly all that it it does have it its effects yeah we really needed to do it because I worked um it was a PHP CMS kind of thing but it was built for social media so it was right when Facebook started we built this thing but we had a lot of people just uploading images their own stuff so you could never control what they would do yeah so we had to build a bunch of things and then we even like a friend of mine my colleague he built a system where you could have an a sort of an XML layer in which you could reference which images would be layered on top of each other like we did a few cloudinary esque things yeah in 20087 and I'm so happy we don't have to build this ourselves anymore right right it's yeah the tooling has come so far and it's amazing what we can do now yeah exactly so perhaps while we code a little bit and you can guide me through what we're doing let's chat a little bit about okay so what is this why do I transform this image into like a different file format or how does this optimization work or why do I need to crop for different things what do a picture Tech like all the things so I want to kind of just make it not too complex with people were because we could between the two of us overflow people with so much information about images they never want to touch it again let's not do that yeah let's not make it too awkward but let's show why this is so powerful yeah that sounds good um yeah let's see um you know what we're only six minutes in so we have like 55 minutes to do some coding like normally we talk a bunch let's just I'm going to just start with code today let's stick in yeah man we have a lot to explore so it'll be good oh yeah and so one thing that I love about especially what you do with cloud in here is you just started some open source stuff yourself yeah and like how do I render this image in nextjs and now that I think that became the SDK now yeah how does that work so it's it's officially in a community SDK so the distinction is um where the team that's basically uh supporting it so we have our official sdks which come from the product team but then we have the community sdks which the developer experience team uh supports in in this case right now it's me um so it kind of came from an idea where I I saw nextjs just really you know blowing up and I was a big fan of myself so I thought it would be an interesting library to start to build something around and they already had the image component so it didn't really take too much for me to create a nice little wrapper around it and ultimately uh provide a better mechanism for delivering Cloud URLs so um the start of it came from there which wasn't too bad but then I just kind of kept pushing it and pushing it to see where I can go and um people seem remember you do un tests and stuff for that URL compiler yes pretty rough yeah yeah it's the thing with the the AP is like it's so powerful but it's uh complex because you know the need to be able to handle all these different situations so being able to capture all those in the API with an intuitive SDK around it is you know a challenge yeah and so for the folks who don't specifically know in Cloud Ander you have an API on the URL and so of course you can set your transformations in like templates in the system also but you can also do everything on the URL and that makes things very cool and I just clicked on one of those links and so when I click on let's say react here is this the stuff you worked on or are those like the core um libraries so those are the core libraries the one that I worked on is the nextjs specific one this one is yours right and it looks like I have some dark mode issues there that I need to address interesting can I switch back how do I switch there should be I wonder if maybe on the homepage there's not a changer but on the the docs Pages if you click get started there should be a changer at the bottom left yeah now there we go oh I need to fix that it's perfect yeah and I knew Brian was going to say this that like Mo like and actually at HRA we are kind of a light mode focused organization yeah I'm pro light mode for browsing the web now my code editor is certainly dark mode but mine yeah I I find it easier to read personally it's it's yeah this this feels it feels good light mode in this and our designers are really into the light mode as well um okay so this is something you built which basically uses these core components bundled into awesomeness essentially yeah so I guess it makes it super easy to kind of just if I want to write an image tag um I just I'm just using next image and then say with height crop and go and do anything I want right get yeah I mean so for all intents and purposes because it's a wrapper like it should be pretty much you're able to just swap uh like it's a drop in replacement so you can change image to CL image the only difference is um you should be referencing your public ID as the source now technically you can pass in a full Cloud n URL but it has to have a version number in that and that's simply because it's very challenging to uh parse the URL without that version number uh due to how it's structured so I I've done that many times for cloudinary when I made my own one like I would always say I grab the ID and then everything after is Transformations and the image ID and everything before is like my cloud ID and the rest of the URL yeah the tricky thing is you could C somebody could name a folder the same name as a transformation so you can't you can't assume like where that split is so that's why I require the version number so make sure that I can confidently do it rather than it being like you know maybe it'll work so the amount of split zero and split one in this is big but this is cool right so this is basically a drop in replacement for the next image component essentially but then exactly all these props go to your like URL Builder and something awesome comes out yeah exactly uh so I I have a originally this wasn't the case but I I abstracted the logic behind how I was actually creating the URL um with the intent that I would be able to take that and publish it into different Frameworks and that's exactly what we did so yes I did that one I did that in the next one I think as one of the early ones yeah so n uh Nu is a flavor that we currently support as well spelt um and they're relatively up to parody we need to get a few extra updates on the Nu and the spelt versions but um they support mostly all the same features the same components and um you know hopefully we can add another framework sometime this year but we'll see uh and TBD on what that is but I kind of already know what we're going to do I think so so too but that's fine people will know but this is cool because I like companies that are API first and they don't specifically have like because you can use cloud iny without an SDK I've done that for years which I like because it's super open you can do whatever you like but then def rails come in and make these you know developer F velocity kind of things like DX makes it allier faster you can do more I know my Boss Brian is here in the chat and he really we think the same way with that and it's super cool that defs can do that and so for sure yeah like developer experience is huge for a developer driven company in that sense totally and I think the interesting about that model isn't you know I think some people might think that we can just kind of do whatever we want and that's not necessarily the case but one thing but one thing about some of that freedom is that we can experiment a little bit more since we're releasing these packages as unofficial um we can really try to see how people might want to interface with it in a completely different way right um where the the SDK the API for this SDK is different than we see in some of the other uh Cloud n packages so are people finding that more compelling you knowes will that start to influence the official packages and so on so um I I think that's an interesting position that we are in yeah and I I'm very Pro doing that because you will get probably pool requests from people from the community yeah that make your product better yeah right now I have some dependency updates but yeah I saw that yeah just checking it's all you that's one of my favorite Parts is being able to get that and you know I I'm really happy every time somebody submits something and having something that I can uh go into hotober fest with for instance you know that's a lot of fun and um it's it's amazing to see what kind of contributions people are willing to support this with and what I like about this as well is that if you do that for developers they will tell their bosses use cloud andary yeah yeah and that's that's the long game here in the end we all kind of have to sell right it still started blend for sure but you know being able to solve those problems is uh the the most interesting part about it and being able to do so in an intuitive way so the the easier we make it for somebody the the more compelling it's going to be you know exactly so um I'm looking at a bunch of fun stuff here I think we should just get going and have a look at what this all means once have something running yeah so I've done a bit of homework to speed everything up a tiny bit so I just made a new project and that's it's called hgraph cloudinary life and um I can show you this in our new studio build but when Colby and I were just looking at like saving the cloudinary image that I had it just wouldn't save let's see if that's still the case oh now it's good okay so we're going to stick with our new studio build because that's what most people will see um all right so what we have done oh there's an okay what Kobe when you live stream would you press this or not H I don't think so right we're living on the yeah but hey I mean you know you know what this is the cool thing and I hope some folks of our product team are in here we can just go back to the old Studio or that is and it just works that's we're living on the edge it's cool okay do it so what we did in HRA there's a new project and I have just added like a simplest model because here it's really about how we integrate and so there's a slug there's a title and there's an image but this image is actually a cloudinary integration so when you look at the apps I actually installed cloudinary and in there the only thing you have to do is just add your Cloud name in API key so you can do a bunch of different things oh nice with SL that's that's easier than I remembered I think uh the last time I touched it you had to deploy your own version so it's cool to see yes we have done a few pretty big updates like our app interface and all that that whole approach is uh a lot more mature now you can still do it yourself you can still run all the things if you want to make a custom one but we have a bunch out of the box now it's much easier it's great exactly um if we look at them because we we put cloud andary there apparently you see there there's a bunch of other ones also and so all of those are like built either by us or by our partners and so that works super well oh that's I just did something very marketing I like it why not there we go ctas out of the way good so I've just installed this and so if you wanted to use because I know CL Cloud andary pretty well you could do it with only your Cloud name but when you add the API key you can do a few more fun things and so um oh wait Rina is saying something before it was possible only with the uix uh yes so that wasn't really like an app it was like a a custom field you you would just make and that's it and now it's an app so Cloud andary could actually have a bunch more now we can actually give you Cloud andary a page where we can embed them I don't think that's the right use case but you could yeah but can also have like the edit image now where you have the edit popup and there's a whole bunch of other things you could do now with this that be exactly and so I just made a page with a slug a title and you know I'm just selecting the image like this and so oh I clicked that away so this is my personal cloudinary account because that was easiest for me to install um so yeah there's just a whole bunch of different images I could grab I don't know why I click into this but let's do this one oh I Kobe I do this all the time this should not be blue this should be blue I'll pass that back to my to the team good feedback okay so I just select this and see if the safe now works it seems cool okay so if you now have set this up because this is all graphql the the oh we have the BG it now did not sa okay it is what it is we'll go back let's see if we now have the correct one oh it did save actually maybe it's just that state that hasn't there is a state there exactly um all right so in our API playground this is actually a page so where the page with SLU Colby give me the image the SLU and the title and so here you can see what we save for um Cloud andary so there's actually a whole bunch of stuff so you could think we just stored a public ID of something but we actually just give you all the things that cloudinary gives back and I think you can even if you in Cloud andary set up a bunch of like transformation upload Transformations and templates and stuff they will probably also come back here yeah right yeah and I I think the thing that's interesting about storing the entire resource object is uh when you start to think about things about how you're going to actually implement the images where you need things like the width and the height uh which are critical for avoiding things like content layout shift exactly yes and we actually require it in the nextjs image components so without that you're kind of just guessing uh without having those values yeah and so width and height is super important in images so browsers know what your aspect ratio is and they can um make space for you already based on whatever CSS you have as well so you don't have the flickering and you just said that a a lot nicer but you use the official terms I just said it like how I feel about it it flickers and it good breakdown yeah exactly it's like when you go to a page and you see an ad pop in you know yes in the whole layout shifts you know and we used to do all these like CSS trickery to make that work now you just give a width and a height to an image and the browser will do it for you that's great so you get all that back and here's that version number that we just talk talked about that we need um and there's a whole bunch of stuff I personally don't understand why we we not only get the secure URL but also the normal URL but do you know why that is or is it just Legacy I think it's just for legacy purpose yeah exactly anyways um this is a whole bunch of stuff and the funny thing is we if we implemented this whole thing ourselves we could use a bunch of these but for now we probably just need WID height and the public ID of this image because then the next tag will just do everything right so let me show you how I did this in the code well it's just a next app with the app router or you call this the app directory right app router yeah app router Okay so directory but it gets you into the app router oh yeah it it is like I'm I'm still learning next as we as it is anyway so when we look at the content here so um we have the title Slug and the image and so this title I just hardcoded but we can make that into the real title so this is as empty as I could get this project just so you don't get overwhelmed with a bunch of things you have to install even we didn't even install graphql tooling I literally just post with fetch to the high graph endpoint which is stored in an environment variable and then you post your query and you get back your page this is how empty I wanted this thing to be and so um here I typed in that title but we can also just do this and there it is SK beautiful so we have established this works and I'm assuming most folks watching this um have seen this before if not the code base that I'm using is actually um the the high graph implementation guide so let me show you that because my colleague romino who's in the chat has actually worked really hard on that with our other colleague low and so here we have a whole bunch of implementation guys that like the simplest you can get it and this is how it works so we have Astro next and next you have guides and then you have different kind of starters with step by steps and then there's a bunch of information here so um if you want to know more go to our docs all right so we have the stuff so Colby what do I do next to actually render this image the most idealistic way that you can do it with your package perfect so let's open up the installation instructions just so that people can kind of visualize uh how we're going to walk through this yeah that Mak sense so it's it's pretty simple uh we're going to install the next Cloud package we're then going to configure an environment variable which is going to be our Cloud name Y and then we're able to import the component and use it uh start using it right away so yeah let's get started by installing that package that seems simple enough famous last words all right all right so while this goes let's grab this environment variable oh that worked nice perfect so we have one already so we don't have to make anything new here and now I always just have to I never remember mine because yeah somehow I never made it into my name or something I could have done that but I set this up so long ago I don't even remember when my account started probably like 2016 or something and you haven't memorized it already no but I use it like every day maybe this is showing my age but that would you memorize this is not fun right uh what we got dwarf comp nerd yeah something like that kind of fits yeah all right um I guess I just start my server again and We're Off to the Races yep yep um so yeah now let's get started uh actually importing it so um if we head to that uh to your page file um oh yeah so now now we'll want to if we're going to look at the instructions uh we can go to the seald image basic usage but um ultimately we're going to uh import the IM clld image component from next Cloud Nary all right oh I imagine it's like this yep exactly oh look it already knows perfect nice yep now the one caveat with using clld image right now is due to limitations on how I've been able how I've not been able to solve uh opting this into a client component without adding the flag for it we need to add the used client at the top I was expecting something like silly like that yeah so when I what I recommend though is when you're building it in your application you can create a really simple wrapper around it and I even have an example in the documentation for how you can do that um that way you can import that in and you never have to use the use client if you're in a server component so you make a component where you say use client import the thing and return the same children exactly and you can even import the types uh from the package so that you can type out the props and not have to worry about that as well right but let me ask this annoying question what if I don't have JavaScript does that mean because nobody has JavaScript until it loads so there's no image rendering how does that work so my understanding is that the client components will still do a pass uh on the server it's just the difference in then providing that extra layer of hydrating uh that particular piece on the client so that means if I say use client this little chunk will be hydrated on load and others just won't be but they all are SSR first yeah that's my understanding and what Ed client is actually doing is providing I forget the terminology that they use but um it's creating a boundary in the compiler for how it's actually splitting it up um so like a commment or something yeah yeah where we going but yeah no uh so now that we have the image component we can uh start using it so exactly if we scroll down the required props is going to be your sorts with height and ALT so ah I see what you're doing there oh yeah you know where I was going with that right yeah I'm I'm so in the few world it's crazy um page do image but then we kind of need to figure out so that'll be public ID right but where ah no this one we do have it so do we just do Le let's just do whatever this image is giving us for now yeah because we might want to change that up later like we want to crop something for example yeah let's just get it rendering for now exactly and then alt is also a requ prop which comes from anjs image component but I I fully support the idea behind requiring the alt value completely agreed the thing is though I'm not sure I filled out that in yeah likely not so for now I will just use the page title fair enough yeah kids um don't do as I do do as I say this is not good add an ALT please but we we have to render something right yeah I'm excited let's see loading takes a little long what's happening whoa oh I know oh right right right right oh so I didn't think about that as a little well because I'm querying so let's just make the component then yeah yeah so uh let me double check what page it's on but it should be right in the doc dentation oh co um I think it's yeah so if you go to nextjs 1314 in the left sidebar yeah so if you scroll down there should be a little Sni copy this yeah perfect the fact that you need this in your docks makes me slightly unhappy I know me too it's it's one of those transformational moments like in two months three months this will not be an issue anymore I I'm hoping I hope so the I I've I've spent a ton of time trying to figure this out but part of the issue is having to have an image component that supports both the pages router and the app router and I haven't I haven't quite figured out how to configure the project to allow me to do that while being able to support all the features so it's you know I'm I keep getting close but then I keep hitting uh speed bombs but you know one day I'll get it so that exactly I won't have to do this and did I do this right is should components be outside of app um so that's it's really uh your preference I prefer to have it outside of app but some people do prefer to have components inside um inside like that so I wonder why you're getting uh it is not happy with something refers to a value but is being used as a type here did you mean type off oh you loaded it as this right yeah this should do it it somehow doesn't think you're using it do you think maybe your uh the typescripts oh how often have you done that yes here we go oh my God it's always the same yeah okay good I was worried that my snippet was going oh it's still showing it's not happy are we missing something here so this refers to a failure but it's used as a type did you but you're it's really not oh I did TS do I need to do TSX T yes that's be TSX yeah good catch my bad that's definitely happened to me before I spent so much time trying to figure that out look at the types script coming through all the things we can do I like it perfect 701 more nice yeah I know you know the interesting thing is like uh part of like the best practice of components isn't to go overboard with props but that's that's kind of a challenge because of the amount of features that we want to be able to expose with the component right and um it's not the it's not like everybody's going to use every single component or prop at once uh but being able to expose the ones that are going to make sense for them is important exactly yeah and this is cloud andary has almost too many it's that's that's part of the challenge it's because there's so many features it's hard to kind of pull some of those really deep amazing ones out uh I've done some ridiculous things with Cloud andary where like solution engineers and I would just sit together like how do we solve this thing and then we come up with something that you will never have in a prop here yeah but like we had this one use case I I love to tell this sometimes where we had a super fancy high-end luxury brand that had 15 years of images for products with like from earrings to watches to bags all the things over the years they had an army of um interns kind of photoshopping these images together with layers and then adding fake Shadow but for the new design we did a few years back these Shadows were just horrible we we should not we wouldn't need those we didn't want those so we had like 5,000 or something 6,000 so we all uploaded them into cloudinary and we had two or three URL schemes that just looked into the Photoshop file removed something centered it made sure the padding and margin all the things were like correct wow and I think we did they had in mind a budget of hiring like hiring like a bunch of Photoshop people to do it and I think we solved it in like three days that's crazy I I still haven't played around like all my time here like to the point of the features all my time here I still haven't played around with Photoshop files and amazing things you can do yeah yeah we we went pretty deep into the product team when we did that one that's amazing but like if you can use an external tool even in the free tier to do that in a few days versus a few months it's ridiculous right yeah absolutely think about the time you'll save on the like the other problems right exactly and we had a lot of other problems was all good okay so we're are you kidding me did you uh remove use clients and I did yeah um maybe restart the server yeah it feels like we need to do that because the whole oh you of new stuff little buggy here and there it's fine the the amount of time um are we good okay so it's really not happy h i wonder I would get that you want to try commoning out the component just to see yes so I loaded it like this and so when I go here it is actually that thing yeah okay so it it might not even be that h you see we're we're basically just learning live on stream this is my favorite part absolutely unless try to one thing this is assuming that we don't have a bug um you can remove the next directory the next directory uh locally oh one of those yeah exactly and then restart the server to see if perhaps there was a little weird thing there yeah that has happened before I agree part of the issue with the app router is there's still some of those little kinks here and there and you know that's assuming that it's that and not the component or something before when we didn't have any of this it worked fine so I'm wondering what's happening yeah what did we do here it also says it's out of date but I'm not sure that's the problem here H okay so when we didn't have this at all it worked fine right yeah could it be the components directory anybody in the chat if you know okay we're back to where we were so what is going on with this unexpected end of Jason input Jason parse you know what maybe oh no but we're not actually parsing here anything here I wonder if we actually get even get back information from agraph maybe the I was about to say can you confirm that the the fetch response is uh coming back yeah so this is coming back um dat page image I wonder if you're missing uh the property on the because didn't you change the structure a little bit I wonder if it's yeah well what we should probably do is have a look at like okay I am actually allowed to read all the things on a published local on all the local so how about I just also do drafts so we're 100% safe we can query everything then we have an endpoint and let's see if I actually connect have the right endpoint did I did we screw something up here perhaps yep Ah that's it there we go come on the joy of programming the joy of fat fingers on a keyboard and a live stream the struggle is real yes okay let's see yep it's it's still not super happy I I think that those so the fast refresh you can see the line that's from the previous ah it's from the previous one so yeah so the console log was maintained that's kind of nice that they have that yeah yeah fast refresh is fantastic we okay oh yeah fantastic awesome so what you see of course is the image but what you don't see which is a good thing is that this is actually an optimized image so not only are we delivering that image we're opting you into safe defaults to try to deliver it as performant as possible which is basically what you do here right in the yeah so starting with the F Auto q auto so the F Auto is going to say let's determine the most efficient format that we can deliver this image in based off of the the device and the browser that you're visiting it in so if you're in Chrome Safari whether you're on a desktop or uh your your phone that might have a different uh support for those modern formats so uh that'll be dynamically returned based off of that device and the browser now q auto is the compression layer of it so it's going to try to compress it as much as possible while retaining the visual quality so that's part of the differentiator with cloudray compared to some of the other compression Solutions is that we focus entirely on the visual quality is that's a critical component of selling a candle or makeup or whatever that is you know we want to make sure that we retain all that critical detail yeah and so is the Q auto it kind of also looks at what is my file type right that F Auto chose because maybe a web p is different in in its optimization versus like an aiv or something right that's a good question I don't actually know that answer um yeah and also if it's sees like a big white chunk like what we see on this one does it then say okay I'm just going to optimize a little bit harder on different PL parts of the image or is it I wonder if it that smart you're asking some good questions that I've never been asked before those those are good questions I'm not I'm not sure yeah good question this sometime like especially q auto has a bunch of presets inside it also and when I still because I had to work at one point for yet another luxury brand that didn't choose cloudinary in the end because the IM of the watch wasn't sharp enough based on Q auto interesting which is super I I couldn't see it yeah but apparently they could and they went with another system that just didn't optimize as well wow well the interesting thing is uh within the last few months I think it was this year uh we released Q Auto 4 so we're using AI in the backends to yeah and not just as a Fluff for like we're using I to kind of determine uh how well we can compress these images and just you know provide an even better mechanism that this is where AI is going to shine I guess yeah I I think the most compelling us cases of AI that I've seen so far is not necessarily the generative the generative is interesting and visual visually appealing but the the the analysis angle of it is where I see the more compelling workflow efficiency gains exactly so now it it kind of rendered it super big here because we kind of set it like I think it's even going to like 3,000 in its width or something it's like super big but the image is kind of we might not have chosen the Right image because it feels like the source is not super high quality but it is what it is it's it's a good start yeah it's okay so what it did now is it made an image it loads it lazy and oh it's it's 1080 by 1080 but of course it makes a source set yeah and so do you want to attempt explaining sour sets but not we could spend an hour but maybe we shouldn't yeah so souret is going to give you the ability to define a list of URLs that could that the browser will ultimately choose based off the conditions um now traditionally uh what we see here by default the nextjs image component which I I inherit the capabilities of will generate a one times and a two times image so uh you know one that's uh depending on if it's retina or not now then the sizes which usually correlates with it um which I get maybe don't need sizes for the 1X and 2x uh for onx and 2x no but for the other yes okay so sizes is what helps you control and help the browser determine what to pick it um so this one it's just saying if you have a retina or not sorry go on yeah so if it's a retina screen you're just going to load it like twice as big yeah exactly but I don't think this image has this size though because it's a 1080 by its normal width so sure uh sorry yeah know so so cloud in area is just kind of liberal with it so even though you make it 3,800 because probably it's C limit it doesn't actually scale it up right exactly so you know that's and that's an interesting question on one hand uh I was talking to Eric poris about this about what would be the correct move to do um on one hand it doesn't make sense to scale up the image because then cloudinary is doing that unnecessary scaling where um so that's why we're using C limit so what it's going to do is it's going to only scale it up to the actual image size and it won't go beyond that um but what's happening is now the browser is going to be the one that actually upscales that um so it's you know it's depending kind of how you look on it whether Cloud should do that upscaling should if we allow you to do that upscaling and so on but ultimately I was thinking that probably doesn't make sense for cloud n to unnecessarily upscale it it's compute I guess so that too but we're making an assumption uh for that image that's when I Implement Cloud inary myself I never add the C limit because I won't do this but that's just me because I'm a geek yeah but I imagine it this could be sizes property and so size is essentially explains to the browser on this screen width my image is going to be this big right and so in this case it's like 95% or something of the screen yeah so we can actually do I'm not sure exactly how this would work in um in next image like I could do this and then it means it's always the same size the screen yeah I I usually just do that for demonstration purposes but you can get as gra how we changed it now right yep so now it's gonna happen it's going to generate all those different sizes so that the browser can ultimately determine what size makes the most sense for the actual browser size and so where this becomes extremely awesome is that basically your like and this is where in my opinion like the next image and the next image and all these like IM implementations by meta Frameworks simplify the thing a little bit so they cover like the 85% of people but actually if you do something that's slightly more complicated because you have an art director that wants to do Insane things you can actually say um my source set is going to be relatively big because there's lots of different Source set items I can use right so I have a 640 I have a like a bunch of different ones so Cloud Nary will on the Fly render all of those and then based on the czes prop that looks at my like query um like media queries I can say on this screen size or when it's retina or whatever I want the image to be this big and on that one it's going to be this big and then the browser gets to choose from The Source at which is closest essentially and it's so complicated to even just explain this but it gives you lots of cool options yeah and the for this particular example the biggest thing is simply performance you know if you're loading a phone you don't need a 3,840 width image so it's only going to load the lowest one that matches that width of the browser so that's going to really help people have to consume less banwi and interestingly it will load the biggest one it can find for your context and so when you then start like resizing it's starting to load different images um anyways um this is is something that comes out of the box with next image it's cloudinary has a few things like this as well right with like your browser hints and stuff but maybe that's too deep for this stream yeah yeah uh client hints are interesting um client hints I don't think the um the browser Community is quite there yet to to have broad support but um it's a pretty compelling feature I made a video on it it has 30 VI I don't think so it's I just don't think that you know I don't think enough people know about it to be honest yeah anyways that's basically just to keep it short your browser can send a few headers to a server saying I am this is my browser size and this is my context and then the server can say oh based on that let me give you the best image and then you can even say to cloudinary because cloudinary is quite clever you can give it a few extra options that say well don't render like if I size my browser pixel by pixel don't render like a 100 images just grab like a media query and and render the one in between just give me a few back it's super cool but yeah maybe in a few years people will use that and then we have never have to think about this again yeah and there's there's another option is IT sizes Auto if I remember correctly Eric Porto was telling me about it it's a um I think it's something that's coming somewhere we we don't support it I don't believe it's well I'm guessing next image component doesn't support it but it's something that I believe is coming down the line that should be even more interesting for automating this process exactly so let's let's have a look at the stuff we can do because we we're like we have 15 minutes and now let's let's do some fun stuff of what you can do um with this image stack and for the last two minutes I'll show you a little demo of something that I took that to like the extreme with one of my projects but for now what what are the most like interesting use cases for stuff like this so I think the the most basic one that usually is the most compelling is the dynamic cropping and resizing so um one example that I like to use particularly with e-commerce is imagine you want to just show all the images in a grid um but all the images are different widths and Heights uh you know landscape portrait um and that kind of looks a little wonky as it's going down and you don't want the creative team to have to cut out every one of those images so we can that process completely and this image is already in a square so maybe we can use a different shape to illustrate yeah let's just grab another image okay actually I probably have done that use case a few times so I think I actually probably have the right images for that folder let's see and try to grab one if you can where the subject is on like the left or the right side of the image and we see why in a second I think I did it with like this oh yeah but this is not enough right because they're all kind of the same but this was one of those fashion shows and then we would like Square them up and do stuff but let's see if here I think these are even cloudinary assets from back in the day this also doesn't work I think maybe that purse would be a good one or yeah it doesn't matter but let's do this one yeah let's shoppable bag I used that for a shoppable video demo oh nice that's video yet man this this could be like a long stream and the nice thing is a lot of these features uh are available for video as well the same Dynamic cing resizing is available for video all right perfect okay so the very first thing is we want this image to be a square right so how can we do that um so if we head back over to the code uh now at this point we you're either going to want to calculate the image width and height if you want to get the true one but typically you try to just find a width and a height that makes sense I like to get the biggest width and height that I can find in my uh on the page since uh ultimately it's going to be responsively sized let's do something like this yeah right yeah but then what we're going to do is we're going to add an additional prop of crop which we're going to do I do this yep that's perfect so in react in this case should it be like this because it's a number or um so it it really depends on the uh the library that you're using I'm forgiving in this so I'll let I'll let you use a number or string because people have different preferences so I don't want to require a certain one um but now so we have it resized but what it's not doing is we're not going to automatically assume that you are trying to resize that um the width and height is only going to be used for the image tag itself but now we need to actually tell clowner that we want to crop the image so let's add a prop of crop and to start we can use uh we can just use the string of Phill and I'll get to the object in a second here oh so let's not do the objects for well that doesn't what you were going to do is fine um but yeah or this should also do it right that should be good yeah okay let's see oh cool so it now made it square and just fills up to whatever size we set it guess exactly um and the nice thing is generally speaking I think the focal point is a little challenging here because of the the contrast of the the strings on the side but it's going to crop it based off of the subject of the image so um if you have an image uh like a a wide image where the person's on the right hand side it's automatically going to crop to that particular position let's see if we can find one because that actually makes a ton of sense to show that yeah um I'm just going to open some stuff yeah I think I have something here um yeah those are all in the same like maybe something like this yeah maybe doesn't hurt to try oh here we have two people or this one yeah let's let's give that one a try oh I keep clicking the wrong button I'm definitely going to pass that feedback at one point it was probably a business goal to have people upload there we go okay so it centered it on me for sure oh you're you're muted to sorry uh so what cloud is going to do is using AI of course we're going to automatically determine where the subject of the image is and then we're going to frame that crop based off of that now that's something that you typically have to opt into but with the SE image component uh we're automatically opting you into that now uh what's happening if you want to just open up that image quick in the in your browser uh just to show the URL oh yeah exactly so the reason that's happening is the gravity properties so we have a Gore Auto which is saying that we want to automatically set the gravity to that uh to that subject oh that's this one exactly so if you you can just do it in the browser here if you change Auto to Center which is the uh API default which you can set with the gravity prop if you prefer but just for illustrative purposes oh yeah so now I went to the left basically exactly because now it's not centered within that frame so we could do something like this as well you put E Yeah so it's it's basically Compass directions so you have North uh east south and west and that's going to determine the top right bottom left side of what you anchor the image to nice yeah so this is already like especially the auto one can you I think you can do this as well right faces yep um though I wonder if you need the on enable I don't think for the the only thing with this is because it's not cropped in or it's not zoomed in enough like you're not going to see as much but it's still going to center it to the face but if we don't have fill but we do crop it will sum it I guess oh interesting so so the way that that's going to work is crop is going to take the original dimensions and it's literally going to just take that width and height oh that's that's Square from wherever you started yeah where Phil is going to try to fill the available space of the of the width and height that you provide yeah so we could potentially show that off here when we're in the app and I just here so here if I did crop would that rerender I'm not sure uh it does but it it doesn't show any R rendering until it actually updates but we can see that that update so that worked and so I think what we could probably do is this now wasn't it something like this yeah so the tricky thing with Cloud Nary or the way that I'm constructing these URLs to give an intuitive interface here is you have the problem where uh the way that the crop is uh by default set is at the end of the URL now if you're just doing this that's uh that's completely fine but when you start to add other Transformations particularly ones that include relative sizing you're going to have all those relative sizing first and then the crop and then as you have those resp of images it's going to show different images based off of those relative sizing so to prevent that we can instruct the image to crop based off of the source of the image so what we can do is we can specify a source of true uh so the source uh prop or property of true and then the type of um and then the type of crop uh so it would be the type uh property for this one oh sorry of course because yeah and then um whatever you want now I think one that we could demonstrate this with is uh thumb so if you change the thumb and then maybe if you just kind of resize the browser a little bit after that loads hopefully this demonstrates it properly I'm not sure it might take a second to load in maybe not but um so depending on the something something happened here exactly so because it's trying to uh create a different crop based off of a smaller or larger size exactly so that that creates an that creates an issue though because with responsive sizing your image should be the same no matter what um yeah so I think it was just catching up on the on the rendering it was catching up a little bit Yeah but we saw the effects of what could happen if you're not opting into the source unless we have a bug here this is interesting yeah I'm not sure maybe because of the size of prop but also width and height it's it's a little bit so that's what this should be solving can you uh uh well I can debug that later yeah all good but ultimately ultimately that's what that should be solving um is that we crop first and then we uh provide the responsive sizing after um I'll have to look into that but I think maybe the the rendering was just catching up that's what I think because at one point when I like do like a shift command or like an an cach yeah something is is sometimes oh you see it's yeah that's weird but it might be due to the fact that the sizes is set to this and the width is height is set to this because this now actually doesn't is not correct with that so maybe that's what's going on you see immediately it changed yeah yeah I I'll try to see if I can reproduce that Imes are hard folks it is but uh hopefully hopefully it was just stuck in the in the application but that's what I'm assuming so I don't so false isn't really going to do anything it'll then just apply it to the end oh yeah but that's where you can have different resulting images based off of uh the browser but um let's uh before we since we're running out of time maybe we can show like a couple of the uh more visual features as well yeah sure yeah um so like if we go to the documentation page um you can go to the CD Imaging examples um and that's just a good opportunity for anybody to kind of scroll through and see the available features uh now you can remove the background but it requires the backgrounds um oh that's like a add-on right yeah so if you don't have that enabled we can't do that right now but um we can do things like generative fill uh generative recolor then we have practical effects like just simply blurring something um we have image overlays and you know from here we can kind of just whatever you're feeling like trying out we can give a try okay I'm just going to have a look I want to do the generative fill okay the thing I like to say is uh for this use case is um thinking about uncropping an image so when you crop an image you're losing data of the image that you're uh cropping so the fashion models uh for instance that you were showing earlier if you crop that you're ultimately going to lose those models in some way because of how narrow uh that frame is but if you uncrop it or expand it uh you're not going to lose that data and going to just still be able to provide a visually interesting image we're going to use that one and you know what in my video that I did on this I use these models oh you did nice yeah yeah yeah I think that's why I have them uh where did I find that um looks right takes a sec to load it in I guess or not oh there it is yeah so whenever you load an image uh from cloud array it's going to be processing that image on the fly so the first request might take a few few seconds because image processing takes a few seconds depending on what it is um but ultimately once that image is processed it's going to be cached and then delivered from the CDN so um it'll be lightly fast after that so now this would make it square right oh yeah okay so this is still working but this is not really what we're doing here so let's have a look at what this what we would need so we say crop is bad yeah and we can start that just to kind of visualize what we're doing where what uh what the crop of pad is going to do is it's basically going to add uh empty space to still give you that 500 by 500 image without removing or whatever size image it's going to add empty space so that you're still able to get that size I think it probably makes sense to retain a square since the image is Portrait um yes I'm just going to add a few things so we have the defaults in play okay so I just made it that it's it's it was actually um a standing image and now we're making it a no like a horizontal image it's gonna be I think you need to swap I need to swap those over yeah so we're going to be wide a like three times wider than the height but originally the image is not like that and of course we're going to need that fill background prop let's see what the AI will give us what magic it will play and I should note that the generative AI capabilities are still in beta uh so always good to say that yeah so it is rendering it has a what's happening I'm just opening it in a new tab just to have a look so this one um you know the generative processes they take a little extra time of course but because it just generally the models do uh any AI that you use uh for generator processing typically is going to take a little longer but again once it this takes longer than I'm used to oh there it is this one already has it but dude how good is this this is crazy that's pretty cool and something that's interesting about this I like to think about is imagine that you want to have an image on your like a homepage Banner or something you want to use this image you don't have to like and you don't have the rest of the crop to fill that space right like you can use this maybe then add some text on the right- hand side of it and now you have a banner that you can easily use yeah so if I did it like this we we don't add it and we just do fill exactly it's G to be pretty horrible I guess it probably sums it in a DA on his face and then make it super wide yeah exactly yeah yeah and you know it it doesn't necessarily look bad but it's kind of defeating the purpose of showing the entire model right like for these images we want to make sure the entire model is shown look at that this is great so um now that we kind of have seen all these like variables and stuff you can do go I'm not sure you've seen the thing I've done but it it it broke my brain but it worked let me show you something I've seen some of the stuff I you might have seen this one actually I've seen it yeah it's fantastic I think I yeah like let's try this one oh no this is not this this is not the best this is this one is still relatively simple oh yeah this one so what you see here like the browser doesn't even want to render the the URL like it's it's crazy and so the background images these four are Dynamic coming from these actually come from high graph and not from cloudinary they're they're they're fetched in and then you have the Alum art also coming through high graph into Cloud andary this image is me because I logged in with super base and then the meshup and this like these these extra little bits are just overlays and so in this one I'm not really writing anything with with cloud and but there's lots of stuff going on here and so I can maybe quickly show that code just for like we don't have to learn it but just look at what that looks like it's a little intense but that's what you can do with cloud in area if you have Dynamic data it's actually pretty ridiculous and the point is so I you didn't uh touch on what's actually happening so people are voting for that and that image is generated based off of the votes right exactly yeah uh so that could be any album art that's being set on top of it whoa something I think it's in like here let's see oh yeah here so this is creating the mhup image so I'm actually using your um URL concatenator thing here nice and so I'm finding the songs for that user and you see there's the public ID thing that's basically cloud andary and then there's a bunch of different ones and I sometimes have to par some stuff out because ACDC with it slash inside breaks interesting okay there's a few things like that so it figures out the song and a a bunch of things and so I have a background that I just start with which is black I fill it up and then I add overlays and then so I find the public ID and and then I have like and then you're Precision it you're adding some effects I'm like making it less like opacity is less and then you have them these are like the four four things like Northeast and then we have the Northwest and you kind of just build the whole thing up it's this is you could do this in the next image tag that we just looked at you don't want to do it that way you probably want to do it in JavaScript or typescript that is you see I'm even adding like borders and stuff that's super cool and then you you see then it constructs it puts it in with my cloud name and then it returns and then so the other one I had is the the 199 one here I actually write I just voted and then this is dynamic data that's awesome so this information of what you voted for is coming through the API in the database and so I rendered this in a custom font also so Cloud can be shared on social I don't know if you have that set up but like you can really EAS this is OG image okay perfect yeah yeah so the ID is this um when you actually share your mesh up I won't share it now but it actually let's see oh yeah it's loading the preview now would be nice if it worked right yeah it's uh but the image is rered already oh it has a problem with that that's interesting because the OG IM I'm not using your OG image thing by the way I'm just making that's why I'm just kidding yeah that's why exactly anyways um we are overtime I just wanted to show how fun it is and all the crazy stuff you're potentially able to do with cloudinary and it's the the most interesting parts are the automation aspect of it you know enhancing your workflow and even touched on like all the media flow stuff you guys have like there's so much extra yeah a lot of stuff lot of stuff like as a devro for that company you have endless stuff to talk about it's almost too much yeah yeah that's that's the challenge it's you know there's so much that I want to talk about in such a little time so exactly and we all know that um thank you so much for your time um where can people find you on the interwebs so pretty much everywhere at kobby fok um nice pretty simple I'm the only one so should be find exactly same for me I can I can basically just use my name that works pretty well and so for um I have a few tiny sdas to do CTA sorry you can actually join us on slack hyra.com if you feel like you want to try this stuff and we're cloudinary Partners so if you potentially want to use all that you can come through our partners or actually on slack and just show us what your building with all this crazy stuff um well we talked about the docks already there's lots of stuff there um yeah that's it and one final thing everything you saw today also in Cloud Ander is free account like all the things work for free that's pretty crazy right um yeah I think that's all the ctas done thank you so much for your time I know it's early for you yeah no worries you're just having your breakfast before the stream it's always a pleasure to you know hop on the call with you and awesome man thanks so much and hopefully see you soon maybe in person at once let's see yeah let's hope all right cheers dude bye cheers thanks