Как сделать автоматеическое добовление картинок из топика в og:image

Как можно сделать, автоматическое добавление картинок в
<meta property="og:image" content="" />
как реализовано на хабре. Потому что загружать отдельное привью или устанавливать 1 картинку, как-то совсем не то. На Хабре реализовано что берутся все фотки из топика и пользователь может выбирать.

Ранее я уже писал в посте livestreet.ru/blog/17234.html как у меня реализована разметка, вот осталось только с этим проблема.

Готов заплатить за решение, если договоримся.

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

avatar
Судя по всему всем пофигу на этот параметр(
avatar
верно!)))
avatar
Очень странно, потому что это упрощает работу при клике на «поделится» или если кто-то решит вставить ссылку на статью.
avatar
Вытаскиваете из main preview поиск первого изображения, переваливаете его опционально с нужными размерами и хуком выводите в шапку
avatar
А можно для «нубов» пошаговую инструкцию. Спасибо)
avatar
{if $oTopic and $oTopic->getPreviewImageWebPath()}
    <meta property="og:image" content="{$oTopic->getPreviewImageWebPath(375crop)}"/>
{else}
    <meta property="og:image" content="лого.png" />
{/if}
avatar
Для «нубов»:

Для микроразметки, всё же надо использовать именно ту картинку, что отмечена как обложка статьи т.е. Preview. Её мы и выдергиваем, а если пользователь решит поделиться ссылкой на ваш сайт без указания конкретной статьи (сайт.ру), то будет получен логотип сайта.
avatar
Если нет разметки, картинки должны автоматом подхватываться, если их больше одной на странице — можно выбирать какую вставить. Если разметка присутствует — берется конкретная картинка. Как вытянуть из топика без плагина превьюх — хз, но тоже было бы интересно.
avatar
Один товарищ обещал помочь костыль написать, который будет брать из топика изображение и вставлять его в код, если его нет, то будет ставить лого сайта. Если реализует выложу результат.
avatar
Проходимся по тексту топика регуляркой и таким образом вытаскиваем картинку. Попробуйте.
avatar
Оставлю здесь вариант, который работает у меня:
{if $oTopic}
    <meta property="og:type" content="article"/>
    <meta property="og:articleSection" content="{$oTopic->getBlog()->getTitle()}"/>
    <meta property="og:title" content="{$oTopic->getTitle()|escape:'html'}"/>
    <meta property="og:url" content="{$oTopic->getUrl()}"/>
    <meta property="og:site_name" content="{cfg name='view.name'}"/>
    <meta property="og:description" content="{$sHtmlDescription}"/>

    <meta name="twitter:card" content="summary"/>
    <meta name="twitter:site" content="@NAME" />
    <meta name="twitter:url" content="{$oTopic->getUrl()}">
    <meta name="twitter:title" content="{$oTopic->getTitle()|escape:'html'}">
    <meta name="twitter:description" content="{$sHtmlDescription}">
    {if $oTopic->getPreviewImageWebPath()}
        <meta property="og:image" content="{Config::Get('path.root.web')}{$oTopic->getPreviewImageWebPath(375crop)}"/>
        <meta name="twitter:image" content="{Config::Get('path.root.web')}{$oTopic->getPreviewImageWebPath(375crop)}">
    {/if}
    {* TODO: Добавить разметку для ивентов (event, place) и компаний (organisation, location) *}
{/if}

Говорят что Twitter Cards «понимает» Open Graph, но я решил продублировать.
avatar
При редактировании топика старая картинка закешиируется.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.