Glashkoff.com

Полезные советы и софт, создание и оптимизация сайтов на WordPress

Плагин Open Graph Images With Caption

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

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

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

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

Вконтакте

Вконтакте

Twitter

Twitter

Facebook

Facebook

Плагин можно скачать из официального каталога плагинов WordPress (тут будет ссылка).

 

13 комментариев

  1. Valya

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

    Ответить

    • Дмитрий Глашков

      Спасибо за отзыв. Я сделаю лучше, чем у Медузы, просто для этого потребуется время.

      Ответить

  2. Valya

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

    Ответить

  3. Сергей

    Дмитрий, спасибо за чудесный плагин!
    Сразу три вопроса:
    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. Конечно. Будет свободное время — сделаю. И регулировку параметров шрифта добавлю.

      Ответить

      • Сергей

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

        Ответить

      • Дмитрий Глашков

        Можно в целом изменить отступ, но это повлияет на все соцсети.
        Посмотрите параметры функции 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 надпись может уйти куда-нибудь не туда.

        Ответить

      • Валерий

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

        Ответить

      • Дмитрий Глашков

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

        Ответить

      • Валерий

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

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

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

        Ответить

      • Дмитрий Глашков

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

        Ответить

      • Валерий

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

        Ответить

      • Олег

        Что бы сделать как у медузы или 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

        Ответить

Написать комментарий

Правила:
  • 1. Уважайте стороннее мнение. Токсичные комментарии удаляются.
  • 2. Комментарии со ссылками видны после проверки модератором.
  • 3. Обсуждение нелицензионного софта и других незаконных тем запрещено.

Тема Rowling от Anders Norén. Копирование материалов сайта разрешается только с указанием автора и активной ссылкой на источник.