How to import and crop an image

Prismic for Content Creators
1

I want to import images from local files and crop them as part of a content import. In my JSON file I have

  "image_4": {
    "origin": { "url": "example-image4.jpg" }
  },

This is loading example-image4.jpg into the image_4 field correctly. What I would like to do is apply a standard crop to those images during the import so I don't need to crop each image manually later.

Is there a way I can do this by setting extra fields?

When I export an image that has been manually cropped I see this. I've tried adding the width/height and the edit option to my import but it had no impact.

  "image_4": {
    "origin": {
      "id": "SOMEID",
      "url": "https://prismic-io.s3.amazonaws.com/SITE/example-image4.jpg",
      "width": 1200,
      "height": 800
    },
    "width": 800,
    "height": 1200,
    "url": "https://images.prismic.io/SITE/example-image4.jpg?auto=compress,format&rect=279,4,528,792&w=800&h=1200",
    "edit": {
      "background": "#fff",
      "zoom": 1.5149999999999997,
      "crop": { "x": -422, "y": -6 }
    },
    "credits": null,
    "alt": null,
    "provider": "imgix",
    "thumbnails": {}
  },

Is there a way I can do this?

3

Hello Richard and welcome to the Prismic Community!

You can edit or transform your images just by modifying the URL of your Image fields. This is possible thanks to the Imgix integration to Prismic.

Take a look at this article to learn more about how to edit your images using Imgix!

4

I'm aware of the Imigx integration. My question is how can I do this while importing images from the file system? We need to import data for several hundred products with thousands of images. It's very time consuming to do this manually. We need a way to import products from with images from the local file system and apply a default crop to all of them so that they can be tweaked if required.

5

It won't be possible to add the parameters from the file system. Instead, if you want to bulk change the parameters of the images you can, first, upload the images as they are, and then, in your application add the Imgix cropping settings to the URLs of the images hosted in Prismic.

Check this example

So, This is a raw example of what an Image field response looks like:

https://images.prismic.io/your-repo-name/cbd5772b-075e-4754-8e3a-d39810c4ff4f_image

Before doing anything, we save the image URL coming from Prismic in a constant:

const imageUrl = document.illustration.url

Then we add a rect parameter to make the crop settings

const newImageUrl = `${imageUrl}&rect=241,0,628,628`
6

This doesn't actually solve the problem. When I upload an image via the UI I can crop it manually. I want to do that when importing so that images have a default crop but also so that content editors can go in later and manually adjust the cropping if required. If I hard code cropping information into the URL then they won't be able to do that.

7

I see, then you just need to add responsive views to the Image field:

By doing this, the cropping or resizing settings will be added to every image existing in that field. All that is left to do is for content editors to move around the image of needed.

8

This issue has been closed due to inactivity. Flag to reopen.