/acf-image-aspect-ratio-crop

Image Aspect Ratio Crop field for Advanced Custom Fields

Primary LanguagePHPGNU General Public License v2.0GPL-2.0

ACF Image Aspect Ratio Crop Field

Build Status WordPress plugin Active installs

A field for Advanced Custom Fields that forces the user to crop their image to specific aspect ratio after uploading. This is especially useful in responsive image use cases.

After cropping, a new cropped image variant is created in the gallery and saved into the post. Thumbnails are also generated for the new image. User can re-crop the original image at any time from the post page.

The cropped image variants are hidden by default in the media browser and on the media page but you can view them by selecting the "list view" on the media page.

Cropping an image to 16:9 aspect ratio

Screenshot of cropping an image

Cropping in progress

Screenshot of cropping in progress

Option to re-crop the image after upload

Screenshot of the image field

Frequently Asked Questions

Can I access metadata in the original image from a cropped image?

Yes, the original image data is saved under original_image key in the returned ACF array. You can access data such as alt text, description and title this way.

How is this different from the other plugin?

Advanced Custom Fields: Image Crop Add-on is based on exact image dimensions (like 640x480). This plugin uses an aspect ratio such as 4:3 instead. Using an aspect ratio is is more convenient when working with responsive images since you care about the aspect ratio more than pixel dimensions.

Of course, nothing will stop you from using an aspect ratio like 1200:630 which is similar to a pixel amount with this plugin, if you want.

Also, as of 2019, the other plugin is not actively maintained anymore and does not work well with latest ACF versions. I try to maintain this plugin as best as I can when new versions of ACF and WordPress come out.

Thanks

Special thanks to Anders Thorborg for ACF Image Crop which served as a inspiration for this plugin. Also, thanks to Fengyuan Chen for the cropper.js library!

License

GPL v2 or later