Школа
Веб-разработка

Как в бюро создают картинки для превью советов?

Игорь Петров
3 июня 2021
👁 6852   🗩2
Веб-разработка

Как в бюро создают картинки для превью советов?

Игорь Петров
3 июня 2021
👁 6852   🗩2
Игорь Петров
Разработчик, преподаватель Школы бюро
Полезно
 11
11
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

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

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

Расскажу, как автоматизировать создание картинок для превью на примере советов бюро. Наш подход по техническим причинам подойдёт не всем, но в конце я покажу очень простой альтернативный вариант.

Уникальные превью советов бюро

Если нам присылают вопрос с картинкой, мы подставляем её в превью. В остальных случаях мы сами создаём картинку с рубрикой, текстом вопроса, фотографией советчика и его регалиями:

Чтобы не рисовать картинки вручную, мы придумали и сверстали шаблон на ХТМЛ и ЦСС, а потом научили сайт заполнять его данными совета, делать скриншот вёрстки и подставлять его в Опенграф совета.

Чтобы скриншотить вёрстку, мы используем безголовый Хром. Это такой браузер без интерфейса, который запускается на сервере. Подробнее о безголовом Хроме рассказал в совете Василий Половнёв.

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

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

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

Альтернатива — сервисы генерации превью

Скриншотить вёрстку — технически сложный способ и подойдёт не для всех проектов. Тут понадобится не только опытный разработчик, но и особым образом настроенный сервер.

Если вам не подходит такой способ, а уникальные картинки всё же хочется — обратите внимание на сервисы по созданию картинок для превью. Они не требуют сложной разработки или настройки сервера, подключить их к сайту можно парой строк кода.

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

Приглашаю уважаемых советчиков поделиться в комментариях своими способами создания картинок для первью. Особенно интересно почитать о способах сделать это малой кровью и без платных сервисов :‑)

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
 11
11
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

На всякий случай напомню всем читателям, что скриншотить текст нужно в разрешении, пригодном для HiDPI‑мониторов, иначе будет мыльно; и скриншот текста может только дополнять текст, но не заменять его, потому что accessibility.

Евгений Арутюнов

Мой способ создания картинок для превью — сделать айфоном смазанную фотку экрана. Это быстро, решает задачу «создать уникальное пятно», не спойлерит содержимое страницы. И это красиво.

Посмотреть можно, например, здесь: https://www.facebook.com/intuition.design.team

Но это мой приём, он уже занят, больше никому так нельзя!

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

Рекомендуем другие советы