Use Uploadcare images for Contentful image fields
Brought to you with ❤️ by Prezly.
The extension code is written using modern JS features (async/await syntax) and does not have transpilation to simplify reviewing final code before installing it to Contentful. This means this extension will only work in modern "evergreen" browsers (Chromium 55+ and derivatives, Edge 15+, Firefox 52+, Opera 42+, Safari 10.1+).
-
Make sure you have an Uploadcare subscription.
-
Go to Settings > Extensions in your Contentful space dashboard.
-
Install Uploadcare Image Dialog Extension:
- Click Add extension > Install from GitHub
- Paste the link below:
https://github.com/prezly/uploadcare-extension-for-contentful/blob/master/uploadcare-image-dialog/extension.json
- Click Install
- When you the extension page, scroll down and provide Uploadcare Public Key
- Click Save
-
Install Uploadcare Image Field Extension:
- Click Add extension > Install from GitHub
- Paste the link below:
https://github.com/prezly/uploadcare-extension-for-contentful/blob/master/uploadcare-image-field/extension.json
- Click Install
- When you the extension page, scroll down and provide Dialog Extension ID. You can get it from page URL, when you open Uploadcare Image Dialog extension for editing.
- Click Save
-
Add image fields to your content types model.
- Go to Content model
- Select a content type
- Click Add field, select JSON Object
- Name it, click Create and configure
- Go to Appearance tab, select Uploadcare Image Field extension
- Click Save
-
Now you can add Uploadcare images to your Contentful entries.
-
Remember to implement rendering for Uploadcare JSON images on your website.
-
Enjoy!
If you like this library, please share a link to this page on Twitter. :)