Cloudinary App Installation Guide

Cloudinary is an assets management tool for websites and mobile applications covering everything from uploading, storage, optimization, and delivery.

Contentstack Marketplace lets you install the Cloudinary application and use it within your stack to refer media files from Cloudinary.

Prerequisites

• Cloudinary account
• Contentstack account
• Access to the Contentstack Organization/Stack as the Owner/Admin

This step-by-step guide explains how to install and configure Cloudinary within your stack.

Steps for Execution

1. Get your credentials from Cloudinary
2. Install and Configure Cloudinary in Contentstack Marketplace
3. Use Cloudinary within your Stack

1. Get your credentials from Cloudinary

   To get your Cloud Name and API Key from Cloudinary, follow the steps given below:

   1. Log in to your Cloudinary account.
   2. On the resulting Dashboard page, under Account Details, you should see your Cloudinary Cloud Name and API Key. 
   
   3. Save the Cloud Name and API Key; you will need it while configuring your Cloudinary app in Contentstack.

2. Install and Configure Cloudinary in Contentstack Marketplace

   Follow the steps to install the application in Contentstack.

   1. Log in to your Contentstack account.
   2. In the left-hand side primary navigation, click the Marketplace icon to go to the Marketplace. 
   
   3. Within the Marketplace, you will be able to see all the apps available; hover over the Cloudinary app and click the Install App button. 
   
   4. Select the stack for which you want to install the Cloudinary app, accept the Terms of Service and Privacy Policy, and click the Install button. 
   
   5. Enter the Cloudinary Cloud Name and the API Key on the resulting Configuration page and click the Save button. 
   
   6. Click the Open Stack button to start using the Cloudinary application.

3. Use Cloudinary within your Stack

   To use the Cloudinary application within an entry of your stack, you can either use a Custom field or a JSON RTE field.

   Follow the steps given below to use the Cloudinary application using the Custom field:

   1. Go to your stack and click the Content Models icon in the left navigation panel, and click the + New Content Type button.
   2. Create a content type by adding relevant details as displayed below: 
   
   3. In the Content Type Builder page, add a Custom field in your content type by clicking the Insert a field link represented by a + sign.
   4. Under Select Extension/App, select Cloudinary and click the Proceed button. 
   
   5. After adding the app, click Save or Save and Close to save your changes. 
   
   6. To use the Cloudinary app, create an entry for this content type, and you will see the Cloudinary custom field on your entry page as shown below: 
   
   7. Click the + Choose Asset(s) button to select assets from your Cloudinary account and then click the Insert button to add them to your entry. 
   

   The selected asset(s) gets displayed in the custom field: 

   
   8. Hover over the image to delete or preview it.
      1. Click the Delete icon to delete the image.
      2. Click the Preview icon to view the image in a new tab.
      
      
      

   The assets you select are referenced within your entry. You can add more assets or simply save and publish your entry as it is.

   Follow the steps given below to use the Cloudinary application using the JSON RTE field:

   1. Go to your stack and click the Content Models icon in the left navigation panel, and click the + New Content Type button.
   2. Create a content type by adding relevant details as displayed below: 
   
   3. In the Content Type Builder page, add JSON Rich Text Editor in your content type by clicking the Insert a field link represented by a + sign. 
   
   4. To add the Cloudinary plugin in JSON RTE, click the Properties icon of JSON RTE, and under Select JSON RTE Plugin(s), choose the Cloudinary app, and then click the Add Plugin(s) button. 
   
   5. After adding the plugin, click Save or Save and Close to save your changes. 
   
   6. To use the Cloudinary app as JSON RTE plugin, create an entry for this content type, and you will see the Cloudinary app icon in the JSON RTE field on your entry page as shown below: 
   
   7. Click the Cloudinary app icon to open the selector page or Media Library.
   8. Choose one or more media files from the Media Library and then click the Insert button. 
   

   The selected asset(s) gets displayed in the JSON RTE editor: 

   
   9. You can resize the image by adjusting the size from the corners.
   10. Hover over the image to view, edit or delete it.
       1. Click the View icon to view the image.
       2. Click the Edit icon to edit the image. Make the necessary changes and click the Save button.
       3. Click the Delete icon to delete the selected image.
   
   11. To add inline text to the selected image, follow the steps below:
       1. Drag and resize the image as required.
       
       2. Click the Edit button, choose the right or left alignment, check the Inline Asset checkbox, and then click the Save button.
       
       3. Add the required text next to the image.
   

   The assets you select are referenced within your entry. You can add more assets or simply save and publish your entry as it is.