Agility CMS offers many custom UI integrations to help optimize and improve your digital experiences. It enables editors to select data assets from Data Asset Managers like Cloudinary and Widen, provide custom input fields like Color Picker, Block Editor, and Vimeo Video, and call external APIs to select external entities.
In this article, we’ll walk you through the process of integrating Cloudinary with Agility CMS. Cloudinary offers powerful visual experiences across any browser, device, and bandwidth by using API and SDK integrations to upload, store, transform, and optimize images and videos.
For this walkthrough, we’ll be using the Next.js starter website connected with Agility CMS instance and Cloudinary.
Let’s get started!
Step 1: Register Custom Fields JS File in Cloudinary UI Extensions
After creating an Agility CMS instance and setting up a .env.local file with relevant Agility CMS and Cloudinary keys, you can add Cloudinary UI extension by navigating to Settings -> UI Extensions within Agility CMS.
Replace the path in Custom Fields Script URL with your custom-fields.js URL. This file is responsible for rendering Cloudinary custom UI within Agility CMS.
The URL format is:
https://[yourprojectdomain]/custom-field.js
Step 2: Define your Content Model
To display a custom UI, Agility CMS needs content models that can define your content and allow editors to control and optimize pages. To do so, navigate to Models -> Content Models and click on Add. Existing content models will be updated as well. Fill in the Name and Description fields in Add a Content Model widget and finally, don’t forget to click Save.
Add content model and name it “Cloudinary Item”
“Cloudinary Item” Content model is saved
Step 3: Add Cloudinary Fields to the Newly Created Content Model
Click on the Add a Field button in the content model to open an Add a New Field widget. Agility CMS offers various field types in the Select a Field Type section. These are text fields (like multi-line text, HTML, URL, drop down list), reference fields, number, date & binary fields, media & attachment fields (like image, gallery, file, list of files), and custom fields.
Add Custom Cloudinary Image/Video Field
Select Custom Fields from the Select a Field Type section. In the Custom Field Properties section, select Cloudinary Image/Cloudinary Video from the Custom Field Type dropdown menu.
Select Cloudinary Image custom field and set the Field Label as “Image”
Cloudinary Image custom field is added
Select Cloudinary Video custom field and set the Field Label as “Video”
Cloudinary Video custom field is added
Step 4: Save Content Model Fields
When all the fields are added, click on the Save button. If your changes are saved successfully, Agility CMS will display a Changes Saved notification.
Cloudinary custom fields are saved
Step 5: Add Content Item Using Content Model
Now that you've defined the structure for the content model, it is time to add your l content. You can do this under the Content Using This Model section, Firstclick on Add here to create a new content item then, fill in the Add New Content widget and click on Create Content.
On successful operation, Agility CMS will display a Content Successfully Created notification.
Create a new Agility CMS Content Item and set the Name as “Cloudinary Item”
Agility CMS Content Item is successfully created
Step 6: Populate All Content Model Fields in the Newly Created Content Item
To begin, you’ll want to navigate to the Content tab and select the content item you’ve just created from the Content sidebar. After ensuring that the relevant Content Model name is on the right sidem click on New to start adding Cloudinary custom UI fields. You can then populate the appropriate fields with your desired media.
Open Agility CMS Content Item named as “Cloudinary Items” and create new content
Fill all content fields with relevant information and media files.
Step 7: Select Image/Video from Cloudinary Media
Clicking on the Choose button in front of Image/Video custom fields while opening your Cloudinary media image/video library. Notice the filter (resoruce_type:image or resoruce_type:video) in the search bar. The custom fields are smart enough to open the media library with relevant image or video files. Select an image from the Cloudinary media for the custom Image field and a video from the custom Video field.
You can also apply various transformations to the images within the Cloudinary media image dialog box. To do this, select any transformation and click on Transform to apply changes. Once done, you can click on Choose Image to populate the image in the custom Image field.
Cloudinary videos can be streamed within the Agility CMS to ensure accuracy. After selecting your desired media content, click on Save.
Open Cloudinary Media with Images
Select an image from Cloudinary Media and apply image transformations if needed
Preview the selected image in Agility CMS
Open Cloudinary Media with Videos
Preview the selected video in Agility CMS
After the content is successfully saved, the website developer would have access to all fields and their properties to display them on the front-end. Check out the Cloudinary documentation to explore various tools that can make your digital asset management effortless and straightforward!
Try Agility CMS and Cloudinary
Cloudinary offers substantial aid in managing all types of media. As a result, with Cloudinary media management, Agility CMS can deliver dynamic media experiences to developers and editors to help improve and innovate your digital experiences.. In addition, we offer a free trial of our headless CMS in the case that you are skeptical about how Agility CMS can streamline your media assets.
If you want to take a closer look at how our integration with Cloudinary works, read our documentation here for an in-depth explanation: Cloudinary Integration.
When you are ready, and if you are interested, you can sign up easily and quickly for both a free Agility CMS account and a free Cloudinary account.. Our free tier also comes with the Next.js boilerplate to enable quick deployment of your media content.
