Найти картинку для сниппета

Хочу сделать для своего сайта вменяемые социальные сниппеты. В первую очередь интересуют сниппеты для статей Хаба. В них нельзя указать key=value, да и это было бы плохое решение - нехорошо напрягать редакторов.

Предположим, мне подойдёт первая же картинка, которая встречается в тексте тела статьи. Как её можно найти? Нужен её URL, чтобы вставить его в <meta property="og:image" content="{$wa->globals('main_image')}" />

Пока что у меня на уме единственное решение, что-то типа:

{$str = '<p><strong><img src="http:// 1belok.ru/ wa-data/ public/ hub/ img/ Митохондрииjpg"></strong></p>'}
{$pos1 = strpos($str, "<strong>") + strlen("<strong>")}
{$pos2 = strpos($str, "</strong>")}
{$len = $pos2 - $pos1}
{$t = $str|substr:$pos1:$len}
{wa_dump($t)}

  1. найти позицию первого <img src=" в $content
  2. взять субстринг с этой позиции+10 до конца
  3. в субстринге найти первое вхождение "
  4. взять субстринг от начала до ", в идеале получится как раз ссылка
  5. как-то валидировать получившуюся "ссылку": чтобы там не было ' и т.п. символов
  6. бояться что не всё валидировал и когда-нибудь пользователи взорвут мой сайт
  7. бояться низкой производительности данного решения

Пожалуйста подскажите, как бы вы взяли первую картинку, встречающуюся в контенте Статьи?

PS: а, ну или вот такой вариант ещё:

{if preg_match("/(https?:\/\/[^'`\"]*?\.(?:png|jpe?g|gif))/i", $topic.content, $dtemp)}
{$wa->globals("main_image", $dtemp[0])}
{/if}

7 ответов

  • 1
    Алексей 22 июня 2015 08:08 #

    А если через jquery?

    var src;
    src = $('.topic-content img').attr('src');
    $("head").append('<meta property="og:image" content='+src+' />');

    Дополнительно сделать проверку на наличие картинки, размером не менее/более пикселей и т.д.

    • +1
      Stefantsov Dima Stefantsov Dima 22 июня 2015 09:11 #

      Мы же это для роботов делаем. Вообще не уверен, что они станут исполнять JS чтобы взять из DOM потом заданные теги.
      Например робот вконтакте не понимает русские буквы в имени картинки. Он глупый.

      • +2
        Алексей Алексей 22 июня 2015 12:56 #

        Некрасивое решение через шаблоны. В основной index.html в head к остальным meta-тегам прописать:
        {if isset($article_img)}<meta property="og:image" content="{$article_img|escape}"/>{/if}

        В topic.page.html следующий:
        <!--{preg_match('/<img [^>]*src=["|\']([^"|\']+)/i', $topic.content, $img)} -->
        {assign "article_img" $img[1] scope="root"}

  • 1
    Stefantsov Dima 24 июня 2015 19:18 #

    В данный момент реализовал это так:

    {if preg_match("/(https?:\/\/[^'`\"]*?\.(?:png|jpe?g|gif))/i", $topic.content, $dtemp)}
    {$wa->meta("_image", $dtemp[0])}
    {else if !empty($topic.author)}
    {if !empty($topic.author.photo)}
    {$wa->meta("_image", "{$wa->domainUrl()}{$wa->contact($topic.author.id)->getPhoto("original")}")}
    {else}
    {$wa->meta("_image", "http:{$topic.author.photo_url_96}")}
    {/if}
    {/if}

    {if !empty({$wa->meta('_image')|escape})}
    <meta property="og:image" content="{$wa->meta('_image')|escape}" />
    {/if}

    • +1
      VS VS 17 октября 2016 17:09 #

      Добрый вечер.

      Посоветуйте как сделать тоже самое для приложения Фото, Сайт, Блог.

      Просто и банально любое первое кроме этого изображения - RSS которое выводит сейчас везде.

      Спасибо за любую помощь!

      • +1
        Nichikov Eugen Nichikov Eugen 17 октября 2016 21:47 #

        Для Сайта можно указать вручную в настройках параметров страницы (снимите галочку "Для соцсетей использовать эти же заголовки и описания").

        Для блога я на днях плагин писал. Напишите, скину как доделаю.

        А с фото всё печально :( Поднял из архивов ещё один старый плагин, но без дополнительного хука в бекенде никак для альбомов мета-параметры задать не получится.

Эта тема в архиве. Добавление комментариев к ней отключено.