Вот тут человек просил инструкцию на русском языке.
Суть вопроса в том, как преобразовать текстовый контент в картинку, что бы при шэринге в соцсети картинка для поста содержала в себе текст объявления.
Самого заинтересовал этот вопрос, сначала подумал про canvas, потом понял, что для этой задачи можно по-проще вариант, поэтому немного разобрался в том как работают функции
imagefilledrectangle
imagettftext
imagecopymerge
и так далее.
Итак, генерация изображения с содержимым объявления.
0. Создаём папку /cards в директории images/board/
1. В components/board/fronted.php
перед
+
Максимально подробно прокомментировал для тех, кто будет подгонять всё это дело под себя.
2. В файле components/board/model.php
добавим строку которая будет удалять карточку при удалении объявления
после
+
3.В настройках кнопки "поделиться" указываем путь до картинки как '/images/board/cards/ТУТ-НОМЕР-ОБЪЯВЛЕНИЯ.jpg
Например, если речь идет о кнопке "поделиться" от Яндекса, которая вставлена в шаблон компонента объявления com_board_items.tpl
на картинку здесь указывает вот это: data-image="{$item.card}"
Карточка сгенерированная при тех параметрах которые я указал в коде выше, выглядит вот так
Суть вопроса в том, как преобразовать текстовый контент в картинку, что бы при шэринге в соцсети картинка для поста содержала в себе текст объявления.
Самого заинтересовал этот вопрос, сначала подумал про canvas, потом понял, что для этой задачи можно по-проще вариант, поэтому немного разобрался в том как работают функции
imagefilledrectangle
imagettftext
imagecopymerge
и так далее.
Итак, генерация изображения с содержимым объявления.
0. Создаём папку /cards в директории images/board/
1. В components/board/fronted.php
перед
cmsPage::initTemplate('components', 'com_board_item')->
//генерируем карточку imagefilledrectangle($im, 0, 0, 499, 299, $border); //рисуем основную подложку с цветом рамки, координаты слева верх, слева низ, справа верх, справа низ imagefilledrectangle($im, 20, 20, 479, 279, $bg); //основное поле с отступами от краев, благодаря которым будет эффект рамки, координаты слева верх, слева низ, справа верх, справа низ $cardtext = wordwrap($cardtext, 80); //максимальная длина строки 80 символов после чего строка переносится, слова не разбиваются $cardtext .= '...'; //добавляем в конец текста многоточие $font = 'components/board/arial.ttf'; //указываем путь к шрифту, не забываем положить сам файл шрифта в указанное место $cardtext = str_replace('<br />', '', $cardtext); //вырезаем тег переноса из текста, иначе он будет печататься на картинку imagettftext($im, 13, 0, 30, 40, $black, $font, $cardtext); //рисуем из текста картинку: файл, размер шрифта, угол в градусах, координаты начала текста по x оси, по y оси, вет текста, файл шрифта, текст //наносим водяной знак, если он не нужен три следующие строки можно удалить. $stamp = imagecreatefromjpeg('images/watermark.jpg'); // Здесь указан путь к файлу водяного знакоа в формате jpg imagecopymerge($im, $stamp, 270, 250, 0, 0, 199, 28, 60); //наносим водяной знак: исходный файл, файл водяного знака, отступ слева, отступ сверху, 0,0 - отсутствие смещений в координатах на самом файле водяного знака, ширина файла ВЗ, высота ВЗ, прозрачность ВЗ imagejpeg($im, 'images/board/cards/'.$item['id'].'.jpg'); //готовую карточку в папку images/board/cards. Каждое изображение имеет номер который совпадает с номером объявления. } $item['card'] = '/images/board/cards/'.$item['id'].'.jpg';
2. В файле components/board/model.php
добавим строку которая будет удалять карточку при удалении объявления
после
//удаляем карточку объявления
3.В настройках кнопки "поделиться" указываем путь до картинки как '/images/board/cards/ТУТ-НОМЕР-ОБЪЯВЛЕНИЯ.jpg
Например, если речь идет о кнопке "поделиться" от Яндекса, которая вставлена в шаблон компонента объявления com_board_items.tpl
<script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script> <script src="//yastatic.net/share2/share.js"></script> <div class="ya-share2" data-services="collections,vkontakte,facebook,odnoklassniki,moimir" data-image="{$item.card}"></div>
Карточка сгенерированная при тех параметрах которые я указал в коде выше, выглядит вот так
Реклама #
Олег Васильевич я 7 лет назад #
Helg 7 лет назад #
Loadырь 7 лет назад #
Нил™ 7 лет назад #
Димитриус 7 лет назад #
Нил™ 7 лет назад #
Нил™ 7 лет назад #
Димитриус 7 лет назад #
Header("Content-type: image/jpeg");
2. Вывести картинку imagejpeg без 2 параметра
3. через реварайт генерить ссылку с jpg на конце