В процессе доработки интерфейсов рекламодателя один из наших клиентов поставил необычную задачу: создание трех разных типов объявлений в рамках одной формы (в системе для каждого типа объявления использовался свой собственный набор форм).
Данная доработка коснулась типов Native, Text&Logo vertical, Text&Logo horizontal, поскольку у этих типов одинаковый набор полей, отличие лишь в размере используемого изображения. Поэтому их и решили свести в единый конструктор объявлений.
Во-первых, это позволило рекламодателю ускорить процесс создания объявлений за счет уменьшения количества пошаговых действий, которые необходимо было выполнить.
Во-вторых, применение инструмента для обрезки изображений позволило использовать практически любые изображения (ограничения были лишь по объему и минимальной ширине/высоте изображения). Теперь не требуется их предварительная подготовка под необходимые размеры, как это было ранее.
Процесс реализации возможности был разделен на два этапа:
1. Добавление нового типа объявлений Native + Text & Logo. Это позволило гибко управлять отображением билдера для определенных рекламодателей. По умолчанию билдер доступен для всех рекламодателей.
2. Добавление непосредственно пользовательского инструментария.
При переходе к созданию нового объявления у рекламодателей в списке типов объявлений появилась новая вкладка Native + Text & Logo, которая расположена самой первой. Форма внешне во многом повторяет аналогичную для Native, за исключением трех отдельных превью для каждого из добавляемых типов объявлений.
Превью примерно повторяют реальное отображение объявлений в канале.
Для обработки изображений используется jQuery плагин Cropper. Размеры рамок в превью выставлены под размеры каждого типа объявлений, доступных в билдере. Изначально рамка занимает всю меньшую сторону изображения.
Рекламодатель может двигать рамку для быстрого выбора нужной части загруженного изображения и сразу наблюдать результат своих действий.
Для более точного изменения размера рамки предусмотрен отдельный ручной режим, открывающийся во всплывающем окне.
Основные требования к загружаемых рекламодателем изображений: размер меньшей стороны не менее 240 px, объем не более 10 Мб, форматы: JPG, JPEG, PNG, GIF.
После того, как пользователь подогнал размеры изображений для каждого объявления, на сервере происходит создание объявлений, окончательная обрезка исходного изображения по переданным координатам и сохранение нарезанных изображений для каждого типа объявления.
Для нарезки на сервере используется хорошо известная библиотека Imagick. Выбор пал на нее, поскольку она существует в виде готового модуля для PHP и умеет работать с анимированными GIF-изображениями.
Если нужны только Native и Text&Logo объявления, вся процедура создания состоит из последовательности простейших действий: ввести требуемые тексты и ссылку для клика, загрузить изображение, в режиме реального времени выставить требуемый вид окончательных изображений и нажать кнопку создания.
Рекламодатели уже успели оценить удобство данной доработки. Теперь не нужно повторять всю последовательность создания объявлений раз за разом.
