[Feature request] - Add an option to the CMS to specify background color crop fill

[Bram-Zijp]

I would like to have an option to specify crop fill color. Id want to specify this fill crop color in my types/on query level. This way, images with x fade background, could be cropped into an extended background color frame. Currently, you can't crop out of boundary.

[a-trost]

Hey @Bram-Zijp thanks for the feature request! Just so I understand fully, do you mean you'd like to extend outside of the image, like an outward crop where you could specify the color? For example, if I did this outward-crop with red, I'd get this result:

Is that the general idea?

[Bram-Zijp]

Exactly. It might be a niche, but for my use case, id like to fade out images with a certain background color (in your example images, this would be blueish). These images are made to have a certain fade out color that matches the design. In terms of functionality, the default could be white/transparent (PNG/SVG can utilize transparent to any extend). In terms of priority, it would be a nice to have when including functionality like cropping images to an extend where it needs extra "white" space. For my use case it would be black or white, of which the images are faded out to.

[a-trost]

Hey Bram-Zijp , apologies for the very late reply!

We've added it to the list of things we'll consider as we do a rewrite of the editor in the coming year. I do think there would be ways to implement this by using CSS that might be more optimal. That way, you wouldn't be shipping a larger image and wouldn't introduce the potential for editors to accidentally get the solid color border when they didn't intend to.

Maybe two fields, one a color field, and another a number field to determine the spacing around the image.

I know this sort of thing probably isn't ideal for your specific use case, but might be better than nothing.

Thanks so much for the suggestion!

[angeloashmore]

Hey @Bram-Zijp, after consideration, I think something like this is better suited in a custom component. It could be handled using a combination of <div>s and CSS, like @a-trost recommended.

We will be thinking of how a <PrismicImage> component could be implemented (issue: #124). While it may not include the background color functionality you are requesting here, it might be used in your custom component once it is available.

If you have any questions about how you might accomplish what you are trying to achieve, please feel free to ask here. And please feel free to share other suggestions in the future as well! 🙂