--- title: "Exploring the Hygraph Asset Manager" description: "In this stream, Fabian and Tim explore the features of the all-new asset manager in Hygraph. Upload via API, transform assets via GraphQL, and more! Ask us any questions in the chat and join the community:" date: "2024-05-31T18:28:50.000Z" url: "https://timbenniks.dev/videos/live-hygraph/008-ht-scjkem9q" youtube_url: "https://www.youtube.com/watch?v=Ht-scjKem9Q" playlist: "live-hygraph" image: "https://i.ytimg.com/vi/Ht-scjKem9Q/maxresdefault.jpg" tags: ["cms", "api-design", "content-ops", "cloud-infra", "frontend"] --- # Exploring the Hygraph Asset Manager In this stream, Fabian and Tim explore the features of the all-new asset manager in Hygraph. Upload via API, transform assets via GraphQL, and more! Ask us any questions in the chat and join the community: Watch on YouTube: https://www.youtube.com/watch?v=Ht-scjKem9Q ## Transcript [Music] all right we are live and we are one minute late because Fabian and I were just looking at our documentation and how stuff works and what we were showing today anyways um thank you so much for joining we have I'm looking at the stats we have 10 people watching yes and that the moment we have 10 we're one minute late anyways um I hereby introduce you Fabian Bela can do I say it like that how do you say it yeah it's Belita yeah it's more German so more German it doesn't look like a German name to me yeah it's I know where it comes from it's a bit weird it's super super rare name so yeah I also don't know ah there you goes same for mine the only thing I know in if you if you translate this to like English you can you can take it apart it's Ben and Nick which means am nothing so I think my forefathers were just super lazy or didn't have a job and that's the only thing I know and the rest is that a lot of them migrated to the US and that's all I know anyways we don't have to talk about genealogy like that um Fabian tell tell the audience what you do maybe that's a good start sure yeah I'm Fabian I'm a product manager here at HRA and I work specifically with our core team uh which is a very backend heavy focused team so working with the content API working with our caching infrastructure but also working with our asset system that we recently released so the new asset system that we also will showcase a bit today and Tim will try to yeah show you everything that's there and maybe also break some things we'll see hopefully not but yeah we kind of just did but that makes it fun isn't it yeah yeah because um last week I actually did like a sort of a workshop like stream where I actually build something with this asset system and so now we kind of just want to continue that and then talk about the stuff I didn't talk about then like for example what happens if I upload an mp4 can I get an image out of that to share it on the screen as a poster or what how do I upload a file or how do I import a file from a URL and so maybe what we can do I can share my screen and show the folks here what I built and then from there we can just enrich it and do a a few other things so this is what I came out with um last week so I built kind of this stock Library starter fake website it's kind of a starter kit you can actually clone that code if you wanted to let me just see if I can put that in the chat and so what's cool about this is that this actually directly makes you clone that High Ground project I put that in the chat for you and then there's also some code involved um and let me just give you that as well this is one in nextjs which probably most people use and so what I've done here I have a bunch of Assets in hgraph and I just query those and I didn't do that much data wise so if you look at my data I don't have any schemas other than the default asset that I upgraded with like an ALT tag so I can add some extra information and so when you look at all the assets they're all here I uploaded them in badge basically and then you have a little alt tag Sun batch on Beach and so this just comes from a website called pexels.com and so um I query them and I put them on the page and where the asset system comes in is that these are now actually squares and they are super compressed and they're using an automated image type so not the PNG that it was but like a webp or an aiv or something like that and so that's what was in there and then when you click it actually shows you a bigger version and you can download the original which has no compression at all all right those are the basics um so Fabian I know that when I said the words aiv somewhere in the back of my brain it said are you sure we have those so could you talk about that for a second yeah sure of course yeah so if it's something that we'll also release quite shortly um yeah it's right now we support webp all the other basic image formats but a have something that will be coming in the next couple of weeks there's still some things we need to tweak um because it behaves a bit different than the other images it's also coming from a video Codec actually so there's a few things um that need to be fine tuned there but overall it will be included and as Tim mentioned the most common use case will be using this Auto Image where like we can actually detect what the browser or the client wants to have as a image form and then return the best one um based on that now yeah so maybe now that we're on that let's see if I actually in inspect this and oh that's I'm not sure that's the right place here we go I inspect this and so let's open this in a new tab so this is my the image that I made smaller with a bunch of transitions from you know High graph you can see here I have a resize fit crop and there is this one image oh yeah here it says Auto Image I think I can zoom in yeah here we go and so could you kind of explain how do we know as a CMS that for this context whatever comes out of this thing is the best one yeah it's it it feels like magic but it's actually pretty straightforward because the browser sends an accept header for every request that it makes and in that request header it will include sort of the order in which they want the browser whatever sends it the client can also send it um what what they want the image to be in which format and web is typically in in Chrome will be the first one because they prefer it and that's essentially what we take a look at and then if there's like maybe maybe there's some weird um stuff in there we'll just fall back to JPEG and return that as as default so we're we can just look at your browser that's very interesting and so here I is would it be the content disposition um it's actually in the request header I think these are the response header so if you scroll I think it's a lower um below the response heads oh so them yeah there's the request heads and there should be an accept somewhere yeah there it is it has a certain um oh yeah it can do a few things exactly and the first one we find yeah first we find we will select essentially and it's not supported yet it would be the one that actually would be returned but now it's we and I can only imagine because this is just me being a super image nerd at one point point if we wanted to you could actually look at the image and see hey if we compress this to a webp or an FIV one of the two is going to look better or one of the two is going to be a smaller footprint if we wanted to do stuff like that we could I imagine potentially there's um story there's some really cool stuff that our team has built um specifically yonas and Melinda around the asset system where um we obviously wanted to make sure with this new asset system that it behaves similar to the old one um built a test suit that does a pixel comparison between both images so we can do a transformation on the old system and compare it to the new one and have a pixel sort of check and see is it actually the same image or not and if there's some um weird differences we can check out why it happens and maybe tune that a bit oh that's super interesting and so with that in mind I'm sorry I'm gonna go all over the place here because I like this stuff I'm very excited by it if you look at this like you see fit golden crop height width compress is this the same URL structure as we had before yeah it's exactly the same same one we want to make sure that it works the same and there's no breaking changes the only thing that will really change if you will move from the new to the old system or the other way around from the old to the new system is the start of the URL um because now you have that Regional asset URL um there's a new environment identifier coming right after it so the CU ID right after then you have the Transformations and right after the Transformations you have the CU ID of the entry the asset entry itself and that's kind of the the main difference yeah because before we had this ID let me zoom in again so we had this ID for only before and now we actually have I'm trying to zoom out with my laptop here so actually we have the proper file name after it but if I don't add it it still works right there we go yeah it still works same it's an optional thing you can add yeah it's all these lovely extra things that make this thing more mature and then people just like things like this right all right so I just went all over the place with all my questions because of my excitement here so what if I had a whole Archive of images on another website and I kind of want to move them to hgraph because of all these fun features um what would be a way to do that programmatically because I don't want to drag and drop like a thousand images for example is there a way I can kind of maybe I I want to know about two first I have them on another website and the URLs are accessible and then the second one is let's say I have them all on a hard drive I kind of want to upload all the The Originals um which one do you want to start with to explain to me I think the easiest one is probably the one if the asset is already somewhere hosted so we have a URL that's publicly accessible um and that's now with the new asset system relatively straightforward where all you need is the URL and then you can send off a create asset mutation and it will will be uploaded in the background yeah okay that makes sense so let's say we just go back to this this is the site that I graphed my images from initially so how about we grab something like this because you can see how the crop Works to go Square later on right so let's just grab this one and they actually add a bunch of stuff to the URL as well I don't want that I just want the the the completely native one okay so let's copy this and and then I imagine we have to go like how does this work now do I just go and write some JavaScript and add like a like fire it off and it just does an Ajax call or how does that work what what do I do um it works with the native gra API so as soon as you have any sort of token or anything even in the web app if you go into the playground um you can already test it out um and essentially essentially just allows you to send a mutation that creates an asset and there you have two options that you can choose between sending something out all right so we are here let's so just let's just one step back we can actually do a mutation in our playground and it just works y that that's pretty awesome and so um let's see so we are mutating with the URL upload so I already pasted this people we prepped I seemed like I'm surprised but I knew this anyway so what I did now wait let me is there a way to make this bigger so we can actually show the the I don't think on the left side you can um the Explorer you can also can I also make the third button from the top the the folder one you a little bit above this one yeah and you can that's not a height there it says a plus this makes a new folder how is this hiding something my apologies this is not something hgraph Built This is actually an outof the Box graphql playground okay so what we're doing here is we're mutating and we create an asset and the data with the upload URL is actually the thing I just pasted in here the stuff we got from here right and then we just retrieve um other things like after it right so let's see so what we just did is we basically just quered High graph with my delivery API um you know ability or how do you call is like the fact that I'm allowed to do it and so we got back an asset so let's actually go to our assets and see there it is and so it does make it a draft so I think well when we look at this my ALT is still empty so I think they probably have a title here here this must be an AI generated Altech dat did a woman in a trench code with white boots 100% the scrip that's fine it's true okay so let's just publish this thing and so now we can just go back to my website and see if it's there there it is and now you see here um how fast that was right so it already made like this transformation was basically just done and so I haven't seen the next page yet so the transformation for that image that we're going to see is not done so what it's doing is it's um making it the maximum width of 1280 and it doesn't touch the height and it does some compression so it optimizes the thing a little so let's say that's how fast it is dude that's great isn't it so and then here we have the original which is rather large and so doing it on the Fly that fast that's super cool it feels like we might be in business to do something with asset management but maybe not we are CMS in the end anyways so that worked pretty well and I imagine if I had a thousand images and I had a list of URLs I could probably just write some JavaScript that Loops over the URLs and every time it Loops over a URL it kind of just does this mutation right is that how you do it the main benefit now is like the same way you would normally import content entries right if you have like a thousand blog posts you want to Port over you would also create a mutation to create all of these and just Loop through that essentially and the same you can do now with esset because it's also part of the API it's super easy if it's just hosted somewhere you have the URL you can just run through it and also one important thing to mention is the moment you send off this mutation it's firing off like an async process so behind the scenes our asset Handler will actually then take the URL make a request to it request the asset download it and then handle all of it and it happens as you saw in like a matter of like not even a second it's done um but it's still an Asing process just to make sure that you can send off a couple of those and they will be worked on after each other and then everything is available so that means I could do this thousand queries well I I won't do them in parallel but I could go over them quite fast without getting timeouts and stuff because it just makes sets a queue somewhere I imagine yeah as long as you are in within the rate limit of the actual content API um you you will be good to go yeah awesome so now the next one what if I have to file on like my hard drive and yeah um that one is a little bit more involved right exactly yeah this is something where we make direct use of pre-signed URLs um and that's something that I can show yeah I'll just put your I'll put you on yeah so I have a similar project which I use to to code alongside in your demo um for for last week's session so I have a few Assets in here and the way that it works is as mentioned somewhat similar so in this case uh we don't need to pass anything and create as a data object we can pass an optional fire name if you want to that will overwrite whatever file we pass and then what's more important is what we retrieve from that mutation so um there's an upload object and in there we have a request post data and this one is super important because all of these fields we will need to actually then send the asset to our system so what happens now if I click this is um I get back all of the data and now this is the important section that we take a look at and um over here I also prepared a pulman where we can make a call like like this and use a local file that I have on my system so what we'll do is I'll just head over here essentially and copy all of this over um quickly do that there's the date and so essentially what this is doing is it's asking hgraph can I please create an asset and get the access for the coming hour to do that and here are your here are all the credentials that you need to put it on our Amazon S3 bucket essentially yeah yeah that's pretty much how it works and there's um even there's this expired ad field here that I also asked for and you can see it will expire in like 15ish minute like 25ish minutes it will expire and if you send it afterwards it will not work anymore but for the meantime it will work yeah and so um why we do this is actually pretty important because there are so many like security issues where you have an open S3 bucket that's not being secured and then people can just access it and that's problematic right and so Amazon has made this amazing system where you can kind of have a signed URL and kind of open it for 10 minutes only for that person and that's what this is doing and then it closes it again because imagine if you are like a magazine uh a fashion magazine and you're uploading all your photos shoot files that you're only allowed to use for like three months you better not want those stolen right so that's basically the way um I'm just saying hi to Melinda what's up dude welcome so um so you're you're filling out all the headers exactly so I filled out everything now um we can see that there's like an unsplash image I have attached which is just local um the important part is this sending as a form data and it's also a post request those are the important parts um and if I now send it off I will get back a just 204 no content because there's nothing actually to be returned from our side um head back here because this essentially goes directly to S3 right yeah pretty much it just tells okay we got the request all fine and you can see there's the image here now it's the same one from unsplash we just created and that's essentially it and now it works the same way and everything's there W yeah what's up dude so it feels like to me it's kind of a lot of steps but it's also a security thing and the fact that you can just ask hgraph in this context I want to create an asset for this delivery API please give me the this this the URLs basically or give me all the information yeah could you do you always have to do this I imagine yeah because you have 15 minutes basically to do it yeah like essentially like with code it will be a lot simpler because in code you can just call the mutation and then you get back to response and you can just use these fields in a pre- sort of created mutation and then a call so it's much much easier than what I just did with copying it over manually um but yeah it's for every image you want to upload you essentially send this mutation you get back the information you actually do it within 15 to 25 minutes um and then you just go through it essentially and and do it one by one and so if I have a list of like 500 images do I do create asset 500 times or just once no 500 times will be they all get their own thing essentially yeah exactly okay cool well that then that's makes the code super easy essentially cool so um now that we've covered that um that I'm just looking at my notes there's a few other things I wanted to go into so um we have a bunch of different um ways to transform these images right so let me just um put my screen back on and we go to our lovely documentation because there's a ton of different things that we've built in and I feel like with our previous system we did have a few but it was third party so we didn't really describe them and people didn't really use them but now we build them build it ourselves so we have much more control over them and now we actually did describe them and so for me what's super interesting what I as an image nerd never saw before you can do all these transformations in your graphql query which to me was a little strange because but actually it isn't but to me because I would always say just give me the raw file and then I will just make a b like an algorithm to create me a URL on the place where I want the image to show in that context as it turns out in graphql you can you can query one image 16 different times by just naming it differently in graphql and get a different version and so you can almost like template what you get back and so while I'm saying this maybe I should actually show you because it's super interesting um let's see if I can from my code base copy something to show right so we have oh yeah here let me just put this one in uh you know what I'll just grab all assets it's a little bit easier and let's hide this one and so per page well I want the first 30 essentially that's what this is all right so what we're looking at here is I can just grab a the URL of this um image and then I can add transformations to it which is crazy I can also just ask for URL on its own right so the URL is actually this one so this is the native image and then oh then the one where we added this transformation to oh by the way I found this out in last week's um doc um Workshop when I click this I actually get documentation here on the left that's super cool I don't get it for all of them though I think it's um it's always a top image the top part where you can get it so if you click on the transformation one the other one you can drill down a bit yourself ah you can drill down on the left side you have the Transformations and then you have the image or document and then each of those those will have different tyes it also describes what it does and what the values have so it's essentially while you build your query you can already find it out you don't even need to go over to order dos to find out exactly so basically this is in addition to the docs if you didn't want to go there like that you could potentially just have a look at like hey so my my format is Auto Image what else do I have and then you can have a look at the different ones so that that's pretty cool to see in here so can I also remove this yes and so the grit version has a transformation for the image so it resizes it to 300 by 3 00 and crops it as you can see I didn't put an X and A Y here but how does that work if I put an X of 400 here what would happen um I think in this specific one it won't support any coordinates the specific has another crop that you can do outside of the resizing um where you can actually pass Dimensions yeah okay this a super quick one when you resize just do a crop as well but then you have a dedicated crop which is way more powerful and it has a bunch more okay cool and then so we're compressing and this essentially just removes the metadata from like it is all the how do you call this stuff again all this metadata there there's this specific name it doesn't matter it strips it so the image is much lighter which is very important and then you can set a quality and then you can say the document output here so if we wanted to do another one one specifically for Fabian Let's see we do want oh a transformation ah miraco yes exif this is what I meant this is the brain you get from me from a day where I also made a video and had a bunch of meetings my apologies okay so so we could make a transformation here so let's see what we want to do we can actually go to our documentation and so I kind of just want to blur it true because why not so we're going to add a blur on the image transformation here right and so let's see what just just this let's see what comes out so we made the normal URL that's the default then we have fabian's one so let's have a look what came out oh that's definitely blurred and so we can actually say it's added blur equals amount four in there so if I wanted to make that bigger I could potentially also do it on the URL yeah so Fabian in your mind what do you think people should do always in graphql or maybe build a bit of JavaScript that concatenates a URL together I think it really depends on sort of the requirements and what you want to do with it right with even with graphql it's then super easy to build some kind of source set where you have just different image types for different Siz yeah that's super easy but there's also maybe developers that just prefer to do it by hand they say give me the crl I'll handle the rest I'll just make sure everything works together nice with that's me personally yeah so that's that's the beauty of it you have both options and you can just choose whatever you want so um it really depends on use case I would say it's not not anything where it's black and white you can say you use this always there and the other one there um but yeah you have the option of both but that's the nice thing okay so I also want to do the crop on top of the blur and so this would go inside right okay so yeah it would be another option in image yeah I've never done this kind of transformations of images in graphql before and it I must say this is really cool because like you just said I didn't even think about it I could make an SRC set in here yeah that's pretty cool okay so now what we added is the following let's have a look so we blurred it and then cropped it so that blur is is pretty big oh that's interesting the blur seems to be bigger now that the image is smaller oh I know why it cropped it out now so we we had the crop um and so we're cropping x y and then width and height so yeah we're dealing with let's see can I focus that there's this oh yeah there we go so X Y 100 by 200 and then we crop that out that's pretty cool and so with that in mind if you wanted to build like a focus Point selector custom thing in hgraph you could actually do that using actually High graph's own image manager that's pretty fun exactly so there there's so many of those things that we can do so in what does a quality setting do essentially is it like the old school like I have jpeg quality setting one2 200 is that literally that yeah pretty much that's essentially what it does just like making sure that the image has a it can reduce the size quite drastically depending how long you go but obviously it also might change how it looks so it's always a thing where you need to play around a bit and see how it looks but yeah exactly so let's see what what Jonas is adding here so one thing to keep in mind and graphql forces you into the right direction there is that you want to avoid having two Dynamic URLs to improve caching yeah exactly so if you constantly dynamically create them you might get a different transform every time if you have different if you put it in different orders and stuff where I guess in graphql it always stays the same like my personal thing against it would be that in the graphql query you might not know in what context a user is going to look at this image right because maybe um I want to do a picture tag and then on a small screen I want it to be square and a certain size and then on a big screen I want it to be it's full size and not square and not cropped whatever um the thing is when you do a graph QR query with that in it and then next year you do a redesign you have to change your graphql queries so that that would be my personal drawback of it but then imagine personally having to build a URL concatenator for all those things having to write your own unit test and your own support system for that that's also a big thing to do and so I think as def RS in HRA we're going to have a look at how it works with those URLs though because um meta Frameworks like Astro KN next they all have image implementations right and I can actually probably show you I built this one a while back uh let's see here so let's zoom in so there's actually a n image provider with hgraph I built this one a while back basically and so um you can just do next image provider this and then only the base URL and then you can see you can add the fit the format the quality all that stuff you can add it in like this and it concatenates the URL for you um which is also pretty cool like if you have a look but then you have to look at that code right you you'll see I've had a bit of pain writing that and it's unit tests it's like there's a lot of crazy stuff going on to actually make that work and me personally I love this stuff but this might not be for everyone and now that we have the new system in place I'm assuming this still works but I didn't add all the properties here right and so you see there's lots of ifs and eles so if you are a developer and you're into doing stuff like this make sure you do it obviously however the base URL is Media graph assets.com and I don't think that's the base Ur all anymore right yeah it's the regional still work though yeah it should yeah it's essentially the same thing like the all the Transformations work the same it's just that the the URL would be a bit different with the base URL containing the N ID as well and then afterwards you have the handle so it's well luckily you can change it there's a b URL option that you can just put in and so there are lots of meta framework that most people use that give you like hey we have an image tag so you don't have to make your own source set kind of thing like n gives you a lot of extra things on top where it basically just um you can do this like this is not native you shouldn't normally do this but they will make a whole Source set for you from this and all these Integrations also the one I made will just follow this and so there is um you know an argument to be made potentially to do it on the URL um let's see um so we've added the blur we've done a bunch of stuff so is there something that we are still missing from this whole story like I I I think two things and so if you have something else Fabian let's let's let's think about that to so first what about files like we're looking at like images now right but what do we do with like PDFs or what do we do with Word documents or maybe even videos can you elaborate a little bit on our features around that stuff sure yeah um so for PDF specifically um so at the end of the day you can upload sort of any file type that you would want right there might be 3D objects there might be Doc xes there might be PDFs anything really um and specifically with PDFs there's also Transformations for that available so if you have a PDF you can transform it to an image which might be cool to just show a preview real quick somewhere yeahum but at the end of the day with all of these with docx you can just upload them and if you request en URL it would depend on what the browser does if you open it or you can just provide a download option for it as well so docx might be rendering in a browser if it supports it and the same for PDF and then you can just yeah take a look at it as like you would with any other PDF URL that you get from somewhere and do we have sort of um an opinion basically on how we stream stuff because I did this conference talk a while back where I had MP3s on a server and I played guitar along these backing tracks that were MP3s right and so when I actually got them from h um they were streamed in chunks which is probably the most optimal way of streaming something but one hicup and my whole song would be destroyed because all the timing is based on whatever that song is because I had chapters and guitar sounds and all that what what are our opinions on how that works or do we have any at all yes so far with the new asset system at least there isn't really any yet so with the first iteration we mainly focus on these kind of image types and just being able to support all kind of file TS to just upload them and then also just download them um but there isn't really anything related to yet streaming video or um audio files might be something we take a look at in the future but for now it's really unopinionated when it comes to that yeah exactly because you can even set in your video file itself in the first few bits you can actually encode it that it would stream the whole thing or download the whole thing and then show it or start streaming for 5 seconds and then wait for download there's so many options there I can imagine that's kind of a headache to build in and that's also why lots of like companies that actually do this kind of delivery stuff they don't focus on on images they focus on images first and the rest later because that's yeah kind of intense and I can imagine if you want to do it even more seriously and be a video streamer that's going to be pretty serious stuff definitely yeah and some M has focus on it more than others and I think we have a a pretty good balance here but in the end I took the mp3s and put them on for sale directly and then let their CDN stream them and then it was fine and so for my use case this was very specific right I just needed the whole file to be downloaded essentially um so are there any alternatives in our cms4 assets what if I need a dam what if I need have some Zoo super serious image needs what what else do we support for this oh there's quite a few um that we have there's I think if you take a look at our Marketplace there's a bunch of apps related to um digital Asset Management I'll show you okay so let's do oh there we go oh there we go that's cool and so essentially you could grab one of those and then this is an integration into hgraph right yeah exactly so how it works with most of them for example cloudinary is that you'll get a cloudinary field um which essentially mimics a bit the way that our image field works with normal high graph images but it connects to your cloudinary account and you can select images that are actually hosted in cloudinary um besides our um internal um oh yeah I I'll show this in a second because I have that running actually and so oh yeah this is actually important Rina saying that we have integration guides for these apps so if you're interested in let's say using cloud inary or mugs for example low one of our devs made a really cool um starter kit called high graphx that uses mugs for video streams and I'm using Cloud andary basically I think for everything I love it I'm one of their ambassadors so I better not use binder let's be fair um I could show you a little bit of that um let's go to High graph and let's see where is my oh it's not on this account okay let me quickly log into another account and show you how I use um Cloud andary uh alive in kicking this is my personal account and so as you can see this one is not in studio yet because it's it's I made this like a pretty long time ago so assets is empty but the website is full of stuff oh something went wrong there um let's just quickly reset oh this is an extra secret config nobody's supposed to say but that's fine I only my user account can do that so if I log out let's say let's say and application just nuke everything all right so there's lots of images around here and so um when you actually there and you'll see many more if I log in I don't have to do that now but lots of stuff comes from cloudinary actually in here and so there's no assets in here but if you look at the content um let's say uh let's do the ACDC For example actually here you can see there's a cover image and then there's artwork of this song and it's all coming from cloudinary so you can see the image here and then there's an add from cloudinary button and so I will just open up one that's in draft so I don't destroy my my production so when I click on this it wants me to log in into cloudinary okay we can do that I'm almost so worried that I'm showing my my passwords and stuff but luckily I use one password so we're quite good and so this actually now opened cloudinary for me and I can actually go to folders and this is now my dam essentially right so there's lots of images here in and also have this Alive and Kicking folder where I'm basically just dealing with all the things I need to deal with I can tag images and I have like different folders of other things and I can make um like there's even presets here that I can use to already crop it in cloud and area and so now I can just add an image here and so let's save this one you know what I'm not going to save it but I will do an API playground so you can see what comes out so uh let's see let's do a new query for one of those songs or let let's just do all songs then I don't have to do aware and let's find the cover and the artist so what we get from this is actually this whole thing comes out of cloudinary right so we have this cover and then there's an ID a URL and then the tags the types like you see there's a lot of different things so in hgraph we're basically just storing this object that comes out of cloud andary and with that you can do a bunch of stuff so um is there anything specific Fabian we should go over in in this regard um I think that's pretty much um it depends what you want show I think there's nothing really from my side no no there's nothing super special here like they just give you like this is like the original image and then in cloud andary in my own cloud andary setup I have a few of predefined things like you see there's these derived URLs and there are some basic Transformations that they always do and basically what cloud andary does and we don't have to go too deep into it now but they essentially do the same as what HRA asset manager does but but then like 2.0 version of it like it's their whole business you have basically have Photoshop in the browser like um there's one thing that's kind of fun to show um let's see if I can do that on the screen here let's let's log in let's say I select a few songs and so without going into what this all means I'm basically creating the four songs that I would play on stage as a user but the cool thing is I use cloudinary to um share an image that I concatenate with all the information from hgraph so that's basically this so I chose these four songs right and so this image is actually created with cloudinary and so this image is my GitHub image and these assets actually are all set up in high graph by you know the song that we were looking at and then the images come from cloudinary so it uses cloudinary to fetch High graph stuff that then fetches cloudinary and then it concatenates all this together and you can see how big that URL is because it's all layered like this whole thing was made in code so if I now fote on another song this will change so you can make like that goes really far we don't have to do that with hgraph because it's not our business but it's super cool that we're very close to it so me as an image ficado is I'm really excited by that stuff so I see we have a bunch of people watching if anybody has a question regarding our images this is the time because Fabian knows everything I just have some opinions he just knows it all so feel free to ask a question and if you don't know a question now um we can definitely um invite you here you can actually um come to slack hyra.com because that's our community where you can ask any questions and also we have a specific feedback Channel about our new studio launch and the asset manager and people can ask questions there or if you want to show something and say hey this is what I made with your stuff please do so here because we love that right and I think oh this is a better Banner join the community on slack and so also all the documentations you just saw you can see those here at high.com docs and also and not everybody might expect this except for the people that work here this was all free so everything you see we just saw you showed you you can just use it on the free account and so I just had to do all my ctas now so Fabian is there anything in the end um that you wanted to talk about maybe your experience building this thing or maybe you have a CTA of your own go for it I I don't have a CTA but um yeah I just got say also shout out to the team like the the project has been going on for a couple of months and it's it's been not super easy the whole time and I think we found a really good solution and um as we showed last week I think performance also speaks for itself especially around cloning especially around transformation so I'm super happy that we were able to do it and um I encourage everyone to just give it a try um create a new project try out a new asset system play around a bit upload some stuff do Transformations if you find anything that doesn't work please also let us know bya slack by our support tools we're more than happy to help and and fix those things but yeah um very proud of the team and what they've done that's great I do have one question just came up what if I have a project that still uses um the the older system because they're both living next to each other how do I get the new one exactly yeah this is something that in this quarter that just started uh we're we're working on right now and we want to provide migration tooling how it exactly will look like we provide some more communication around that when the time comes but um you can expect that in the next couple of months you'll have the opportunity to try it out on your on your existing older project that still uses our old system and then just try it out give it a go and see how everything works um and then yeah that's essentially the time to switch all right and so I imagine every new project you make now will just have the new system exactly because it essentially functions similarly it should feel the same but faster yeah from the web perspective like if you use Hy Studio or if you use classic it will be kind of the same the only difference is the upload widget so if you upload a new asset via the web app um from the API perspective or the transformation it looks the same there's more additional stuff and the URL is a bit different but that's mainly it and then the rest is kind of similar awesome all right dude thank you so much for your time and showing me all the things and dealing with me failing and clicking on weird buttons um thank you so much for we'll see you next week cheers byebye