- Add to Content Model
- Browse and Select Images
- Search for Images
- Query an Image
The app can be installed to your Contentful workspace via the marketplace.
If running locally, the app can be installed via npm:
Upon installation, configure the app using an API key generated via the imgix Dashboard. Ensure that the generated key has the following permissions:
Image Manager Browse.
Following the instructions on the screen, enter in the API key and press
Verify. If the key is valid, you will receive a notification that the key has been successfully verified. If verification fails, you will need to ensure that the key was entered correctly.
The configuration page surfaces the option for users to select pre-existing content fields that are compatible with the imgix app. Note that the app is configured to integrate with
JSON object fields only, therefore only fields of this type will be displayed. Users may prefer this method over selecting individual fields manually for each applicable content model.
Of the many content types that users can choose from, imgix specifically integrates with the
JSON object. Please note that if you are currently using a
Media content type for images, you will need to create a new field of type
JSON object to integrate the app with. Designate a field to use imgix on by navigating to that field’s Appearance tab and selecting the app. This step can be skipped if you already assigned the app directly to the desired field(s).
From any instance of a field using the imgix app, a modal can be opened to browse images by imgix source. First, select a desired source to browse images from. Using any of the pagination buttons, navigate each page of assets to choose from. After selecting an image, it can be inserted to the field via the
Add image button. Additionally, there are options to replace an image, or clear a selection from the field altogether.
The imgix app enables users to conduct a keyword search across assets in a source. Using the search box near the top of the modal will execute a search across multiple pre-determined fields: file origin path, image tags, and categories. To learn more about these fields, see our Image Manager documentation.
Once the content is published, developers can query the
src of the selected image, returned as a string, via the Contentful API. The example below demonstrates this using GraphQL, but this can be done independent of any specific tool.
returns something similar to:
Developers can leverage the power of imgix's rendering API downstream from where the image was selected in Contentful. We recommend piping the value of the
src field of the image through to one of imgix's SDKs. The example below builds on the previous one by passing the image
src through to @imgix/gatsby component:
Users may also access metadata associated with an image via the
attributes field. Refer to the imgix documentation to learn more about the various types of metadata available on images and how to use them.
returns something similar to:
Note: Certain fields under
attributes are returned as strings to provide better resiliency when used with GraphQL. Therefore, these fields (
colors.dominant_colors) will need to be parsed back into JSON objects after being queried. The example below demonstrates how to do this:
- Craft Image OptimizeAutomatically create & optimize responsive image transforms, using either native Craft transforms or a service like imgix, with zero template changes.PHP 233 a month ago
- Imager X for CraftAn image manipulation plugin for the Craft CMS that supports imgix URLsPHP 19 9 days ago
- Media Cloud for WordPressA WordPress plugin that connects to your storage (Amazon S3, Google Cloud, & others) and provides imgix urls for your site's imagesPHP 97 a month ago
- Nuxt ImagePlug-and-play image optimization for Nuxt apps. Resize and transform your images in your code using your imgix images.TypeScript 603 7 days ago
- Statamic PluginAn add-on for integrating imgix into Statamic sitesPHP 17 a year ago
- Superbig Craft PluginA plugin for the Craft CMS that adds full access to the imgix API for manipulating imagesPHP 13 < 1 day ago