Advanced Custom Fields: Image Aspect Ratio Crop

Описание

Поле для Advanced Custom Fields, которое заставляет пользователя обрезать изображение до определенных пропорций или размера в пикселях после загрузки. Использование пропорциональной обрезки особенно полезно в случаях использования адаптивных изображений.

После обрезки в галерее создается новый вариант обрезанного изображения, который также сохраняется в записи. Для нового изображения также создаются миниатюры. Пользователь может в любой момент повторно обрезать исходное изображение со страницы записи.

Варианты обрезанного изображения по умолчанию скрыты в медиа браузере и на странице медиа, но вы можете посмотреть их, выбрав «вид списка» на странице медиа.

Есть три режима работы: пропорциональная обрезка, размер в пикселях и свободная обрезка. Вы можете выбрать эту опцию при создании поля ACF

Пропорциональная обрезка

Используйте эту опцию, если вы хотите, чтобы изображение имело определенные пропорции, например 16:9, но при этом, размер в пикселях не имел значения.

После выбора изображения пользователь может выбрать область изображения, которая соответствует этому соотношению сторон. При нажатии кнопки «Обрезать» область обрезается из исходного изображения.

Если вам нужно изображение меньшего размера, воспользуйтесь функцией миниатюр WordPress для доступа к уменьшенной версии изображения.

Размер в пикселях

Используйте эту опцию, если вам нужно изображение определенного размера в пикселях, например 640×480. Пользователь не сможет выбрать изображение меньше заданного размера в пикселях.

После выбора изображения пользователь может выбрать область из нужного изображения, которая может быть больше, чем размер в пикселях, но не может быть меньше. Соотношение сторон выделенного фрагмента заблокировано в соответствии с размером в пикселях.

При нажатии кнопки «Обрезать» область обрезается из исходного изображения. После завершения обрезки изображение будет автоматически уменьшено до размера в пикселях. Это означает, что конечное изображение всегда будет указанного размера.

Свободная обрезка

Обрезку можно делать свободно, ограничений по пропорциям нет.

Требования

  • WordPress: 4.9 или выше
  • PHP 5.6 или выше
  • Advanced Custom Fields 5.8 или выше (Pro или Free)

Совместимость

  • Polylang Pro
  • Enable Media Replace
  • WP Offload Media, Media Cloud и другие плагины, которые перемещают медиафайлы в удаленное местоположение

  • ACF 5.8 или выше (Pro или Free)

Спасибо

Особая благодарность Андерсу Торборгу за ACF Image Crop, который послужил источником вдохновения для этого плагина. Также спасибо Фэнюань Чен за библиотеку cropper.js!

Скриншоты

  • Обрезка изображения до соотношения сторон 16:9
  • Обрезка в процессе
  • Возможность повторно обрезать изображение после загрузки

Установка

  1. Скопируйте папку acf-image-aspect-ratio-crop в директорию wp-content/plugins.
  2. Активируйте плагин Image Aspect Ratio Crop на странице администрирования плагинов.
  3. Создайте новое поле через ACF и выберите тип Image Aspect Ratio Crop
  4. Прочтите описание выше для получения инструкций по использованию

Часто задаваемые вопросы

Могу ли я использовать этот плагин с acf_form?

Да, эта функция была добавлена в версии 5.0.0. Пожалуйста, протестируйте её и оставьте отзыв, если у вас возникнут какие-либо проблемы.

Могу ли я получить доступ к метаданным исходного изображения из обрезанного изображения?

Да, исходные данные изображения сохраняются в поле original_image в возвращаемом массиве ACF. Таким образом вы можете получить доступ к таким данным, как alt-текст, description и title.

Могу ли я использовать этот плагин с Elementor?

Нет, не совсем. Elementor поддерживает только встроенные поля ACF. Обратитесь в службу поддержки Elementor и попросите добавить поддержку сторонних полей. Некоторые обходные пути для ограниченной поддержки Elementor смотрите в этой записи.

Могу ли я использовать этот плагин с Beaver Builder?

Нет, не совсем. Beaver Builder поддерживает только встроенные поля ACF. Пожалуйста, свяжитесь со службой поддержки Beaver Builder и попросите их добавить поддержку для сторонних полей. Однако это ограничение можно обойти, используя плагин под названием «Toolbox For Beaver Builder». Дополнительные сведения см. на их веб-сайте .

У меня проблема или я хочу добавить код

Пожалуйста, используйте репозиторий GitHub, чтобы задать вопрос о плагине. Вы также можете создать pull request на GitHub.

Чем он отличается от другого плагина?

Этот плагин похож на Advanced Custom Fields: Image Crop Add-on. Изначально я создал ответвление этого плагина, чтобы добавить необходимую мне функциональность: указать соотношение сторон вместо размера в пикселях. К сожалению, похоже, что плагин больше не поддерживается, поэтому мой pull request не был слит.

