Для того, чтобы объединить несколько изображений в фотогалерею, необходимо на место предполагаемой фотогалереи внутри тега <content:encoded> вставить следующий элемент:
<div data-pulse-component="gallery" data-pulse-component-name="gallery_name">
<figure><img src="..."/><figcaption>Пример подписи 1</figcaption></figure>...
<figure><img src="..."/><figcaption>Пример подписи 2</figcaption></figure></div>
data-pulse-component="gallery" – обязательный атрибут, указывающий на то, что вложенные элементы надо отображать в статье как фотогалерею.
data-pulse-component-name="gallery_name" – обязательный атрибут, содержащий имя галереи.
Если в каждом из ваших материалов всего по одной фотогалерее, вы можете проставить для всех <item> одинаковое значение этого атрибута. Но важно, что двух галерей с одним и тем же значением в одном <item> быть не должно. Если вы хотите вставить в статью две галереи, учтите, что вам нужно задать для каждой из них собственное значение "gallery_name".
Пример блока галереи внутри <content:encoded>:
<div data-pulse-component="gallery" data-pulse-component-name="pulse_gallery">
<figure><img src="https://example.com/uploads/2020/03/taxi.jpg"/><figcaption>Пример подписи к первому фото</figcaption></figure>
<figure><img src="https://example.com/uploads/2020/03/taxi1.jpg"/><figcaption>Пример подписи к второму фото </figcaption></figure>
<figure><img src="https://example.com/uploads/2020/03/taxi3.jpg"/><figcaption>Пример подписи к третьему фото </figcaption></figure> </div>
Пример item с галереей:
<item>
<title>Опубликованы первые фотографии летающего электротакси</title>
<link>https://example.com/</link>
<pubDate>Mon, 23 Mar 2020 12:00:00 +0000</pubDate>
<author>Игорь Малышев</author>
<description>Первые экспериментальные полеты могут пройти уже в 2020 году.</description>
<enclosure url="https://example.com/uploads/2020/03/taxi.jpg" type="image/jpeg"/>
<enclosure url="https://example.com/uploads/2020/03/taxi1.jpg" type="image/jpeg"/>
<enclosure url="https://example.com/uploads/2020/03/taxi3.jpg" type="image/jpeg"/>
<content:encoded><![CDATA[<p>Производители показали первые фото электрического аэротакси. Фото смотрите в галерее.</p>
<div data-pulse-component="gallery" data-pulse-component-name="pulse_gallery">
<figure><img src="https://example.com/uploads/2020/03/taxi.jpg"/><figcaption>Пример подписи к первому фото</figcaption></figure>
<figure><img src="https://example.com/uploads/2020/03/taxi1.jpg"/><figcaption>Пример подписи к второму фото </figcaption></figure>
<figure><img src="https://example.com/uploads/2020/03/taxi3.jpg/"/><figcaption>Пример подписи к третьему фото </figcaption></figure>
</div>
<p>В Австралии первые экспериментальные полеты могут быть осуществлены уже в 2020 году, а полномасштабный запуск запланирован на 2023 год.</p>
]]></content:encoded>
</item>
Как выглядит фотогалерея?
https://drive.google.com/file/d/1u3zDsScjabSzt7mBdnk4p0GRJQhFRcK7/view?usp=sharing
https://drive.google.com/file/d/1ssH6n3rroLtFLggYixmGHTrgpHii1ZbK/view?usp=sharing
Отображение виджета Instagram в полнотексте
Для того, чтобы отобразить изображение из Instagram в полнотексте необходимо:
-
Открыть пост, необходимый для полнотекста, в Instagram-web
-
Нажать на многоточие рядом с постом
-
Выбрать пункт Embed
-
Нажать на Copy Embed code
-
Вставить его в текст полнотекста
Автоматически, код будет обработан и отображён в виде инстаграммного поста.
Пример кода embed:
<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/somelink/"
data-instgrm-version="12" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);">
<div style="padding:16px;">
…
</div>
</blockquote>
<script async src="//www.instagram.com/embed.js"></script>
Отображение виджета Twitter в полнотексте
Для того, чтобы отобразить пост из twitter в ленте, необходимо:
- Выбрать пост, который необходимо отображать в полнотекстах
- Открыть управляющее меню в правом верхнем углу
- Выбрать пункт “Embed Tweet”
- В открывшейся странице перейти к блоку предосмотра и скопировать эмбед, нажав на кнопку “Copy code”
- После этого необходимо вставить скопированный код в текст полнотекста
Код будет автоматически обработан и отображено в виде поста из Твиттера.
Пример кода эмбеда:
<blockquote class="twitter-tweet"><p lang="ru" dir="ltr">Контент из твиттера</p>— Никнейм (@username) <a href="https://twitter.com/schrgrdr/status/post_id?ref_src=twsrc%5Etfw">Post date</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Отображение ВК-поста в теле полнотекста
Для того, чтобы отобразить пост ВК в теле полнотекста необходимо:
- Выбрать пост, который необходимо вставить в статью
- Нажать на кнопку “поделиться”
- Выбрать таб “Экспортировать” и скопировать код из поля “Код для вставки”
- После этого необходимо вставить скопированный код в текст полнотекста
Пример кода эмбеда:
<div id="vk_post_-198528409_516"></div>
<script type="text/javascript" src="https://vk.com/js/api/openapi.js?168"></script>
<script type="text/javascript">
(function() {
VK.Widgets.Post("vk_post_-id_post", -198528409, 516, '6fsAB2-gHFzQFhlBcggGQ2ACAT2Z');
}());
</script>
