Advanced Custom Fields: Image Aspect Ratio Crop Field

Descripción

Un campo para Advanced Custom Field que fuerza al usuario a recortar su imagen a una relación de aspecto o tamaño en píxeles específico después de subirla. Usar una relación de aspecto es especialmente útil en casos de uso de imágenes adaptables.

Después de recortar, se crea una nueva variante de la imagen recortada en la galería y se guarda en la publicación. También se generan miniaturas para la nueva imagen. El usuario puede volver a recortar la imagen original en cualquier momento desde la página de la publicación.

Las variantes de la imagen recortada están ocultas por defecto en el navegador de medios y en la página de medios, pero puedes verlas seleccionando la «vista de lista» en la página de medios.

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 640×480. 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.

Compatibilidad

Este tipo de campo de «ACF» es compatible con:

  • ACF 5

Gracias

Agradecimientos especiales para Anders Thorborg de ACF Image Crop que sirvió como inspiración para este plugin. Además, ¡gracias a Fengyuan Chen por cropper.js !

Capturas

  • Recortar una imagen a una relación de aspecto de 16:9
  • Recorte en progreso
  • Opción para volver a recortar la imagen después de subirla

Instalación

  1. Copia la carpeta acf-image-aspecto-ratio-crop en el directorio wp-content/plugins
  2. Activa el plugin «Image Aspect Ratio Crop» a través de la página de gestión de plugins
  3. Crea un nuevo campo a través de «ACF» y seleccione el tipo de recorte de relación de aspecto de imagen
  4. Lea la descripción anterior para las instrucciones de uso

Preguntas frecuentes

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

Unfortunately this is not supported right now since the plugin requires upload_files capability to access the media library. If user does not have this permission, a basic upload dialog will be displayed without a cropper. You can enable cropping by assigning upload_files capability to the user role but this means that users are able to access the media library like admin users. I will look into implementing front-end form cropping without needing this capability in a future release of this plugin.

¿Puedo acceder a los metadatos de la imagen original desde una imagen recortada?

Sí, los datos de la imagen original se guardan en la clave original_image en la matriz devuelta por «ACF». Puedes acceder a los datos como el texto alternativo, la descripción y el título de esta manera.

Tengo un problema o quiero contribuir con código

Usa el repositorio de GitHub para subir problemas del plugin. También puedes enviar una solicitud de extracción en GitHub.

¿En qué difiere de otro 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.

El otro plugin ya no se mantiene activamente y no funciona bien con las últimas versiones de ACF. Intento mantener este plugin lo mejor que puedo cuando salen nuevas versiones de ACF y WordPress.

Reseñas

7 de agosto de 2020
This plugin is great! It works perfect, no problems yet. You can use it in the frontend if you restrict media access to uploaded to post. This way the user will only see the images he uploaded by himself, but can use the media library and therefore the crop functionality in frontend. It is also possible to translate / change the strings using the "gettext" filter. Thank you very much, great job!!
19 de junio de 2020
This is a fantastic plugin. Simple and functional. Thanks so much Johannes for your hard work.
16 de marzo de 2020
I asked for an update to generate the pixel size of images so my clients can't upload huge images anymore to a website. The maker of the plugin reacted very quick and not even a week later there was an update with the 'Pixel size function' which I asked for. Me and my clients are very happy with this update. A big thanks and 5 stars for this plugin, keep on going!
Leer todas las 16 reseñas

Colaboradores y desarrolladores

«Advanced Custom Fields: Image Aspect Ratio Crop Field» es un software de código abierto. Las siguientes personas han colaborado con este plugin.

Colaboradores

«Advanced Custom Fields: Image Aspect Ratio Crop Field» ha sido traducido a 5 idiomas locales. Gracias a los traductores por sus contribuciones.

Traduce «Advanced Custom Fields: Image Aspect Ratio Crop Field» a tu idioma.

¿Interesado en el desarrollo?

Revisa el código , echa un vistazo al repositorio SVN o suscríbete al registro de desarrollo por RSS.

Registro de cambios

3.4.0

  • Feature: Added compatibility with WPGraphQL
  • Feature: Added filters to customize behavior, thanks @urlund on GitHub!

3.3.2

  • Fix: Fixed issue where pixel size image is not scaled when it matches the aspect ratio
  • Fix: Fixed file name when using free crop, use actual file dimensions instead of 0x0

3.3.1

  • Fix: Fixed issue where hidden required field prevented saving custom fields
  • Fix: Remove duplicated field hint

3.3.0

  • Feature: Added option for free cropping, special thanks to @phildittrich on GitHub for contributing this feature
  • Fix: Fixed issue where min height and min width are not save when using pixel size option

