Zoom out image smaller than canvas

Feature Idea (one per thread):
Our content editors ned the flexibility to zoom and image out when cropping to be smaller than the canvas size. We often have pngs of product images which we need to resize and position properly in the frame. Currently the content editor needs to have photoshop to properly size the photo first which kind of defeats the purpose of the image editor in prismic.

Issue that it solves:
More flexible image cropping would mean that our content editors wouldn't need an image editing program in order to have them display properly on the site.

Hey @teamgi, thanks for reaching out.

You can apply any level of customization you need for your images using the Image field response views in the builder. This allows you to restrict the sizing of the canvas that appears in the document editor.

Then you can apply your own image transformations modifying the response URL of the image.

Prismic uses Imgix to perform image compression, but you can apply many other editing settings, similar to what you can do with an image editing tool, such as Photoshop. Read Imgix's official API reference to learn all you can do.

@Pau thanks for the response. The issue is that I we cannot resize the image in the editor smaller than the original image size. I'm aware of the imigix api, but this is not an option for our content editors as they are not technical.

I see. In that case, you need to modify the Image field settings and leave the first sizing option empty so that it takes the full size of the image.
Screenshot 2021-07-26 at 16.37.16

Then you can add any additional constraints you need. For example, here I have an image that originally measures 3360 × 2240. I added one smaller constraint with the same proportions but smaller (1680x1120) and then a mobile view (800x800) that will crop the image similar to what you have now
test

Threads close after a period of inactivity. Flag this thread to re-open it and continue the conversation.

I could be mistaken but it seems the original request wasn't understood properly and the reply that was marked as the solution doesn't actually solve the problem.

What would be useful here is to have a cropping option to “contain” the image like the CSS object-fit property. See object-fit - CSS: Cascading Style Sheets | MDN

This would look like this (n.b. the original image has a landscape orientation):

Without adding more additional complexity in the cropping UI, the default behaviour could match what Imgix does with the fit=fill option: “[…] the excess space will be white or transparent, depending on whether the image output format supports transparency”. See Resize Fit Mode | Size Parameters | imgix URL API Documentation

cc: @Prismic-Support-Team since @Pau is on holiday

@raphael.saunier Yes this is exactly what I was looking for but have not found a solution. For now our content editors have to crop the photo first on their computer which defeats the purpose of the online editor.

Hi Team,

You are correct I can see this wasn't a solution to your use case. And thank you @raphael.saunier for providing an idea of how this can be implemented sufficiently.

I agree and I think this should be implemented, so I've marked this as a feature request.

The team isn't working on this right now, but if/when they consider this they will update everyone here.

Thanks.

1 Like