The Image field allows content writers to upload an image that can be configured with size constraints.

The Image field allows content writers to upload an image that can be configured with size constraints that can later be used as responsive image views. To learn more read: How to set up responsive Images

Configuration

Assign the Image field a Field name that will display in the entry editor and an API ID.

Next, you can configure the size constraints. If you wish to preserve a version with the full size of the image, leave the first set up to be auto x auto by leaving the Width and Height fields empty. That way content writers are free to adjust that size as they need.

Responsive image views

Responsive image views allow you to set up responsive images by setting up constraints. For every view you create, you must give it a name, then you can define its width and height as required for your design.

Adding images in the Writing Room

Within Prismic, you are able to zoom and crop each image view the way you want.

The Image Optimization feature will auto compress & format transformations that will distribute the right format for each browser & apply some compression on images to improve your website performance. This is impactful for your first rendering of the page and for SEO. Learn more about Image Optimization.

JSON editor

The following JSON config defines a simple image field with the API ID of illustration with no size constraints or responsive views:

"illustration": { 
"type": "Image",
"config": {
"constraint": {},
"thumbnails": [],
"label": "illustration",
"placeholder": "Upload an image..."
}
}

The following is an image field with the API ID of featured_image that has size constraints and a mobile view:

"featured_image": { 
"type": "Image",
"config": {
"constraint": {
"width": 600,
"height": 1200
},
"thumbnails": [
{
"name": "mobile",
"width": 200,
"height": 300
}
],
"label": "featured image",
"placeholder": "Upload an image..."
}
}

JSON Reference

"type": (string, required) Value must equal "Image"

"config": (object, optional) Options listed below

config

"placeholder": (string) Sets a user-friendly placeholder into the field

"label": (string) Sets the label that shows up for the field in the entry editor

"constraint": (object) Sets the "width" and "height" constraints for the image. See more below.

"thumbnails": (array of objects) Define the responsive image views for the image. For each view, give an object with a "name", "width", and "height". See more below.

constraint

"width": (integer) An integer will define the width of the image in pixels. If you set as null, there will be no constraint.

"height": (integer) An integer will define the height of the image in pixels. If you set as null, there will be no constraint.

thumbnails

"name": (string) The name for the image view

"width": (integer) An integer that defines the width of the image view in pixels

"height": (integer) An integer that defines the height of the image view in pixels

Did this answer your question?