Поэтому я с нуля создал ACF Image Aspect Ratio Crop в качестве альтернативы к ACF Image Crop .

Возможность использовать размер в пикселях вместо соотношения сторон была добавлена позже, потому что я получил очень много запросов на добавление этой функции.

Другой плагин не поддерживается активно и плохо работает с последними версиями ACF. Я стараюсь поддерживать этот плагин как можно лучше, когда выходят новые версии ACF и WordPress.

Отзывы

04.02.2021
Thank you. Fingers x no more explaining to admins how to crop images.
07.08.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 отзывов

Участники и разработчики

«Advanced Custom Fields: Image Aspect Ratio Crop» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

«Advanced Custom Fields: Image Aspect Ratio Crop» переведён на 6 языков. Благодарим переводчиков за их работу.

Перевести «Advanced Custom Fields: Image Aspect Ratio Crop» на ваш язык.

Заинтересованы в разработке?

Посмотрите код, проверьте SVN репозиторий, или подпишитесь на журнал разработки по RSS.

Журнал изменений

5.1.2 (2021-03-11)

  • Fix: Увеличен тэг stable

5.1.1 (2021-03-11)

  • Fix: Увеличена совместимость до WP 5.7

5.1.0 (2021-01-30)

  • Feature: Добавлен режим совместимости с REST API. Это позволяет обрезать изображения в интерфейсе администрирования WordPress с помощью admin-ajax.php вместо REST API. Вы можете включить это, перейдя в Плагины -> ACF Image Aspect Ratio Crop -> Настройки. Обратите внимание, что это временное исправление для сайта, на котором не включен REST API. Режим совместимости будет удален в будущей мажорной версии плагина.
  • Fix: Улучшено логирование ошибок

5.0.6 (2021-01-28)

  • Fix: Исправление ошибки, вызванной неправильным порядком параметров в PHP 8.

5.0.5 (2020-12-22)

  • Fix: Исправлена проблема совместимости с Polylang Pro 2.9.

5.0.4 (2020-12-13)

  • Fix: Исправлена проблема совместимости с изменениями REST API WordPress 5.6
  • Fix: Исправлена проблема с обрезкой front-end изображения, когда поле обрезанного изображения перезаписывало другое поле обрезанного изображения.
  • Изменение: Протестировано до WordPress 5.6.

5.0.3 (2020-12-03)

  • Fix: Исправлена ошибка, из-за которой обрезка не работала на подсайтах с несколькими сайтами

5.0.2 (2020-11-30)

  • Fix: Обновленны строки перевода

5.0.1 (2020-11-30)

  • Fix: Исправлена проблема совместимости с Yoast SEO, которая вызывала ошибку, из-за которой модальное окно медиа не открывалось

5.0.0 (2020-11-30)

  • Критическое изменение: REST API теперь используется для обрезки изображения вместо admin-ajax
  • Feature: Добавлена фронтенд обрезка изображений. Это позволяет использовать функцию обрезки с формами ACF на фронтенде, даже если у пользователя нет доступа к библиотеке медиа.

Я хотел бы воспользоваться моментом, чтобы рассказать, что у меня есть страница на GitHub Sponsors. Поддержка этого плагина — это сложная работа, и фронтенд обрезка изображений — одна из тех функций, которые я не использую лично, но меня столько раз просили о ней, что пришлось добавить в плагин, на это ушло много дней работы.

Если вы считаете эту функцию полезной или хотите поддержать разработку этого плагина, подумайте о том, чтобы поддержать меня на GitHub Sponsors. Спасибо!

4.1.4 (2020-11-19)

  • Увеличен тэг stable

4.1.3 (2020-11-19)

  • Fix: WPML: исправлена проблема с WPML, когда в медиа галерее были видны обрезанные изображения
  • Fix: WPML: при дублировании записи на перевод в WPML, поля изображений теперь меняются на переведенную версию.
  • Fix: Исправлена ошибка, из-за которой сообщения об ошибках PHP, выводимые на странице, выталкивали модальное окно за пределы окна браузера

4.1.2 (2020-10-16)

  • Fix: PHP Notice при сохранении страницы параметров ACF с включенным удалением неиспользуемых изображений.

4.1.1 (2020-10-14)

  • Fix: Убедитесь, что исходное изображение существует, прежде чем использовать его в процессе обрезки.
  • Fix: Улучшена совместимость с Polylang Pro за счет использования переведенной версии вложения при дублировании записи на другой язык.

4.1.0 (2020-10-07)

  • Feature: добавьте фильтр aiarc_jpeg_quality, чтобы изменить качество обрезки JPEG.
  • Fix: Удалить излишне подробную отладку

