16.05.2018
0
77

Если перед вами когда-либо стояла задача «Сделать crop изображений на сайте», то вы попали по адресу. Сегодня покажем практический кейс, как можно быстро подключить скрипт для кропа (обрезки) фото на примере кропа аватарки пользователя сайта.

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

Немного поискав в интернете информацию, мы натолкнулись на скрипт под названием Croppie. Он показался нам довольно простым в использовании и, что самое важное, довольно универсальным. Так как он может работать как с JQuery, так и без него. Примеры того, что умеет скрипт, вы сможете посмотреть на Github.

Как подключить crop пользовательских изображений на WordPress CMS

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

путь к директории

Далее подключим скрипт в файле functions.php нужной темы.

Учитывая, что мы у себя используем свой WPS Framework, наше подключение скрипта выглядит следующим образом:

После того, как скрипт подключен, нужно сделать правильную HTML разметку на странице. В нашем случае разметка располагается в личном кабинете пользователя. Разметка будет выглядеть следующим образом:

После этого выполним инициализацию самого скрипта на нашу верстку. Для этого пропишем следующий JS код:

инициализация скрипта 1
инициализация скрипта 2

Давайте посмотрим на внешний вид этого функционала.

аватар
функционал скрипта

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

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

 

Функционал изнутри

 

Начнем с формата данных, в котором обрезанное фото передается на сервер.

Если проинспектировать код, то будет видно, что после обрезки готовое фото помещается в тег <input> в формате base64

готовое фото

И, соответственно, изображение передается уже в формате строки на ваш сервер.

Теперь посмотрим на серверную сторону обработки фото.

Собственно, в данном коде ничего принципиально нового нет, но самое полезное, что вы можете отсюда взять это:

  • обработка фото в видео base64 строки;
  • правильная загрузка фото в медиагалерею WordPress.

 

Посмотрим более детально на обработку самого фото:

загрузка фото

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

Теперь посмотрим на механизм загрузки фото в медиагалерею WordPress.

загрузка в галерею

Данная часть скрипта является универсальной, и вы можете использовать её во всех случаях, когда нужно правильно прикрепить фото к типу записи в системе.

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

 

Для наглядного понимания, как это работает на фронт части, посмотрите пример ниже. Применяйте, создавайте новое и развивайтесь 😉

пример обрезки фото



В версии 2.0

  • Существенно доработан интерфейс
  • Появилась возможность добавлять фразы
  • Добавлена поддержка "serpstat.com"
  • Добавлена возможность выгрузить слова через запятую
  • Добавлена возможность выгрузить фразы в кавычках
  • Появилась кнопка "Добавить" из буфера обмена, копируйте и вставляйте в расширение ранее собранные списки
  • Добавлена возможность закрепить окно расширения или скрыть его для вашего удобства
  • В analytics.google.com расширение больше не работает

Обновлены комбинации

  • LeftMouseClick для добавления слова, повторное нажатие - для удаления
  • ALT + LeftMouseClick - для сбора фраз