Add and Configure Cloudinary UI Extension to Add Images From a Cloudinary Media Library

Instructor: [0:00] Previously, we learned how to add images to our different content models by using the asset picker in our schema editor. While this works well, and we're certainly able to use the assets directly from the GraphCMS CDN, we have some more options available to us if we actually use a media platform in order to deliver these assets.

[0:18] Particularly, we're going to use Cloudinary where on top of its performant delivery service, we're able to use a lot of other features, including media management, as well as transformations on top of our delivery, which allows us to do a lot of things from simple use cases, like cropping and resizing, to being able to overlay dynamic imagery on top of other images.

[0:39] We have a lot of options for how we actually can take advantage of Cloudinary to deliver our assets. To start, we're going to actually take advantage of a feature in GraphCMS called UI extensions, which allows us to add custom functionality right inside of our own content editor.

[0:56] To see how this will work, we can click add a UI extension. What we're going to want to enter is a URL for the extension that we want to use inside of our application.

[1:06] Now, GraphCMS has documentation prior. You can set up your own custom UI extension. We're going to use a prebuilt demo inside of the GraphCMS examples repository, where we can see that this is a UI extension, specifically for Cloudinary.

[1:19] Now, we're going to learn how to setup and host our own, but we can see with their example here, if we copy and paste their URL.

[1:25] We paste it into this extension URL section, where we can run the compatibility test, and we can see that it is compatible and we see all the features that are going to come along with this demo UI extension.

[1:37] Back inside of our example, where you can find this link inside of the description of this video, we can see that we can download this manually by using this npx -d get command.

[1:47] For this UI extension, we're going to actually create a separate project, a separate repository and a separate deployment so that this can live on its own independent from our actual project work.

[1:58] To see how this works, I'm going to copy this command and I'm going to head to my terminal. I'm going to paste it in so that it can actually go through and clone down this repository example into my local project.

[2:09] Then, I can cd into that project directory. I can run yarn install or I can run npm install, if I prefer npm. Once it's done installing, I can run yarn start or npm run start, which is going to spin up a local development server.

[2:24] When it loads, we can see that we actually get an error. That's because we haven't actually configured Cloudinary to work with the extension, but we'll do that inside of the UI extension interface in GraphCMS.

[2:35] If we open up the hosted version, we will see that we actually get the same SDK connection error, but we saw earlier that it was working when we tried to use it.

[2:44] The nice thing is, we can run this in development mode. If I come over and try to add my extension and I paste in my local host 3000, we can see that it is able to find that extension and it is valid. That means, if I was creating this from scratch or generally trying to make changes, I can use this development URL in order to see the changes inside of my environment.

[3:05] For our use case, we're going to deploy this out into the web, and we're going to use it as a hosted version and not make any changes to the code. The first thing I need to do is create a GitHub repository. I'm going to head over to GitHub. I'm going to click create new repository.

[3:20] Where I'm going to call this repository, my Cloudinary input. Then I'm going to scroll down. I'm going to keep the default settings and click Create Repository. Now that we have the new repository, we can see that GitHub gives us all the commands that we need in order to initialize a new repository.

[3:36] I'm going to start from the top and run git init. Then I'm going to run git status to see what it's going to add. We can see all the files that it would add if we're trying to run this. One thing I do not want to add though, is the node_modules. I'm going to modify the gitignore file, in order to add gitmodules to that list.

[3:54] I can simply open up my .gitignore, and I can add node_modules to my gitignore. If I run git status again, we can see that we no longer have the node_modules in that list of untracked files. I'm going to say, git add - A, capital A and a period to add all those files.

[4:12] I'm going to run git commit - M, where I'm going to say init. Then I can start setting up my branch and add my remote origin. I'm going to copy the git-branch command. I'm going to paste that in my terminal. I'm going to run that git remote add origin.

[4:27] I'm going to go ahead and run that push command, so that all those files get pushed up to GitHub. Where if I refresh the page now, I can see the same files that I had locally. Next, we need somewhere where we want to deploy this application.

[4:40] To deploy our application, we're going to use Vercel which is of Next.js fame, as they're the creators and maintainers of Next.js. Vercel's not limited to Next.js. We can certainly deploy our React application for our UI extension.

[4:53] When registering or logging into Vercel, I recommend using your GitHub account or whatever Git provider you're using, as it's going to make it easier to authorize the repository, so that Vercel has access to it. Otherwise, at least make sure that you authorize GitHub on your Vercel account.

[5:09] Once you're logged in and ready to go, we can click create new projects, where if we start to scroll down, we can see that we have all the repositories that we have access to. Where if you pushed your commits like I did, you might already be able to see my Cloudinary input at the top of this list.

[5:25] Otherwise, you can find the organization or the GitHub account that you want to search under, and actually search for the text of your repository and then we can click import.

[5:34] Now, as Vercel says, we're almost done here where we want to configure our project. Now, it looks like this UI extension is using Create React App. Vercel was actually able to detect that and was able to already input all the settings that we need.

[5:47] All we really need to do is click deploy. At this point, Vercel is going to clone down the repository on their own infrastructure, they're going to build the application and they're going to deploy it out to the web.

[5:57] Once it's done, we can see that we get confetti because it was successfully deployed and we can even see a preview where, of course, we have our connection error because that's what we're getting without it actually being integrated into GraphCMS.

[6:09] Now, we have our URL that we can use inside a GraphCMS. I'm going to go back to add UI extension, where I'm going to paste in that new Vercel address. I'm going to run compatibility test.

[6:21] We can see that it picks up that same exact Cloudinary as extension where I can keep scrolling down and I can see that I can enter in my Cloud name and my public API key, which is going to be what I need to actually integrate Cloudinary into my content editor.

[6:36] Now, back over to Cloudinary, we will need to, of course, sign up for a free account in order to get started. Now, because Cloudinary is a multi-product platform, we want to make sure that we're selecting the right product.

[6:46] As we're filling out our information, when you get down to select a product, you want to make sure that we're selecting programmable media for image and video API.

[6:54] Then, you can choose your assigned Cloud name. I'm going to use GraphCMS course, just because I'm creating an account specifically for this course, but then we can make sure we're not a robot and then click create account.

[7:05] Once you click create an account, you'll receive a validation email, where it's going to land you inside of the console with a brief survey where we can now see that, we have both our Cloud name and we have our API key, which is exactly what we need in order to get started with the UI extension.

[7:21] I'm going to first copy my Cloud name, then get ahead back over to GraphCMS, where I'm going to paste in that cloud name and I'm going to also copy my API key where I can, again, paste that right in.

[7:31] Then, I can click authorize and install. Then, we can see it's now available as a UI extension, where we can get started using it inside of our schemas.

[7:40] The first place we're going to use this is inside of the product schema. If we scroll down, we can see that we already have our image, but we want to update that to use a Cloudinary image.

[7:49] We're going to first off delete that field, and of course, it's going to delete all the data that we have associated with that, but we're going to go through and re-add those images for all of our products using our Cloudinary extension.

[8:01] I'm going to delete this field, click delete, and then we can see under the add fields as soon as this is done loading, where if we scroll down to the bottom of add fields, we now have this Cloudinary asset.

[8:13] I'm going to pick that field and I'm going to name this just like I did before as image where we can see it's going to film the API ID, I'm going to go ahead and click create.

[8:23] Now, I want this to be in the same position as before. I'm going to simply drag this up over the price just so that it's the same kind of organization that I had before.

[8:32] Now, if I head over to my products content list, we can see that if I select one of the products, I'm going to be able to scroll down and find this image field, where I can choose from Cloudinary.

[8:43] If I click that, it's going to actually open up a Cloudinary UI, where I can select the asset that I want to choose for this particular product.

[8:52] Now, of course, we haven't actually uploaded anything to Cloudinary yet. We want to be able to make sure that we add our assets there first before we can actually select them.

[9:02] While we can upload these directly from the extension itself, let's head over to Cloudinary so we can see how we can do it from our Cloudinary account.

