When you add a responsive view to an Image field in a Custom Type, the existing documents using this custom type won't be updated with the new responsive view.

The Import/Export tool can be used to bulk update existing documents, so you can use it to automatically generate the new thumbnails for existing documents.

Assuming a very simple Custom Type that has a Title and an Image field with a "Mobile" responsive view:

{
"Main" : {
"page_name" : {
"type" : "StructuredText",
"config" : {
"single" : "heading1",
"label" : "Page name"
}
},
"image" : {
"type" : "Image",
"config" : {
"constraint" : { },
"thumbnails" : [ {
"name" : "Mobile",
"width" : 300,
"height" : 400
} ],
"label" : "Image"
}
}
}
}

If you export a document of this type using the Export module, you'll get a JSON file like this:

{
"page_name": [
{
"type": "heading1",
"content": {
"text": "Updating responsive views",
"spans": []
}
}
],
"image": {
"origin": {
"id": "XsKyWBAAANKx2yr7",
"url": "https://prismic-io.s3.amazonaws.com/repository-name/image.png",
"width": 810,
"height": 680
},
"width": 810,
"height": 680,
"url": "https://images.prismic.io/repository-name/image.png?auto=compress,format",
"edit": {
"background": "transparent",
"zoom": 1.0,
"crop": {
"x": 0,
"y": 0
}
},
"credits": null,
"alt": null,
"provider": "imgix",
"thumbnails": {
"Mobile": {
"origin": {
"id": "XsKyWBAAANKx2yr7",
"url": "https://prismic-io.s3.amazonaws.com/repository-name/image.png",
"width": 810,
"height": 680
},
"width": 300,
"height": 400,
"url": "https://images.prismic.io/repository-name/image.png?auto=compress,format&rect=150,0,510,680&w=300&h=400",
"edit": {
"background": "transparent",
"zoom": 0.5882352941176471,
"crop": {
"x": -88,
"y": 0
}
},
"credits": null,
"alt": null,
"provider": "imgix"
}
}
},
"type": "page",
"tags": [],
"lang": "en-us",
"grouplang": "XsKybBAAAA-v2ysm"
}

Now let's say you want to add a "Tablet" responsive view to the Image field of your content type, your custom type JSON will then look like this:

{
"Main": {
"image": {
"type": "Image",
"config": {
"constraint": {},
"thumbnails": [
{
"name": "Mobile",
"width": 300,
"height": 400
},
{
"name": "Tablet",
"width": 600,
"height": 340
}
],
"label": "Image"
}
}
}
}

After updating the custom type, you'll see that for existing documents using it, the "Tablet" view remains empty:

To automatically populate it for many documents, you can re-import the same JSON you've exported and just keep the very basic origin, id, and url data for the image field.

Important: in order to ensure that you update the existing document (rather than creating a new one), keep the same filename you got from the initial Export (something like this: Xr6nORAAAChEyddW$45c60489-7511-463d-ad9f-61d05c9b90c5.json)


So your JSON for updating a document will look like this:

{
"page_name": [
{
"type": "heading1",
"content": {
"text": "Updating responsive views",
"spans": []
}
}
],
"image": {
"origin": {
"id": "XsKyWBAAANKx2yr7",
"url": "https://prismic-io.s3.amazonaws.com/repository-name/image.png"
}
},
"type": "page",
"tags": [],
"lang": "en-us",
"grouplang": "XsKybBAAAA-v2ysm"
}

Note that just keeping the very basic origin, id, and url data for the image field, it will regenerate the thumbnails of existing responsive views using the default cropping behavior. So, if content editors have made custom adjustments to responsive view from the UI (zooming or cropping) in the past, it's better to keep the existing thumbnails data in the JSON file you'll import to update the documents:

"thumbnails": {
"Mobile": {
"origin": {
"id": "XsKyWBAAANKx2yr7",
"url": "https://prismic-io.s3.amazonaws.com/repository-name/432bdd1e-e91a-4732-b32f-14aeaa4da2d5_Screen+Shot+2020-05-07+at+11.14.34.png",
"width": 810,
"height": 680
},
"width": 300,
"height": 400,
"url": "https://images.prismic.io/repository-name/432bdd1e-e91a-4732-b32f-14aeaa4da2d5_Screen+Shot+2020-05-07+at+11.14.34.png?auto=compress,format&rect=150,0,510,680&w=300&h=400",
"edit": {
"background": "transparent",
"zoom": 0.5882352941176471,
"crop": {
"x": -88,
"y": 0
}
},
"credits": null,
"alt": null,
"provider": "imgix"
}
}

During the import job, Prismic will create the thumbnails associated with the image field in your updated custom types. So after the import is done, you should see your "Tablet" view in the documents.

Did this answer your question?