After you’ve installed the Cloudinary app, you can easily reference assets hosted on Cloudinary directly inside the Contentful web app.
The Cloudinary app is a widget that allows editors to select media from their Cloudinary account. Simply click
Select or upload a file on Cloudinary and select the assets you want to be referenced from your entry.
The IDs of selected media are then stored in Contentful. Inside your client application, you then fetch content from Contentful and resolve all needed details on media by using the IDs to fetch binaries or meta data from Cloudinary's API.
To use this app, you will need:
cloud_nameof your Cloudinary account
API keyof your Cloudinary account
- A content type with a field of type
JSON objectto hold the references to Cloudinary
You can find both
API key on your Cloudinary dashboard.
Step 1: Install and configure
Under Configuration, provide your Cloudinary
cloud_name and corresponding
API key in the respective fields. By changing
Max number of files you can also limit how many individual files users can select in a single field.
Under field assignment, select the content type fields that you want this app to be used for. Please note that only compatible fields of type
JSON object are displayed here.
Install to finish the installation and save the configuration.
Step 2: How to use the app
To reference an asset on Cloudinary from your entry:
Select or upload a file on Cloudinary
- Select the assets in Cloudinary using the dialog
Previews of your assets will now appear in your entry.
What to do if the entry editor displays the warning
Field value is incompatible?
JSON object field of this entry already contains data that was not generated by the Cloudinary assets app. Please ensure that you've selected the correct field in the app configuration to be used with Cloudinary, and that you do no longer need the previously entered data. Then select
I want to override the value using the App., which will initialize the field with an empty selection. Now you can start to add media to your entry.
To access the underlying field value, deselect the field in the Cloudinary app configuration. This will reset the editor to the default json display for object fields.