4.0.6 (2020-10-03)

  • Fix: Проблема, при которой изображение некорректно обрезается, если изображение имеет поворот EXIF и превышает предельное значение для большого изображения.

5.0.0-beta1 (13.09.2020)

  • Критическое изменение: REST API теперь используется для обрезки изображения вместо admin-ajax
  • Feature: добавлена фронтенд обрезка изображений. Обратите внимание на следующие ограничения:
    • В настоящее время невозможно ограничить размер загружаемого файла
    • В настоящее время невозможно ограничить формат файла для фронтенд загрузки. Разрешены изображения в форматах JPEG, PNG и GIF.
    • В настоящее время невозможно ограничить высоту и ширину для фронтенд загрузок. Это означает, что изображения обрезанные по размеру могут быть меньше желаемого, но они все равно будут иметь правильное соотношение сторон.

4.0.5 (2020-09-06)

  • Fix: Увеличена версия

4.0.4 (2020-09-06)

  • Изменение: обновите скриншоты, чтобы отразить последние версии плагина и WordPress.

4.0.3 (2020-09-05)

  • Изменение: Обновление зависимостей
  • Fix: Улучшение смещенных кнопок обрезки, редактирования и удаления в ACF 5.9.
  • Fix: Используйте пользовательские стили кнопок вместо настроек WordPress по умолчанию. Это прокладывает путь для front end обрезки, поскольку темы не могут нанести ущерб модальным стилям.
  • Fix: Улучшено масштабирование при обрезке на мобильных устройствах.

4.0.2 (2020-08-17)

  • Fix: Удалена неиспользуемая папка поставщика

3.4.1 (2020-08-17)

  • Fix: Исправлена проблема, из-за которой минимальная высота и ширина не устанавливались при использовании размера в пикселях (Перенесено из версии 4.0.1).

4.0.1 (2020-08-17)

  • Fix: Исправлена проблема, когда минимальная высота и ширина не устанавливались при использовании размера в пикселях
  • Fix: Увеличено время ожидания удаленного GET с 5 до 25 секунд.

4.0.0 (2020-08-17)

  • Критическое изменение: минимально необходимая версия PHP теперь 5.6
  • Критическое изменение: минимально необходимая версия ACF теперь 5.8. Более ранняя версия может работать, но это минимальная версия, в которой есть автоматические тесты
  • Критическое изменение: wp_remote_get используется вместо Guzzle при получении удаленных изображений. Это не сильно влияет, если вы не используете фильтры для изменения поведения получения удаленных изображений
  • Изменение: Проверена совместимость с WordPress 5.5

3.4.0

  • Feature: Добавлена совместимость с WPGraphQL
  • Feature: Добавлены фильтры для настройки поведения, спасибо @urlund c GitHub!

3.3.2

  • Fix: Исправлена проблема, из-за которой изображение не масштабировалось, когда оно соответствовало соотношению сторон.
  • Fix: Исправлено имя файла при использовании свободной обрезки, используются фактические размеры файла вместо 0x0

3.3.1

  • Fix: Исправлена ошибка, из-за которой скрытое обязательное поле не позволяло сохранить кастомные поля.
  • Fix: Удалена повторяющаяся подсказка для поля

3.3.0

  • Feature: Добавлена возможность свободной обрезки, особая благодарность @phildittrich с GitHub за вклад в эту функцию
  • Fix: Bсправлена ошибка, из-за которой минимальная высота и минимальная ширина не сохранялись при использовании опции размера в пикселях.

3.2.0

  • Feature: Добавлена возможность использования размера в пикселях вместо пропорциональной обрезки. Ознакомьтесь с файлом readme для получения дополнительной информации о том, как это работает.
  • Fix: исправлено неправильное отображение изображений в WP < 5.3
  • Fix: Исправление визуальных ошибок для кнопок обрезки и редактирования для предотвращения переполнения элементов
  • Изменение: обновлена протестированная версия WP до 5.4.

3.1.12

  • Fix: Улучшена совместимость с обработкой больших изображений WordPress 5.3
  • Fix: Разрешение закрытия модального окна обрезки с помощью клавиши escape
  • Изменение: Изменение суффикса для пропорции в имени файла с x на тире, поскольку это вызывало некоторые проблемы с WP 5.3. Теперь файл my-image-aspect-ratio-16×9.jpeg вместо этого будет называться my-image-aspect-ratio-16-9.jpeg.
  • Fix: Устранена проблема, из-за которой «удаление неиспользуемых обрезанных изображений» не работало должным образом с вложенными полями

3.1.11

  • Fix: Удаление зависимости ramsey / uuid в пользу использования встроенной функции wp, поскольку зависимость вызывала проблемы в некоторых
    конфигурациях сервера

3.1.10

  • Fix: Устранена проблема, при которой изображение не отображалось в резервной копии из-за неправильного URL-адреса

