All Projects → joppuyo → acf-image-aspect-ratio-crop

joppuyo / acf-image-aspect-ratio-crop

Licence: GPL-2.0 license
Image Aspect Ratio Crop field for Advanced Custom Fields

Programming Languages

PHP
23972 projects - #3 most used programming language
javascript
184084 projects - #8 most used programming language
SCSS
7915 projects

Projects that are alternatives of or similar to acf-image-aspect-ratio-crop

acf-conditional-logic-advanced
Advanced Custom Fields - Conditional Logic Advanced
Stars: ✭ 31 (-69%)
Mutual labels:  acf, advanced-custom-fields, acf-field, acf-addon
acf-field-boilerplate
Modernized PSR-2 boilerplate for creating custom fields for ACF5.
Stars: ✭ 54 (-46%)
Mutual labels:  acf, advanced-custom-fields, acf-field
acf-overview
ACF Overview allows to quick view configuration of all field groups
Stars: ✭ 19 (-81%)
Mutual labels:  acf, wp-plugin, acf-addon
acf-flexible-content-preview
Transforms ACF's flexible content field's layout list into a modal with image previews.
Stars: ✭ 21 (-79%)
Mutual labels:  acf, wp-plugin, acf-addon
acf-field-group-composer
Configuration builder for advanced custom fields field groups
Stars: ✭ 37 (-63%)
Mutual labels:  acf, advanced-custom-fields
acf-vimeo-pro-data
Vimeo PRO Data field for Advanced Custom Fields v5
Stars: ✭ 14 (-86%)
Mutual labels:  acf-field, acf-addon
flexible-templates
Allows saving templates of the "Flexible Content" field, for easy and fast use of them on other pages.
Stars: ✭ 36 (-64%)
Mutual labels:  acf, acf-addon
acf-typography
A Typography Add-on for the Advanced Custom Fields Plugin
Stars: ✭ 14 (-86%)
Mutual labels:  acf, advanced-custom-fields
acf-swatch
ACF Color Swatch Field
Stars: ✭ 67 (-33%)
Mutual labels:  acf, advanced-custom-fields
acf-country
ACF Country field - Display a select field of all countries, in any language.
Stars: ✭ 103 (+3%)
Mutual labels:  acf, advanced-custom-fields
acf-phone-number
A real ACF phone number field powered by libphonenumber and intl-tel-input
Stars: ✭ 68 (-32%)
Mutual labels:  acf, acf-field
bea-beautiful-flexible
Transform ACF's flexible layouts list into a nice and UX popup.
Stars: ✭ 19 (-81%)
Mutual labels:  acf, acf-addon
acf-move-wp-editor
This is a simple ACF Field that moves the WordPress content editor of a post or page to the location of this field.
Stars: ✭ 32 (-68%)
Mutual labels:  acf, acf-field
Advanced Forms
WordPress plugin to create forms using Advanced Custom Fields
Stars: ✭ 61 (-39%)
Mutual labels:  acf
Acf Options For Polylang
A WordPress plugin for adding ACF options page support for Polylang.
Stars: ✭ 131 (+31%)
Mutual labels:  acf
Wp Vuejs
WordPress VueJS Starter Theme
Stars: ✭ 19 (-81%)
Mutual labels:  acf
Acf Builder
An Advanced Custom Field Configuration Builder
Stars: ✭ 492 (+392%)
Mutual labels:  acf
Gatsby Wordpress Themes
🎨 Gatsby WordPress Theme
Stars: ✭ 175 (+75%)
Mutual labels:  acf
Acf Composer
Compose ACF Fields, Blocks, Widgets, and Option Pages with ACF Builder on Sage 10
Stars: ✭ 124 (+24%)
Mutual labels:  acf
Flynt
Component based WordPress starter theme, powered by ACF Pro and Timber, optimized for a11y and fast page load results.
Stars: ✭ 363 (+263%)
Mutual labels:  acf

ACF Image Aspect Ratio Crop Field

Build Status Test status WordPress plugin Active installs WordPress Plugin Rating WordPress Plugin Required PHP Version WordPress Plugin: Required WP Version WordPress Plugin: Tested WP Version codecov Active Development

A field for Advanced Custom Fields that forces the user to crop their image to specific aspect ratio or pixel size after uploading. Using an aspect ratio 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.

Modes of operation

There are three modes of operation: aspect ratio, pixel size and free crop. You can select this option when creating the field in ACF field options.

Aspect ratio

Use this option if you want the image to be of specific aspect ratio like 16:9 but the pixel size is not important.

After selecting an image, user can select an area from the image that matches this aspect ratio. When crop button is pressed, the area is cropped from the original image.

If you need a smaller image size, you make use of WordPress's thumbnail functionality to access a smaller version of the image.

Pixel size

Use this option if you need a specific pixel size image like 640x480. User will not be able to select an image smaller than the defined pixel size.

After selecting an image, user can select an area from the image they want, which can be larger than the pixel size but may not be smaller. The aspect ratio of the selection is locked according to the pixel size.

When crop button is pressed, the area is cropped from the original image. After the crop is complete, the image will be automatically scaled down to the pixel size. This means the final image will always be the specified size.

Free crop

Crop can be done freely, there are no aspect ratio limitations.

Screenshots

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

Download

You can download the plugin from the WordPress plugin directory, or download the latest release as a zip file from GitHub releases.

Requirements

  • WordPress 4.9 or later
  • PHP 5.6 or later
  • Advanced Custom Fields 5.8 or later (Pro or Free)

Compatiblity

  • Polylang Pro
  • Enable Media Replace
  • WP Offload Media, Media Cloud and other plugins that move media files to remote location

Frequently Asked Questions

Can I use this plugin with a front-end acf_form?

Yes, this functionality has been added in version 5.0.0. Please test it and give feedback if you encounter any issues.

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.

Can I use this plugin with Elementor?

No, not really. Elementor only supports built-in ACF fields. Please contact Elementor support and ask them to add support for 3rd party fields. For some workarounds for limited Elementor support, see this post.

Can I use this plugin with Beaver Builder?

No, not really. Beaver Builder only supports built-in ACF fields. Please contact Beaver Builder support and ask them to add support for 3rd party fields. However, there is a work around this limitation by using a plugin called "Toolbox For Beaver Builder". Please see their website for more details.

How is this different from the other plugin?

This plugin is similar to Advanced Custom Fields: Image Crop Add-on. I originally created a fork of that plugin to add functionality I need: specifying an aspect ratio instead of pixel size. Unfortunately the plugin doesn't seem to be maintained anymore so my pull request was not merged.

So I created ACF Image Aspect Ratio Crop from scratch as an alternative to ACF Image Crop.

Possibility to use a pixel size instead of aspect ratio was added later on because I got so many requests for adding that feature.

The other plugin is not actively maintained 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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].