[ogImage] — генерация превью с текстом


Нужно красивое превью страницы в соцсетях?

Компонент позволяет создать превью путем наложения текстового заголовка на изображение. Доступно позиционирование текста, изменение его размера и цвета, изменение яркости и размера фонового изображения.
В комплекте один сниппет, который генерирует изображения и сохраняет их в отдельную папку.
Пример использования:
<head>
...
<meta property="og:image" content="[[ogimage?
&textPosition=`middle`
&textAlign=`center`
&fontColor=`#fafafa`
&brightness=`-100` 
&override=`1`
&width=`600`
&imageSrc=`[[*preview]]`
&caption=`ogImage - генерация превью с текстом`]]"/>
...
</head>
Так же дополнение можно использовать для вывода превью статей на сайте.

Дополнение доступно в modstore: ogImage
DocentBF
DocentBF
19 июня 2018, 17:53
modx.pro
11
4 054
+10

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

Дмитрий
Дмитрий
19 июня 2018, 22:40
+1
О, крутая штука. Спасибо!
    Miša Bulic
    Miša Bulic
    20 июня 2018, 09:28
    0
    Интересное дополнение. Было бы ещё здорово, что если на странице есть заполненное поле с изображением ресурса, то его подсовывать в фон.
      DocentBF
      DocentBF
      20 июня 2018, 09:39
      0
      Никто не запрещает подставить TV в параметр imageSrc =)
      Чуть подправил пример.
      Владимир
      Владимир
      20 июня 2018, 11:28
      +2
      Илья Уткин давно предлагал такое, странно что не стал распространять в виде допрлнения
      ilyaut.ru/tips-and-tricks/generated-image-to-article-from-title/
        Илья Уткин
        Илья Уткин
        20 июня 2018, 12:23
        +4
        Руки не дошли. Рад, что кто-то меня опередил, возможно, и сам буду пользоваться.
          DocentBF
          DocentBF
          20 июня 2018, 13:32
          0
          Как ни странно, на статью наткнулся после того, как собрал компонент.
          Николай Савин
          Николай Савин
          21 июня 2018, 10:25
          +1
          Блин, придется вычеркнуть изготовление этого компонента из планов. Молодец.
            des1gner
            des1gner
            04 октября 2019, 16:33
            0
            Добрый день!
            При установе консоль указывает на ошибку:
            Installing files from /core/packages/ogimage-1.0.3-pl/xPDOFileVehicle/7b0e2f9c874ca4e0a29ea120e30b7177/ to /core/components/ogimageencrypt/encryptedvehicle.class.php
            Could not generate encryption key
            Package can not be decrypted!
            Успешно установлен пакет ogimage-1.0.3-pl

            А в журнале ошибок:
            (ERROR @ /core/model/modx/modparser.class.php: 541) Could not find snippet with name ogimage.
            И дополнение никак не хочет работать, MODX Revolution 2.7.1-pl
              DocentBF
              DocentBF
              06 октября 2019, 22:53
              0
              Доброго времени суток.
              Недавно оно было платным, я забыл убрать шифрование пакета. Скоро исправлю)
                DocentBF
                DocentBF
                10 октября 2019, 20:43
                0
                Исправил.
              Дмитрий
              Дмитрий
              29 декабря 2019, 08:06
              0
              Круть!!!
              Но есть вопрос.
              Как сделать чтобы изображения были не 1.jpg и подобные, а например подставить название из tv/алиаса/и т.д.?

              В сниппете можно динамическую генерацию url сделать.
              Я скопировал сниппет, сделал url в своем сниппете какой мне нужно, но где генерируется название изображения из id и исходного расширения, я не представляю. Да и лезть и что-то менять в самих файлах компонента это неправильно…
                Дмитрий
                Дмитрий
                29 декабря 2019, 23:58
                0
                Сделал генерацию изображений такого вида: mymameimage-1.jpg не хакая родной класс.

                Создал свой собственный класс, который унаследовал исходный класс ogImage и заменил его метод generatePreview.

                Вот статья Василия, может кому пригодится. Сам только сегодня ее обнаружил.
                  Борис И
                  Борис И
                  12 февраля 2020, 08:45
                  0
                  Здравствуйте. Поделитесь кодом пожалуйста, как сделали?
                Борис И
                Борис И
                12 февраля 2020, 08:47
                0
                Здравствуйте. Почему снипет складывает картинки в папку по умолчанию, хотя указана другая. Где я накосячил.
                [[!ogimage?
        &resId=`[[+id]]`
        &textPosition=`bottom`
        &textAlign=`left`
        &fontColor=`#fafafa`
        &brightness=`-100` 
        &override=`1`
        &width=`600`
        &fontSize=`30`
        &imageSrc=`/assets/images/img/ogimage_background1.jpg` 
        previewsUrl=`/assets/images/ogimage/categor/` 
        &imageSrc=`[[rezimgcrop? &input=`[[+firstImage?]]` &options=`r-0x365`]]`
        &caption=`[[+longtitle]]`]]
                  Борис И
                  Борис И
                  12 февраля 2020, 12:57
                  0
                  Нашел свой косяк) previewsUrl= забыл &previewsUrl=
                  Evgeny
                  Evgeny
                  24 января 2021, 02:38
                  0
                  подскажите пожалуйста — как ограничить поле для текста? прям не хватает параметра для настраиваемого отступа по всем осям в отдельности)
                    DocentBF
                    DocentBF
                    24 января 2021, 11:37
                    0
                    В текущей реализации — увы, никак.
                    weranda
                    weranda
                    04 ноября 2023, 11:12
                    0
                    Привет.
                    Классное расширение.
                    Если знаете как сделать текст многострочным так, чтобы он занимал 50% от области картинки, поделитесь решением!
                      DocentBF
                      DocentBF
                      04 ноября 2023, 13:07
                      0
                      Привет. Для начала нужно знать размеры области. Написать сниппет, который будет вычислять нужный fontSize относительно размеров области и построчно разбивать текст
                      Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
                      19