[9:09] If we head over to the media library section, we can see a very similar UI to what we actually saw inside of the extension. Now, we can upload the images directly in this top-level folder, but I want to try to create some organization.

[9:22] I'm going to first create a folder and I'm going to say I want that to be products and I'm going to hit save. Now, I'm going to open up that products folder, where I'm going to find all of my product images, and drag them all inside of my Cloudinary account.

[9:35] We can start to see every one of these assets inside of our Cloudinary account. We can even manage these assets if we want doing a lot of things like transformations, but now we can see we even have our URLs for each and every one of our image assets from Cloudinary.

[9:50] I'm going to head over to my Cosmo fitted hat. I'm going to scroll down and choose from Cloudinary, where as soon as that loads, I'm going to be able to navigate to my products directory.

[9:59] I'm going to be able to scroll down and find that fitted hat, and I want to use that and add in close so that it actually adds it from my Cloudinary account into GraphCMS.

[10:09] Finally. I'm going to hit save and publish so that it actually goes out to the world. Before we start adding any more of our images, let's see what this looks like in our data.

[10:18] I'm going to head over to the API playground and I'm going to go ahead and click play with that current query. Where we can see that we're getting an error here. That's because our image data changed from our previous query.

[10:31] If we go down to products inside the Explorer and look at the image itself, we can see that's now a single field. It doesn't have these additional fields inside of it. Let's get rid of those. Click play again. We can see that now we have our image, which is a JSON object that comes from Cloudinary, where we have our URL.

[10:50] We have our width and height just like before, but we have other features that are going to give us the ability to grab our image from Cloudinary and do additional things with it. Now, before we see if this works inside of our application, we want to make sure we update that same query inside of our index.js home page.

[11:08] I'm going to head over to this product section of the query. I'm going to additionally remove that height, URL and width. If we try to reload the page, at this point we're going to get an error because not all of our product images are being loaded yet, because as we saw we only added that first image.

[11:24] But because our image data has the same shape, meaning we're going to have it associated still at image width, image height, and image URL, it should work as is without having to make any additional code changes.

[11:38] I'm going to go through the rest of my data and we're going to choose a Cloudinary image for every single one of my products, including this trucker hat to make sure that we do have an image associated with every single product.

[11:50] I'm going to skip ahead having added all of my images from Cloudinary for my products. Once the page reloads, we can see that all of our images for our products are loading. If we open one of them up in a new tab, we can see that now, it's getting loaded from Cloudinary.

[12:04] On top of that, if we remember on our home page, this background is getting set from within GraphCMS as well. Inside of my page schema, I'm going to scroll down and I'm going to find that hero background, which I'm going to delete that field like we did the product image.

[12:18] Then I'm going to go all the way to the bottom of add fields, where I'm going to find that Cloudinary asset, go ahead and click it. I'm going to add again my hero background. Then I can scroll down, I can click Create. When I go back to my home content, I can see that I can now choose from Cloudinary.

[12:35] Before, we only added our product images, so we still want to upload our Space Jelly banner. I'm going to go ahead and upload that image straight from within this UI where I can find that Space Jelly banner. I can open it up, and it's going to upload that image direct to Cloudinary, where I can then select that image, hit add and close.

[12:54] Just like before, it's going to add that image. Once we hit save and publish, we similarly want to update our hero background query inside of our application, because we'll get an error if we try to query for these non-existent width, height, and URL fields.

[13:10] Similar to our product images, because we're using the same data shape, meaning the URL height and width, that banner should work as is. If we try to inspect this image this time, we can see again, it's getting sent from Cloudinary.

[13:23] At this point, we're not doing much with our images aside from delivering them from Cloudinary's performance CDN, but we'll see in later lessons how we can take advantage of more Cloudinary functionality to optimize those assets.

[13:37] In review, we saw how that we could take an existing UI extension, clone it down, and create our own instance, installing it into our GraphCMS content editor. Once we were able to add that Cloudinary asset as a field, we were able to select those images directly from our Cloudinary account and serve those images right inside of our app.