Как в бюро создают картинки для превью советов?
Как в бюро создают картинки для превью советов?
В прошлом совете я рассказал, как соцсети и чаты создают превью для ссылок и как управлять этим превью при помощи особых тегов — Опенграфа.
Когда на сайте много типовых страниц, вроде новостей, товаров или записей в блоге, бывает полезно подставлять уникальную картинку в превью каждой страницы. Так превью будут не похожи друг на друга и лучше расскажут о содержимом страницы. Но рисовать каждую картинку вручную долго и неэффективно.
Расскажу, как автоматизировать создание картинок для превью на примере советов бюро. Наш подход по техническим причинам подойдёт не всем, но в конце я покажу очень простой альтернативный вариант.
Уникальные превью советов бюро
Если нам присылают вопрос с картинкой, мы подставляем её в превью. В остальных случаях мы сами создаём картинку с рубрикой, текстом вопроса, фотографией советчика и его регалиями:
Чтобы не рисовать картинки вручную, мы придумали и сверстали шаблон на ХТМЛ и ЦСС, а потом научили сайт заполнять его данными совета, делать скриншот вёрстки и подставлять его в Опенграф совета.
Чтобы скриншотить вёрстку, мы используем безголовый Хром. Это такой браузер без интерфейса, который запускается на сервере. Подробнее о безголовом Хроме рассказал в совете Василий Половнёв.
Сервер заполняет шаблон данными совета, запускает безголовый Хром, делает скриншот, а затем подставляет ссылку на этот скриншот в Опенграф совета. В результате в превью каждого совета появляется уникальная картинка.
Такой способ подойдёт не только для работы с превью, но и для многих других задач по созданию картинок на основе динамических данных.
В бюро мы похожим образом создаём картинки для почтовых рассылок. В мире веб‑разработки исторически сложилось так, что верстать письма гораздо сложнее, чем страницы. Замена сложной вёрстки картинкой сильно упрощает жизнь, без заметных потерь в качестве продукта.
Альтернатива — сервисы генерации превью
Скриншотить вёрстку — технически сложный способ и подойдёт не для всех проектов. Тут понадобится не только опытный разработчик, но и особым образом настроенный сервер.
Если вам не подходит такой способ, а уникальные картинки всё же хочется — обратите внимание на сервисы по созданию картинок для превью. Они не требуют сложной разработки или настройки сервера, подключить их к сайту можно парой строк кода.
Конечно, бесплатные версии сервисов ограничены по функционалу и шаблонам. Но если у вас небольшой проект и нет нужды в сложном дизайне превью, эти сервисы могут оказаться полезны:
Приглашаю уважаемых советчиков поделиться в комментариях своими способами создания картинок для первью. Особенно интересно почитать о способах сделать это малой кровью и без платных сервисов :‑)
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.