Чтобы посмотреть, как эмбед будет выглядеть в посте, нажмите на нём кнопку Отобразить. Чтобы вернуться к редактированию, нажмите Редактировать в правом верхнем углу элемента.

Подробнее о разных способах вставки эмбеда:

В виде ссылки

Скопируйте ссылку на объект: видео в YouTube, пост в Instagram и ли на другой внешний ресурс. Вставьте эмбед в пост, с помощью кнопки Добавить эмбед в правой панели редактора. Вставьте скопированную ссылку в образовавшееся поле.

Эмбед автоматически отобразится. Добавленный таким образом объект, по умолчанию, займет всю ширину поста или выделенной ему колонки.

Список поддерживаемых сервисов:

В виде HTML-кода

Скопируйте HTML-код эмбеда с внешнего ресурса. Вставьте эмбед в пост, с помощью кнопки Добавить эмбед в правой панели редактора. Вставьте скопированный код в образовавшееся поле.

Такой код содержит ряд атрибутов: ширину, высоту, прозрачность и пр. Эти параметры можно изменить по своему усмотрению.

Примечание: вставка кодом недоступна в бесплатной версии

Настройки адаптивности эмбеда

По умолчанию, большинство эмбедов автоматически адаптируется под выделенную область: ширину поста или колонки. Иногда эмбед нужно отобразить в исходном размере и растяжение или сжатие не требуется. Чтобы отключить механизмы адаптивности Setka Editor:

1. Переключитесь на вкладку Эмбед на верхней панели навигации.

2. Откройте меню дополнительных настроек (кнопка ▼).

3. В выпадающем списке Адаптивный эмбед выберите выключить:

______________2020-06-08___17.35.20_result.png

4. Эмбед примет размеры, выставленные в его коде.

Некоторые полезные эмбеды

Сниппеты кода

Есть несколько способов добавить подобный блок:

Сервисы подсветки кода

Например, один из инструментов PineTools:

1. Выберите инструмент Syntax highlighter и вставьте код в поле Unhighlighted code.

2. Выберите настройки подсветки в меню Options -> Language -> Select one или оставьте автоматические (Autodetect).

3. Нажмите Highlight.

4. Вставьте код с подсветкой в эмбед в интерфейсе Setka Editor.

Эмбеды CodePen

1. Зарегистрируйтесь на CodePen.

2. Создайте новый Pen нажатием кнопки Start Coding.

3. Сохраните изменения нажатием Save в правом верхнем углу экрана.

4. Нажмите Embed в правом нижнем углу и скопируйте код.

5. Вставьте код в эмбед в интерфейсе Setka Editor.

Подсветка синтаксиса с помощью highlight.js

1. Скачайте файл библиотеки с сайта проекта. Расположите файл на своей платформе.

2. Откройте гид highlight.js и следуйте инструкциям из раздела Getting started.

3. Поместите в <head> страницы сайта код из блока ниже :

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Учтите, что

/path/to/styles/default.css

/path/to/highlight.min.js

должны быть валидными путями к файлу, скачанному в п. 1. Если у вас возникнут сложности с размещением файла через CMS, замените эти пути на прямые ссылки на публичных CDN.

4. Поместите блок кода, который вы хотите подсветить, в эмбед. Перед этим нужно экранировать символы самого кода. К примеру, в сервисе HTML Entities Encoder / Decoder. Убедитесь, что код обёрнут в соответствующие тэги:

<pre><code class="html">...</code></pre>

Формы

Чтобы добавить форму с тегом <form> в коде, модифицируйте эмбед-код и вставьте его в следующем формате:

<div id="%%unique_form_placeholder_name%%"></div>
<script>
  var uniqueFormHtml = '%%FORM CODE%%';
  var uniquePlaceholderEl = document.getElementById('%%unique_form_placeholder_name%%');
  if (uniquePlaceholderEl) uniquePlaceholderEl.innerHTML = uniqueFormHtml;
</script>

Замените в шаблоне %%unique_form_placeholder_name%% на уникальный ID формы.

%%FORM CODE%% — это весь код формы в одну строку. К примеру,

<form action="/subscribe">
<input type="text">
<button type="submit">Subscribe</button>
</form>

трансформируйте в:

<form action="/subscribe"><input type="text"><button type="submit">Subscribe</button></form>

Возможные проблемы

Эмбеды Facebook в мобильной версии

Эмбеды некоторых сторонних сервисов могут отображаться некорректно. Это связано с тем, что внутрь контейнера <iframe></iframe> помещается независимый документ, со своими предустановленными значениями атрибутов.

При установке режима Адаптивный эмбед –> включить, содержимое такого эмбеда, для сохранения пропорций, обрезается с одной стороны. При растягивании эмбеда по ширине экрана, проверьте в режиме предпросмотра, как будет выглядеть содержимое мобильной версии.

Видео в мобильной версии

Видео с отключенной опцией Адаптивный эмбед в мобильной версии не будут адаптироваться под ширину экрана. Чтобы разрешить растягивание видео по ширине, во вкладке Эмбед -> Адаптивный эмбед установите значение включить:

Эмбеды Instagram

Иногда Instagram отдаёт эмбед-коды с нарушенными пропорциями и слишком большим блоком комментариев. Это происходит при вставке как ссылкой, так и кодом. Чтобы вернуть блоку корректные пропорции:

1. Вставьте эмбед Instagram HTML-кодом. Вставка ссылкой в этом методе сработает некорректно.

2. Добавьте в любое место в статье ещё один эмбед, со следующим кодом:

<style>iframe.instagram-media { position: relative !important; }</style>

Этот код исправит пропорции для всех эмбедов Instagram в посте. Добавить его нужно один раз. Несмотря на то, что эмбед виден в редакторе, читатель не увидит его в финальной версии статьи.

Важно: убедитесь, что для эмбеда выше отключён нижний отступ.