3.2.0

  • Feature: Added an option to use a pixel size instead of aspect ratio. Check the readme for more information about how it works.
  • Fix: Fixed images displaying in wrong rotation in WP < 5.3
  • Fix: Visual bug fixes to cropper and field edit buttons to prevent overflowing of elements
  • Change: updated tested WP version to 5.4

3.1.12

  • Fix: Improved compatibility with WordPress 5.3 large image handing
  • Fix: Allow closing crop modal with escape key
  • Change: change file name suffix aspect ratio from x to dash because this caused some issues with WP 5.3. Now file my-image-aspect-ratio-16×9.jpeg will be called my-image-aspect-ratio-16-9.jpeg instead
  • Fix: Fix problem where «delete unused cropped images» did not work properly with nested fields

3.1.11

  • Fix: Remove ramsey/uuid dependency in favor of using native wp function since the dependency caused issues in some
    server configurations

3.1.10

  • Fix: Fix issue where image was not visible in backed due to malformed URL

3.1.8

  • Fix: Deployment fix

3.1.0

  • Feature: Add new beta feature: delete unused crop images. You can enable this by going to
    Plugins -> ACF Image Aspect Ratio Crop -> Settings
  • Fix: Update compatible version to WordPress 5.3
  • Fix: Add automated tests

3.0.1

  • Fix: bump plugin version

3.0.0

  • Fix / Breaking change: If image was deleted, object with empty original_image field was returned. In 3.0.0 false is returned instead to keep compatibility with normal image field.

2.2.1

  • Fix: Improve WPML compatibility

2.2.0

  • Feature: Add compatibility with ACF Image Crop plugin
  • Fix: Change default preview size to medium, as in ACF 5.8.1
  • Fix: Remove image CSS shadow to match latest ACF image field styles

2.1.1

  • Fix: Fix issue where crop coordinates persisted after deleting image

2.1.0

  • Feature: Cropper now remembers last crop position when re-cropping image
  • Feature: Add button to reset crop position to default (centered)
  • Fix: Bump supported WordPress version to 5.2

2.0.3

  • Fix: Allow cropping in cases when image is hosted remotely and is missing CORS headers

2.0.2

  • Fix: Fix issue where saving in image modal replaced cropped image with original when «Original image» was selected in «Image displayed in attachment edit modal dialog»
  • Fix: Actually save plugin version in the database for migration support
  • Fix: Get file hash in debug mode from file path instead of URL

2.0.1

  • Fix: Fix typo

2.0.0

  • Feature: Compatibility with WP Offload Media and similar plugins that move WordPress images to a remote location. Plugin will now attempt to fetch images from remote URLs if they are not found in the file system.
  • Breaking change: Due to new dependencies, PHP 5.5 is now the minimum required version

1.3.1

  • Fix: Fix deployment script

1.3.0

  • Feature: Handle translation through w.org

1.2.3

  • Fix: Update readme

1.2.2

  • Fix: Update screenshots

1.2.0

  • Feature: It’s now possible to edit original image data instead of cropped image data when pressing the pencil button in the image field. This is handy if you have meta data such as alt text that you want to share between the original image and its cropped variants. Toggle this by selecting Settings in the plugin list.
  • Feature: There is now a progress indicator (spinner) displayed while the image is being cropped
  • Feature: If an error occurs while cropping an image, the error message is displayed inline in the modal instead of a browser alert window
  • Feature: Improved styles for the cropper
  • Feature: Modern and improved build process with webpack
  • Feature: Make it possible to localize UI texts

1.1.2

  • Fix: Bump supported WordPress version to 5.1

1.1.1

  • Fix: Update readme

1.1.0

  • Feature: Allow customizing file upload directory with filters aiarc_pre_customize_upload_dir and aiarc_after_customize_upload_dir

1.0.9

  • Fix: Update screenshots
  • Fix: Update WordPress compatibility information

1.0.8

  • Fix bug with detecting the same aspect ratio

1.0.7

  • Update compatibility information

1.0.6

  • Fix bug with detecting the same aspect ratio

1.0.5

  • User interface improvements
  • Fixed issue where cropper sometimes showed a wrong image
  • Improved performance in cases uploaded image had the correct aspect ratio. Thanks to @hrohh on w.org for the tip!

1.0.4

  • Fix incompatibility with ACF 5.7

1.0.3

  • Release on w.org

1.0.2

  • Update readme

1.0.1

  • Fix issue where the cropper broke if multiple images were selected inside a repeater
  • Cropper is now disabled while cropping is in progress
  • Fix issue where is was not possible to re-crop image before saving the post

1.0.0

  • Initial Release.