Плагин Open Graph Images With Caption

Плагин предназначен для создания изображений с надписями и указывания их в тегах Open Graph. Генерируются две картинки с разными разрешениями, чтобы хорошо выглядеть в любой социальной сети, которая поддерживает OG теги.

Создание изображения с надписью прямо в редакторе WordPress
Создание изображения с надписью прямо в редакторе WordPress

При размещении ссылки в социальных сетях подгружается картинка с надписью. Это лучше, чем просто изображение:

Вконтакте
Вконтакте
Twitter
Twitter
Facebook
Facebook

Плагин можно скачать из официального каталога плагинов WordPress: https://wordpress.org/plugins/open-graph-images-with-caption/.

 

Comments 21

  1. Valya says:

    Очень круто!
    Спасибо автору за него. Единственное не хватает настроек, хотелось сделать превью как у медузы, где указана категория и название издания. Но и на этом спасибо. Удачи в дальнейших разработках!

    Ответить

  2. Valya says:

    Буду очень ждать ближайшего обновления! Удачи Вам!

    Ответить

  3. Сергей says:

    Дмитрий, спасибо за чудесный плагин!
    Сразу три вопроса:
    1. Где можно изменить толщину и размер шрифта? (В каких файлах)
    2. Какое изображение должно быть задано в настройках? У меня стандартное 1200 на 600, но при публикации в вк съезжает немного вниз.
    3. Вы планируете дальнейшее продвижение плагина? Сделать например категорию, название издания и тд.

    Ответить

    • 1. В generation.php есть такая строчка:
      $new_featured_img = ogi_paint_text( $new_featured_img, $ogi_post_caption, 30, $text_color, $ogi_height / 10, $ogi_height / 10, $ogi_height / 10, $ogi_height / 10, $box_color, $shadow_color, get_option( 'ogi_def_style', '1' ) );
      Можете заменить 30 на произвольное значение. Толщину букв никак не изменить, только если заменить сам файл шрифта или указать на другой.
      2. Оптимальные размеры: 1200×630 для Open Graph, 1024×512 для Twitter. То, что нижняя часть картинки «съедается» в ВК, увы, норма для этой социальной сети.
      3. Конечно. Будет свободное время — сделаю. И регулировку параметров шрифта добавлю.

      Ответить

      • Сергей says:

        Спасибо, смог подправить.
        На счет ВК, а если поднять текст больше вверх? Где это можно сделать?

        Ответить

      • Можно в целом изменить отступ, но это повлияет на все соцсети.
        Посмотрите параметры функции ogi_paint_text(). Пятый из них определяет переменную $ogi_top_padding, которая и отвечает за отступ сверху. Сейчас верхний отступ — одна десятая от высоты всего изображения. Можете сделать, например, вдвое меньше:
        $new_featured_img = ogi_paint_text( $new_featured_img, $ogi_post_caption, 30, $text_color, $ogi_height / 20, $ogi_height / 10, $ogi_height / 10, $ogi_height / 10, $box_color, $shadow_color, get_option( 'ogi_def_style', '1' ) );
        Абсолютные значения лучше не ставить, т.к. размеры генерируемых Open Graph изображений меняются, поэтому в версии для Twitter надпись может уйти куда-нибудь не туда.

        Ответить

      • Валерий says:

        Удачно зашел, а вы тут учите, как настраивать плагин) Лично мне вообще тви и фб не интересует, основной акцент делаю на ВК. Как сказано выше, было бы идеально прикрутить название и категорию. Но плагин вообще вышка, давно что-то подобное искал)

        Ответить

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

        Ответить

      • Валерий says:

        Дмитрий, на личном опыте убедился, что вывод хештегов именно в вк и фб — пустой текст, они в там тупо не работают для привлечения аудитории, знаю это от хороших сммщиков)

        Единственное, я не пойму, где нужно править текст, чтобы он выводился например сбоку, а не посередине на всю ширину)

        p.s. а идеи по доработке — оч крутая, лично буду ждать!)

        Ответить

      • Пока текст выводится только по центру, увы.

        Ответить

      • Валерий says:

        Удачи тогда в дальнейшем развитии плагина, буду частенько заглядывать на ваш сайт ;) С праздниками)

        Ответить

      • Олег says:

        Что бы сделать как у медузы или tj:
        1. Заходим в плагины open-graph-images-with-caption >> inc >> generation.php ;
        2. Находим строчку ;

        imagettftext( $canvas_img, $ogi_font_size, 0, $ogi_text_title_x[ $i ], $ogi_text_title_y[ $i ] + $offset, $text_color, $font, rtrim( $row[ $i ] ) );

        3. $ogi_text_title_x[ $i ] — это у нас отступ слева, то есть если заменить на 50 то выравнивание текста по центру пропадает и становиться выравнивание по левому краю ;
        4. $offset — это отступ сверху, тут все просто ;
        5. $ogi_font_size — это размер шрифта ;

        Для того что бы установить свой шрифт:
        1. Заходим в плагины open-graph-images-with-caption >> inc >> generation.php ;
        2. Находим строчку ;

        $font = plugin_dir_path( __DIR__ ) . ‘fonts/OpenSans-Regular.ttf’;
        3. OpenSans-Regular.ttf — заменяем на имя файла вашего шрифта
        ps шрифты лежат в open-graph-images-with-caption >> fonts

        Ответить

      • wow says:

        круто, а можешь подсказать, как добавить лого по умолчанию в верхний угол

        Ответить

  4. WindBlow says:

    Здравствуйте!
    Скажите, а Вы продолжили в итоге улучшать плагин с учетом пожеланий? Или на маркете плагинов появился более достойный внимания вариант?
    Заранее благодарю за ответ!

    Ответить

    • WindBlow, ни то, ни другое. Времени нет дорабатывать. Судя по статистике скачиваний и количеству отзывов, генерация изображений для Open Graph не востребована. Людям проще свою картинку цеплять.

      Ответить

      • WindBlow says:

        Жаль.. жаль… Я так и не смог найти достойного аналога генератора изображений как на том же dtf или pikabu…

        Ответить

  5. Valentin says:

    Очень жаль, что не стали дорабатывать. Естественно, его никто не будет скачивать, если элементарно не обновлять плагин и никак не заявлять о себе.

    По моему мнению, это единственный плагин, который хоть как-то выполнял требуемый функционал. Аналогов пока не видел и можно было стать в этом деле первым)

    Ответить

    • Valentin, что значит «можно было»? Плагин есть и он работает. Весь фидбэк заключается в добавлении большего функционала. Увы, из-за загруженности нет времени всё это сделать. Но так бывает у разработчиков бесплатных продуктов — когда свободного времени мало, в приоритете иногда другие занятия.

      Естественно, его никто не будет скачивать, если элементарно не обновлять плагин и никак не заявлять о себе.

      Тут интересный момент. Судя по тому, сколько людей мне пишет на почту и в аккаунты соцсетей, устанавливают плагин регулярно. За год сайтов набралось порядка сотни, если не больше. Но почему-то в каталоге WP скачивания не видны. Возможно, это из-за того, что не заявлена совместимость с новейшими версиями WP, хотя в требованиях к плагинам ничего такого нет. Просто поднимать версию без доработок функций не хочется, потому что плагин довольно узкоспециализированный и всем подряд его ставить не стоит — возможны конфликты с другими плагинами, добавляющими Open Graph разметку. Те, кому он нужен, его находят и так.

      Ответить

  6. Дмитрий says:

    Дмитрий, здравствуйте! Спасибо за прекрасный плагин!

    1. Можете подсказать, как мне применить отступ в заголовку, чтобы он был не впритык к изображению? Применяю выравнивание текста по левой стороне.

    2. Как мне поставить свой логотип и рубрику на изображение в превью? Как это сделано например у DTF или VC.
    Спасибо!

    Ответить

    • Здравствуйте. Про п. 1 не понял — в моём плагине нет выравнивания по краю.
      П. 2 тоже не осуществим пока что. Я намеренно не стал заморачиваться со значками и рубриками, потому что на сайтах в роли таксономии может быть что угодно — рубрики с подрубриками, метки, таксономии из шаблонов. С источниками логотипов то же самое. Написание обработчиков для всего этого выходит за рамки идеи простого плагина с минимумом кнопок.

      Ответить

Добавить комментарий для Дмитрий Глашков Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

I agree to the Terms & Conditions and Privacy Policy.

Welcome Back!

Login to your account below

Retrieve your password

Please enter your username or email address to reset your password.