Crop (обрезка) аватара пользователя

16.05.2018
5 минут
Разработка, Руководства,
1296

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

 

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

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

готовое фото

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

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

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

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

 

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

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

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

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

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

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

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

 

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

пример обрезки фото
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

Будьте в курсе последних обновлений

Присоединиться в

Получить 7 писем о том,
как улучшить свой AdWords аккаунт
+ PPC статьи

Имя
e-mail
Улучшить AdWords

Улучшить свой AdWords

Получите 7 писем, о том, как можно улучшить свой аккаунт в AdWords

Подписаться

Наш сайт использует файлы cookie, чтобы улучшить работу и предоставить максимальное удобство пользователям.

В версии 3.0.0

  • новые сервисы: Ubersuggest (NeilPatel), Spyfu и другие;
  • автосохранение списка минус-слов в рабочей области;
  • авторизация для хранения данных в аккаунте;
  • списки типовых минус-слов;
  • возможность хранить пользовательские списки минус-слова в расширении для дальнейшего применения в аккаунте;
  • англоязычный и русскоязычный интерфейс.

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

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

In version 3.0.0

  • new services: Ubersuggest (NeilPatel), Spyfu and others;
  • autosave of a negative keywords list in the workspace;
  • authorization for storing data in the account;
  • generic negative keyword lists;
  • the ability to store custom lists of negative keywords in the extension for further use in your account;
  • English and Russian interface.

Key combinations

  • LeftMouseClick to add a word, press again - to delete
  • LeftALT + LeftMouseClick - to collect phrases
  • LeftALT + S - for words searching

В версии 2.0

  • 2 режима выдачи ключевых слов:
  • быстрая выдача - аналогична выдаче Google Planner, но найденные результаты включают каждое слово из введенной в поиск фразы;
  • полная выдача - расширенная выдача, которая включает поиск по дополнительным релевантным фразам, но найденные результаты также включают каждое слово из введенной в поиск фразы.
  • Обновленный файл выгрузки ключевых слов Excel:
  • выгрузка локаций в удобном формате для загрузки в Editor;
  • обновленный шаблон для создания объявлений.
  • Полный список локаций.
  • Группировка отчетов по проектам.
  • Устранена ошибка с задержкой в 30 секунд.
  • Новые фильтры для получения релевантной выдачи.
  • Копирование минус-слов.

In version 2.0:

  • 2 modes of keywords search result:
  • quick search result - is similar to one of Google Planner , but the results found include every word of the phrase entered in the search;
  • full search result - extended search result that includes search on additional relevant phrases, but the results found also include every word of the phrase entered in the search.
  • Updated Exces Keyword Upload File:
  • uploading of locations in a convenient format for uploading to Editor;
  • updated template for creating ads.
  • Full list of locations.
  • Grouping of reports on the projects.
  • Fixed an error with a delay of 30 seconds.
  • New filters for getting relevant search results.
  • Copying of negative keywords.

Несколько шагов до работы в Penguin

Заполните форму

Прикрепите резюме:
1Кликов 259, показов 3 515. Чему равно CTR?
2Заходов на сайт 874, конверсий 16. Чему равен коэффициент конверсии?
3Что такое СРА?
4CTR 4,03%, кликов 240. Чему равно число показов объявления?
5Затрат 20 158, конверсий 63. Чему равна стоимость конверсии?

Несколько шагов до работы в Penguin

Заполните форму

Прикрепите резюме: