Contentful is a leading headless CMS that enables teams to create, manage, and deliver content across multiple platforms. The ImageKit app for Contentful provides powerful image and video optimizations, transformations, and digital asset management directly within your Contentful CMS. It additionally provides ImageKit’s real-time AI-powered transformations, optimized delivery and streaming capabilities for all media assets, so that your users enjoy flawless visuals everywhere.
This guide walks you through installing and configuring the ImageKit app to your Contentful Space.
App Features
- Access ImageKit assets: Access and insert the assets stored in ImageKit Media Library directly into your Contentful entries without leaving your CMS.
- Speed up creative workflows: Quickly find the right assets from your ImageKit Media Library using advanced search filters and AI-powered visual search within the Contentful CMS.
- Rich Metadata & Previews: Instantly view asset details including dimensions, file size, and previews within your Contentful entries before publishing.
- Automatic media optimizations: Deliver images and videos in the correct format and the smallest size every time with ImageKit's automatic format and quality optimizations for images and videos.
- Real-time image and video transformations: Apply more than 50 image and video transformations while delivering media assets for perfect visuals on every device.
Installation
Before installing, ensure you have administrative access to a Contentful space where you want this app to be installed. It is also recommended to have atleast one content type where you want to use the media field.
The easiest and recommended way to install this app is from the Contentful official marketplace. In your Contentful space, navigate to Apps → Marketplace and search for "ImageKit". Click Install and follow the setup wizard to configure the ImageKit app with your space.
Configuration
You can choose to configure the app during the installation or come back to it later from Apps → Installed apps → ImageKit → Configure.
Basic Setup
After installation, configure the app through Contentful's interface:
Navigate to App Configuration: Go to Apps → Installed apps. Find "ImageKit" and click Configure.
Select the fields to use with ImageKit app: In the Field Selector, choose which fields should use ImageKit. This app works only with the JSON Object field type provided by Contentful, so you can select one or more of your existing JSON Object fields across the different entries in your space.
Advanced Configuration
Any configuration changes will only be applied to the assets you select afterwards. All previously selected assets will continue to be served with the older configuration, unless you remove and re-insert them from the ImageKit Media Library after the configuration update.
The app provides extensive configuration options to customize behavior according to your needs:
Media Delivery Settings
Configure how selected media assets are delivered to your applications:
| Setting | Description |
|---|---|
Default Transformation String | Transformation string applied to all selected assets for consistent delivery Default - None Example - |
Media Quality | Quality level for image delivery Default - Uses ImageKit Defaults Example - |
Widget Settings
Control the media library widget's initial state and behavior:
| Setting | Description |
|---|---|
Starting Folder Path | Default folder path when the widget opens Default - Example - |
Starting Collection ID | The ID of the specific collection to open when the Media Library Widget is opened. Leave this blank if you do not want to open any collection, use Default - None Example - |
File Type | Restrict display to specific file types. Leave this blank to show all types of files which is the default behavior. Default - None Example - |
Default Search Query | The search query to be used when the Media Library Widget is opened. Leave this blank to open the widget with no search query which is the default behavior. Default - None Example - |
Allow Multiple Selections | Allow selecting multiple assets in a single operation Default - Example - |
Maximum Number of Files Per Selection | Maximum number of assets that can be selected. Leave this blank to allow unlimited selections which is the default behavior. Default - Unlimited Example - |
Usage
To use ImageKit in your entries, you would first need to configure your content types with media fields that use the ImageKit app. Once done, these media fields will be enriched by bringing your ImageKit's Media Library within Contentful to provide the best possible authoring experience.
Adding ImageKit Fields to Content Types
| Add field to Content Type | Select JSON Object type | Use ImageKit app |
|---|---|---|
Open Content Type: Navigate to Content model → Select your content type. Then click on Add field.
Select Field Type: Choose JSON Object as the field type and set a descriptive field name (e.g., "Hero Image", "Gallery Images", "Product Media"). You can configure validation rules as needed.
Configure Field: In the Appearance tab, select the "ImageKit" app from the widget options. The field will now use the ImageKit media library widget for asset selection.
Selecting Assets
| Select Assets | Click Insert | Assets added to entry |
|---|---|---|
Open Entry Editor: Navigate to Content → Select an entry and find your ImageKit field.
Select Assets: Click "Select or upload an asset" to open the ImageKit widget and browse your ImageKit Media Library using the integrated interface. You can use the search, filters, and folder navigation to find desired assets. Select one or more assets and click Insert to add them to your entry.
Manage Selected Assets: The ImageKit app provides a few options for you to manage the selected assets within your entry. You can drag and move the assets around to reorder them as needed, view detailed information about the asset, preview it in a new tab, remove an unwanted asset or view the asset in ImageKit Dashboard.
Working with Asset Data directly
In case you'd like to manually override the transformation parameters applied to a particular asset, you can do so by setting the Field Appearance to "Default" and editing the JSON directly.
The selected assets are stored as an array of JSON objects containing all necessary information. To understand the fields available and the object structure, take a look at Get file details.
Here's an example:
[
{
"type": "file",
"name": "sample ....jpg",
"fileId": "681c2748432c476416f3e190",
"isPublished": true,
"url": "https://ik.imagekit.io/imagekitId/sample.jpg",
"thumbnail": "https://ik.imagekit.io/imagekitId/sample.jpg&tr=n-ik_ml_thumbnail",
"fileType": "image",
"filePath": "/sample ....jpg",
"height": 3712,
"width": 5568,
"size": 7324983,
// ... other fields
}
]