In my product catalog, some product images need to have the css attribute object-fit: cover while some need the object-fit: contain:
I'd like to detect the white background, possibly on upload (to ease processing when live). I am currently using Imager for transforms, and I would guess that plugin could have some detection feature, but I can't seem to find it.
Reading around a little suggests reading all four corners of the image and determine white bg if all four pixels are white -- but how can I do this? (and how can I do it on file upload?)
Comments for provided solution
Craft CMS has a powerful event system that lets you attach to events and then perform further actions on the entities involved.
I created a site module based on nystudio107's template, and inserted the provided code.
Then I created the field hasWhiteBackground as a lightswitch field, and ran a console command ./craft assets/resave as documented in the Craft CMS 3 docs, to update the lightswitch for existing assets.
I am using imager to transform the images and to create srcset. I use the hasWhiteBackground to do either a fit or crop mode to the resize operation:
{% set image = p.productImage.one()|default(null) %} {% set transformedImages = craft.imager.transformImage(image, [ { width: 269 }, { width: 246 }, { width: 209 } ], { ratio: 1/1, position: image.getFocalPoint()|default("50% 50%"), mode: image.hasWhiteBackground|default(false) ? 'fit' : 'crop' }) %} I then added the class contain to each image outputted:
class="{{ image.hasWhiteBackground ? 'contain'}}"> The class simply adds the following css to the image:
.contain { object-fit:contain; } Here is what the result looks like:
