Красивые картинки с заголовком для соцсетей

Хочется научиться делать что-то вроде того как это сделано в ЖЖ, когда картинка для поля «og:image» генерируется на сервере: берется главная картинка ресурса, к ней добавляются какие-то элементы (нашлёпывается png'шка) и поверх него указанным шрифтом (ссылка на гугол-шрифты) фигачится заголовок (longtitle).



Может кто видел готовые решения или по каким словам гуглить?
Спасибо!
Серый
Серый
17 октября 2017, 17:10
modx.pro
2 271

Комментарии: 12

Stan Ezersky
Stan Ezersky
17 октября 2017, 22:07
Всё с помощью CSS делается
    Серый
    Серый
    17 октября 2017, 22:28
    Нет-нет, всё же это всё делается с помощью html!
    <meta property="og:image" content="https://l-files.livejournal.net/og_image/1586390/4654?v=1502847734" />
    Взято отсюда
    :-)
      Stan Ezersky
      Stan Ezersky
      17 октября 2017, 22:31
      Ну так кто-то делает подобные картинки в графическом редакторе или изображение генерируется на сервере.
        Серый
        Серый
        17 октября 2017, 22:37
        Это именно «генерируется на сервере» и я хочу научиться делать так же в ModX и поэтому создал эту тему в надежде что кто-то что-то где-то слышал, кто-то что-то знает и не сочтет за труд поделиться со мной, а то то, что нагуглил, мягко говоря, сыровато, а допилить у меня толку пока еще нетути))
          Николай Савин
          Николай Савин
          17 октября 2017, 23:35
          Ну можно начать с того, чтобы писать MODX правильно. Не ModX не MODx, а именно MODX.
          А по теме, ты наверное вот это спрашиваешь
          <html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

<meta property="og:title" content="НАЗВАНИЕ СТАТЬИ" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://ССЫЛКА НА СТАТЬЮ/" />
<meta property="og:image" content="ССЫЛКА НА КАРТИНКУ‑ОБЛОЖКУ СТАТЬИ" />
<link rel="image_src" href="http://САЙТ/КАРТИНКА.jpg" />
<meta property="og:description" content="ОПИСАНИЕ СТАТЬИ, ПОЯВЛЯЕТСЯ ПОД НАЗВАНИЕМ В КАРТОЧКЕ" />
<meta property="og:site_name" content="НАЗВАНИЕ ПРОЕКТА (САЙТА)" />
            Серый
            Серый
            17 октября 2017, 23:43
            Напомнило, как на одном форуме драмнбэйса за слово «драмик» банили навсегда)))
            og: разметку я знаю и относительно успешно использую, мне надо именно генерацию на сервере главной картинки для поля «og:image» когда берется главная картинка ресурса, к ней добавляются какие-то элементы (нашлёпывается png'шка) и поверх него указанным шрифтом (ссылка на гугол) фигачится заголовок.
            Пожалуй скорректирую свой пост, а то все знают как писать MODX, а как откуда берутся картинки для соцсетей не в курсе)))
              Владимир
              Владимир
              18 октября 2017, 00:05
              «Генерируем картинку для статьи из её заголовка»
              ilyaut.ru/tips-and-tricks/generated-image-to-article-from-title/
                Николай Савин
                Николай Савин
                18 октября 2017, 00:10
                Да, вон ниже ссылку привели. PHP все это умеет.
                Можно даже компонент собрать на эту задачку, если кому то еще надо.
                  Владимир
                  Владимир
                  18 октября 2017, 00:20
                  и был бы востребованный компонент, кстати
                  настраиваемый и\или рандомный фон для создаваемого изображения, прочие настройки — не так важна заглавная иллюстрация на сайте как для расшаривания в соц сети
                    Николай Савин
                    Николай Савин
                    18 октября 2017, 00:23
                    Ну посмотрим на реакцию сообщества. Соберу если голосовать будут, по мере настроения и свободного времени.
                      Серый
                      Серый
                      19 октября 2017, 22:28
                      Вы настоящий Прометей. Только особо собирать ничо не надо. Там у товарища Ильи Уткина уже всё собрано, нужно внести ряд корректив:
                      1) Запилить возможность в вызове снипета указывать поле у ресурса, картинку из которого надо брать (может у меня там ТВ с Image+)
                      2) Там где у него рисуется полупрозрачный прямоугольник — надо либо через плейсхолдер, либо внутри снипета указать путь к файлу png, который наляпывается поверх нашей пикчи.
                      3) Разобраться с размерами картинки. Например, я задаю 1200х600, и у меня соответствующего размера png-маска, которая лепится поверх, тогда он у на сберет картинку публикации, например 1300х800, уменьшает её по наиболее близкой к соответствующему значению стороне (1300 ближе к 1200 чем 800 к 600), центрует и срезает лишка. Если я загружаю 800х800, то интерполирует до 1200х1200, центрует, отрезает вертикаль. Что б не тратить время на подгонку фоток
                      4) Оформить это всё в сниппет, который можно вызывать. (Какие-то примеры написать для таких нубов как я)
                      Обязуюсь накатать про это подробную статью на сий сайт, о том как я всё это делал у себя на сайтике.
      Сергей Кепкин
      Сергей Кепкин
      20 октября 2017, 11:27
      По картинке с Ыном хреновые ссылки с гугла формируются… Запахло РКН… Котиков чо не прилепили?)))
        Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
        12