Libraries
Contentful
- Installation
- Configuration
- Add to Content Model
- Browse and Select Assets
- Search for Assets
- Upload Assets
- Query an Asset
- License
Installation
The app can be installed to your Contentful workspace via the marketplace.
If running locally, the app can be installed via npm:
npm install @imgix/contentful
npm run start
Configuration
Upon installation, configure the app using an API key generated via the imgix Dashboard. Ensure that the generated key has the following permissions: Sources
and Asset 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.
Compatibility
This Contentful app is not compatible with Web Proxy Sources. Uploading functionality is not compatible with Web Folder sources. See the imgix documentation for a list of Sources that you can create in imgix.
Assign to Fields (Optional)
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.
Add to 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).
Browse and Select Assets
From any instance of a field using the imgix app, a modal can be opened to browse assets by imgix source. First, select a desired source to browse assets from. Using any of the pagination buttons, navigate each page of assets to choose from. After selecting an asset, it can be inserted to the field via the Add asset
button. Additionally, there are options to replace an asset, or clear a selection from the field altogether.
Search for Assets
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, asset tags, and categories. To learn more about these fields, see our Asset Manager documentation.
Upload Assets
note: uploading to web folder sources is not supported at this time.
The imgix app enables users to upload assets to a source. Using the "Upload" button near the top of the modal, users can select an image to upload to their desired source. Users change the upload source destination, filepath, or filename. To learn more about uploading, see our Asset Manager documentation.
Query an Asset
Once the content is published, developers can query the src
of the selected asset, 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.
query MyQuery {
allContentfulArticle {
nodes {
avatar {
src
}
bannerImage {
src
}
}
}
}
returns something similar to:
{
"data": {
"allContentfulArticle": {
"nodes": [
{
"avatar": {
"src": "https://fourbottle.imgix.net/heroes/pourover.jpg"
},
"bannerImage": {
"src": "https://fourbottle.imgix.net/heroes/light-scatter.jpg"
}
}
]
}
},
"extensions": {}
}
Transforming Assets
Developers can leverage the power of imgix's rendering API downstream from where the asset was selected in Contentful. We recommend piping the value of the src
field of the asset 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:
import React from 'react';
import { graphql } from 'gatsby';
import { ImgixGatsbyImage } from '@imgix/gatsby';
export default function Page({ data }) {
return data.allContentfulArticle.nodes.map(({ node }) => (
<ImgixGatsbyImage
src={node.avatar.src}
imgixParams={{
auto: 'format,compress',
crop: 'faces,edges',
}}
layout="constrained"
width={350}
aspectRatio={16 / 9}
sizes="(min-width: 1024px) calc(30vw - 128px), (min-width: 768px) calc(50vw - 100px), calc(100vw - 70px)"
alt="An imgix-served image from Contentful"
/>
));
}
export const query = graphql`
query MyQuery {
allContentfulArticle {
nodes {
avatar {
src
}
}
}
}
`;
Metadata
Users may also access metadata associated with an asset 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.
query MyQuery {
allContentfulArticle {
nodes {
bannerImage {
src
attributes {
analyzed_content_warnings
analyzed_faces
analyzed_tags
color_model
color_profile
content_type
custom_fields
date_created
date_modified
dpi_height
dpi_width
face_count
file_size
has_frames
media_height
media_kind
media_width
origin_path
source_id
tags
uploaded_by_api
warning_adult
warning_medical
warning_racy
warning_spoof
warning_violence
}
}
}
}
}
returns something similar to:
{
"data": {
"allContentfulArticle": {
"nodes": [
{
"bannerImage": {
"src": "https://fourbottle.imgix.net/heroes/woman-stirring.jpg",
"attributes": {
"analyzed_content_warnings": true,
"analyzed_faces": true,
"analyzed_tags": true,
"color_model": "RGB",
"color_profile": "c2",
"content_type": "image/jpeg",
"custom_fields": "\"\"",
"date_created": 1625796011,
"date_modified": 1642786873,
"dpi_height": 72,
"dpi_width": 72,
"face_count": 1,
"file_size": 3411741,
"has_frames": false,
"media_height": 4000,
"media_kind": "IMAGE",
"media_width": 6000,
"origin_path": "/heroes/woman-stirring.jpg",
"source_id": "5f73d9798d5327eb5194d54a",
"tags": "{\"Arm\":0.9448454976081848,\"Cup\":0.8950006365776062,\"Drinkware\":0.9177042841911316,\"Glasses\":0.9809675216674805,\"Hand\":0.9596579074859619,\"Joint\":0.9762823581695557,\"Photograph\":0.94278883934021,\"Shoulder\":0.9465579986572266,\"Tableware\":0.949840784072876,\"Vision care\":0.9289617538452148}",
"uploaded_by_api": false,
"warning_adult": 1,
"warning_medical": 1,
"warning_racy": 2,
"warning_spoof": 1,
"warning_violence": 1
}
}
}
]
}
}
}
Note: Certain fields under attributes
are returned as strings to provide better resiliency when used with GraphQL. Therefore, these fields (custom_fields
, tags
, colors.dominant_colors
) will need to be parsed back into JSON objects after being queried. The example below demonstrates how to do this:
export default function Page({ data }) {
return data.allContentfulArticle.edges.map(({ node }) => (
<div className="p-4 lg:w-1/3 md:w-1/2 sm:w-full">
<ImgixGatsbyImage
src={node.bannerImage.src}
imgixParams={{
auto: 'format,compress',
crop: 'faces,edges',
}}
layout="constrained"
width={350}
aspectRatio={16 / 9}
sizes="(min-width: 1024px) calc(30vw - 128px), (min-width: 768px) calc(50vw - 100px), calc(100vw - 70px)"
alt="An imgix-served image from Contentful"
/>
{node.bannerImage.attributes.custom_fields ? (
Object.entries(
JSON.parse(node.bannerImage.attributes.custom_fields),
).map(([key, value]) => (
<p>
{key}: {value}
</p>
))
) : (
<br></br>
)}
{Object.entries(
JSON.parse(node.bannerImage.attributes.colors.dominant_colors),
).map(([key, value]) => (
<p>
{key}: {value}
</p>
))}
{Object.entries(JSON.parse(node.bannerImage.attributes.tags)).map(
([key, value]) => (
<p>
{key}: {value}
</p>
),
)}
</div>
));
}
export const query = graphql`
{
allContentfulArticle {
edges {
node {
bannerImage {
src
attributes {
custom_fields
colors {
dominant_colors
}
tags
}
}
}
}
}
}
`;
More Plugins
- Craft Image OptimizeAutomatically create & optimize responsive image transforms, using either native Craft transforms or a service like imgix, with zero template changes.PHP 234 20 days ago
- FigmaBrowse, search, and insert image assets into your Figma designs quickly and easily via the imgix Asset Manager.Invalid date
- Imager X for CraftAn image manipulation plugin for the Craft CMS that supports imgix URLsPHP 23 a month ago
- Salesforce Commerce CloudUse this integration to insert images from imgix's Image Manager into your Salesforce Commerce Cloud websites.JavaScript 1 8 months ago
- MagentoBrowse, search, and insert image assets into your storefront quickly and easily via the imgix Image Manager.JavaScript 22 7 months ago
- Nuxt ImagePlug-and-play image optimization for Nuxt apps. Resize and transform your images in your code using your imgix images.TypeScript 957 < 1 day ago
- Statamic PluginAn add-on for integrating imgix into Statamic sitesPHP 17 2 years ago
- Superbig Craft PluginA plugin for the Craft CMS that adds full access to the imgix API for manipulating imagesPHP 13 7 months ago
- wp-imgixA WordPress plugin that connects to your storage (Amazon S3, Google Cloud, & others) and provides imgix URLs for your site's imagesPHP 9 4 months ago