patronage / bubs-next

Headless Wordpress + Next.js Project scaffolding
https://bubs-next.vercel.app
MIT License
37 stars 10 forks source link

Image Upscale and Focal point setting #295

Open ccorda opened 11 months ago

ccorda commented 11 months ago

We've been dealing with a couple different but related issues:

1) When we try and fetch a specific ratio image (for example square), and we have different widths: 1600, 1200, 800, 200, and we want to fetch using srcset -- we don't always get a square image. If a user was to upload a 1500 x 1200 image, and you request SQUARE_1600, you'll actually get the original 15x12 image.

The solution to this might be to upscale images:

Or to do an image calculation after we get the original images.

2) Editors don't have control of crops.

We've been experimenting with a couple plugin options:

https://wecodepixels.com/shop/theia-smart-thumbnails-for-wordpress/ https://wordpress.org/plugins/presswell-art-direction/

Our ideal outcome is that it's easy for editors to understand how images will be cropped, we get consistent crop output from WP either from upscaling, or from grabbing the WP output, and using object fit to position (factoring in focal point)