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

It can also be configured to add responsive image views that allow you to set up responsive images. You can read more about this on our How to add Responsive Images page.

 

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 of the image. Set the width and/or height. You can set either the width or height (in pixels), both of them, or neither. When you do not define a size constraint, then content writers are free to adjust that size as they want or need.

To add a responsive view, click on the green "+" button. For every view you create you must give it a name and you can define its width and height requirements.

 

Responsive Image Views

Responsive image views allow you to set up responsive images. For each image view you configure, you can define the width and height as required for your design.  

Within Prismic, you are able to zoom and frame each image view the way you want, and even to use an entirely different image for one of the sizes, if relevant.

After you've set an image, you can change each image view in two ways:

  • Changing the zooming and framing of the image for the view you want
  • Replacing one of the views with another image

You can see an example above of an image view crop and how to entirely replace an image.

 

JSON Editor

The following defines a simple image field for a page illustration with no size constraints or responsive views:

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

 
The following is an image field with size constraints and a mobile view:

"illustration": {
  "type": "Image",
  "config": {
    "constraint": {
      "width": "600",
      "height": "600"
    },
    "thumbnails": [
      {
        "name": "mobile",
        "width": "300",
        "height": "200"
      }
    ],
    "label": "Illustration"
  }
}

 

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?