Cloudinary App Installation Guide

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

With Marketplace, you can now easily install the Cloudinary application and use it in your entry to refer media files from Cloudinary.

Prerequisites

This step-by-step guide explains how to install and configure Cloudinary in 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. Login to your Cloudinary account.
    2. On the resulting Dashboard page, under Account Details, you should see your Cloudinary Cloud Name and API KeyimageA2.png
    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

    To install the application in Contentstack, follow the steps below:

    1. Login to your Contentstack account.
    2. On the left-hand side primary navigation, you will find the Marketplace icon (as shown below). Click on the icon to go to the Marketplace. 
    3. imageB2.png
    4. Within the Marketplace, you will be able to see all the apps available, hover over the Cloudinary app and click on Install App.
    5. imageC.png
    6. In the popup window, select the stack for which you want to install the Cloudinary app and click on Install
    7. imageD.png
    8. Enter the Cloudinary Cloud Name and the API Key on the resulting Configuration page and click on Save
    9. imageE.png
    10. Click on Open Stack 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 custom field:

    1. Go to your stack and click the “Content Models” icon on the left navigation panel, and click on the + New Content Type button.
    2. Create a content type by adding relevant details as displayed below: 
    3. imageF.png
    4. In the Content Type Builder page, add a Custom field in your content type by clicking on the “Insert a field” link represented by a + sign.
    5. Under Select Extension/App, select Cloudinary and click on Proceed
    6. imageG.png
    7. After adding the app, click on either Save or Save and Close to save your changes. 
    8. imageH.png
    9. To use the Cloudinary app, create an entry for the above content type, and you will see the Cloudinary custom field on your entry page as shown below: 
    10. imageI.png
    11. Click on + Choose Asset(s), to select assets from your Cloudinary account and add them to your entry. 
    12. imageJ.png
    13. The assets you select are referenced within your entry. You can add more assets or simply save and publish your entry as it is. 
    14. imageK.png

    Use Cloudinary with the JSON RTE Field

    1. Go to your stack and click the “Content Models” icon on the left navigation panel, and click on the + New Content Type button.
    2. Create a content type by adding relevant details as displayed below: 
    3. imageL.png
    4. In the Content Type Builder page, add JSON Rich Text Editor in your content type by clicking on the “Insert a field” link represented by a + sign. 
    5. imageM.png
    6. To add the Cloudinary plugin in JSON RTE, select the Properties icon of JSON RTE and under Select JSON RTE Plugin(s), choose Cloudinary app and click on Add Plugin(s)
    7. imageN.png
    8. After adding the plugin, click on either Save or Save and Close to save your changes. 
    9. imageO.png
    10. 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 JSON RTE field on your entry page as shown below: 
    11. imageP.png
    12. Click on the Cloudinary app icon to open the selector page or Media Library
    13. imageQ.png
    14. Choose one or more products from the Media Library and select Insert.
    15. The selected product(s) gets displayed in the JSON RTE editor: 
    16. imageR.png
    17. You can resize the image as per your need by adjusting the size from corners. 
    18. To view, edit or delete the image, hover over the image to get the options available as shown below: 
    19. imageS.png
    20. To edit the image, select the edit option, make the necessary changes and click on Save
    21. imageT.png
    22. The assets you select are referenced within your entry. You can add more assets or simply save and publish your entry as it is.

Was this article helpful?

Thanks for your feedbackSmile-icon

On This Page

^