3.1.8

  • Fix: Исправление развертывания

3.1.0

  • Feature: Добавление новой бета-функции: удалить неиспользуемые обрезанные изображения. Вы можете включить это, перейдя в
    Плагины -> ACF Image Aspect Ratio Crop -> Настройки
  • Fix: Обновление совместимой версии до WordPress 5.3
  • Fix: Добавить автоматизированные тесты

3.0.1

  • Fix: Увеличена версия плагина

3.0.0

  • Fix / Breaking change: Если изображение было удалено, возвращался объект с пустым полем original_image. В 3.0.0 вместо этого возвращается false, чтобы сохранить совместимость с обычным полем изображения.

2.2.1

  • Fix: Улучшение совместимости с WPML

2.2.0

  • Feature: Добавить совместимость с плагином ACF Image Crop
  • Fix: Измените размер предварительного просмотра по умолчанию на средний, как в ACF 5.8.1.
  • Fix: Удаление CSS тени изображения для соответствия последним стилям полей изображения ACF

2.1.1

  • Fix: Исправлена ошибка, из-за которой координаты обрезки сохранялись после удаления изображения

2.1.0

  • Feature: Обрезчик теперь запоминает последнее положение обрезки при повторной обрезке изображения
  • Feature: Добавлена кнопка для сброса положения обрезки до значения по умолчанию (по центру)
  • Fix: Увеличена поддерживаемая версия WordPress до 5.2

2.0.3

  • Fix: Разрешена обрезка в случаях, когда изображение размещено удаленно и отсутствуют CORS заголовки

2.0.2

  • Fix: Исправлена ошибка, из-за которой при сохранении в модальном окне обрезанное изображение заменялось на оригинальное, когда в «Изображение, отображаемое в модальном окне редактирования вложения» было выбрано «Исходное изображение».
  • Fix: Cохранение версии плагина в базе данных для поддержки миграции
  • Fix: Получение хэш файла в режиме отладки по пути к файлу вместо URL

2.0.1

  • Fix: Исправлена опечатка

2.0.0

  • Feature: Совместимость с WP Offload Media и аналогичными плагинами, которые перемещают изображения WordPress в удаленное место. Плагин теперь будет пытаться получить изображения с удаленных URL-адресов, если они не найдены в файловой системе
  • Критическое изменение: Из-за новых зависимостей, PHP 5.5 теперь является минимально необходимой версией

1.3.1

  • Fix: Исправлен скрипт деплоя

1.3.0

  • Feature: Перевод через w.org

1.2.3

  • Fix: Обновлен readme

1.2.2

  • Fix: Обновлены скриншоты

1.2.0

  • Feature: Теперь можно редактировать исходные данные изображения вместо данных обрезанного изображения при нажатии кнопки карандаша в поле изображения. Это удобно, если у вас есть метаданные, такие как alt-текст, которыми вы хотите поделиться между исходным изображением и его обрезанными вариантами. Включите это, выбрав Настройки в списке плагинов.
  • Feature: Теперь во время обрезки изображения отображается индикатор выполнения (spinner)
  • Feature: Если при обрезки изображения возникает ошибка, сообщение об ошибке отображается в модальном окне вместо окна предупреждения браузера
  • Feature: Улучшенные стили для обрезки
  • Feature:Современный и улучшенный процесс сборки с помощью webpack
  • Feature: Возможность локализации текстов UI

1.1.2

  • Fix: Увеличить поддерживаемую версию WordPress до 5.1

1.1.1

  • Fix: Обновлен readme

1.1.0

  • Feature: Разрешить настройку каталога загрузки файлов с помощью фильтров aiarc_pre_customize_upload_dir и aiarc_after_customize_upload_dir

1.0.9

  • Fix: Обновлены скриншоты
  • Fix: Обновление информации о совместимости WordPress

1.0.8

  • Исправление ошибки с обнаружением того же соотношения сторон

1.0.7

  • Обновление информации о совместимости

1.0.6

  • Исправление ошибки с обнаружением того же соотношения сторон

1.0.5

  • Улучшение пользовательского интерфейса
  • Исправлена ошибка, из-за которой обрезка иногда показывала неправильное изображение.
  • Повышенная производительность в случаях, когда загруженное изображение имело правильные пропорции. Спасибо @hrohh на w.org за подсказку!

1.0.4

  • Исправление несовместимости с ACF 5.7

1.0.3

  • Релиз на w.org

1.0.2

  • Обновлен readme

1.0.1

  • Исправлена ошибка, из-за которой обрезчик ломался, если было выбрано несколько изображений
  • Обрезка теперь недоступна во время процесса обрезания
  • Исправлена ошибка, из-за которой нельзя было повторно обрезать изображение перед сохранением записи

1.0.0

  • Первая версия.