Contentful Integration with ImageKit.io

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.

• 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.

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.

You can choose to configure the app during the installation or come back to it later from Apps → Installed apps → ImageKit → Configure.

After installation, configure the app through Contentful's interface:

1. Navigate to App Configuration: Go to Apps → Installed apps. Find "ImageKit" and click Configure.

2. 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.

The app provides extensive configuration options to customize behavior according to your needs:

Configure how selected media assets are delivered to your applications:

Control the media library widget's initial state and behavior:

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.

1. Open Content Type: Navigate to Content model → Select your content type. Then click on Add field.

2. 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.

3. 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.

1. Open Entry Editor: Navigate to Content → Select an entry and find your ImageKit field.

2. 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.

3. 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.

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
    }
]