[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

19 июня 2018, 17:53

3 699

+10

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

Дмитрий

19 июня 2018, 22:40

О, крутая штука. Спасибо!

Misha Bulic

20 июня 2018, 09:28

Интересное дополнение. Было бы ещё здорово, что если на странице есть заполненное поле с изображением ресурса, то его подсовывать в фон.

DocentBF

20 июня 2018, 09:39

Никто не запрещает подставить TV в параметр imageSrc =)
Чуть подправил пример.

Владимир

20 июня 2018, 11:28

Илья Уткин давно предлагал такое, странно что не стал распространять в виде допрлнения
ilyaut.ru/tips-and-tricks/generated-image-to-article-from-title/

Илья Уткин

20 июня 2018, 12:23

Руки не дошли. Рад, что кто-то меня опередил, возможно, и сам буду пользоваться.

DocentBF

20 июня 2018, 13:32

Как ни странно, на статью наткнулся после того, как собрал компонент.

Николай Савин

21 июня 2018, 10:25

Блин, придется вычеркнуть изготовление этого компонента из планов. Молодец.

des1gner

04 октября 2019, 16:33

Добрый день!
При установе консоль указывает на ошибку:
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

06 октября 2019, 22:53

Доброго времени суток.
Недавно оно было платным, я забыл убрать шифрование пакета. Скоро исправлю)

DocentBF

10 октября 2019, 20:43

Исправил.

Дмитрий

29 декабря 2019, 08:06

Круть!!!
Но есть вопрос.
Как сделать чтобы изображения были не 1.jpg и подобные, а например подставить название из tv/алиаса/и т.д.?

В сниппете можно динамическую генерацию url сделать.
Я скопировал сниппет, сделал url в своем сниппете какой мне нужно, но где генерируется название изображения из id и исходного расширения, я не представляю. Да и лезть и что-то менять в самих файлах компонента это неправильно…

Дмитрий

29 декабря 2019, 23:58

Сделал генерацию изображений такого вида: mymameimage-1.jpg не хакая родной класс.

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

Вот статья Василия, может кому пригодится. Сам только сегодня ее обнаружил.

Борис И

12 февраля 2020, 08:45

Здравствуйте. Поделитесь кодом пожалуйста, как сделали?

Борис И

12 февраля 2020, 08:47

Здравствуйте. Почему снипет складывает картинки в папку по умолчанию, хотя указана другая. Где я накосячил.

[[!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

Нашел свой косяк) previewsUrl= забыл &previewsUrl=

Evgeny

24 января 2021, 02:38

подскажите пожалуйста — как ограничить поле для текста? прям не хватает параметра для настраиваемого отступа по всем осям в отдельности)

DocentBF

24 января 2021, 11:37

В текущей реализации — увы, никак.

weranda

04 ноября 2023, 11:12

Привет.
Классное расширение.
Если знаете как сделать текст многострочным так, чтобы он занимал 50% от области картинки, поделитесь решением!

DocentBF

04 ноября 2023, 13:07

Привет. Для начала нужно знать размеры области. Написать сниппет, который будет вычислять нужный fontSize относительно размеров области и построчно разбивать текст

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.