Эмбеды

В Setka Post Editor есть два способа вставки эмбеда в пост:

  1. С помощью ссылки (URL) – доступно на всех тарифах
  2. С помощью эмбед-кода - доступно только на платных тарифах.

 

Вставка эмбеда по ссылке: 

Скопируйте ссылку на объект. Поставьте курсор в тот абзац, после которого вы хотите расположить эмбед, или в нужную ячейку сетки, а затем нажмите на значок </> в правой панели. Вставьте ссылку в появившемся окне Paste embed link here и вы сразу увидете как эмбед будет выглядеть в посте. Если вы нажмете Edit в правом углу эмбеда, он будет отображаться в виде ссылки.

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

 

 

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

  • Для пользователей, использующих Setka Post Editor на платформе Wordpress, доступен по ссылке,
  • Для пользователей Setka Post Editor с кастомной интеграцией доступен по ссылке.

 

Вставка эмбеда с помощью эмбед-кода: 

Помимо возможности вставки эмбеда по ссылке, на тарифах Pro и Enterprise доступна возможность добавить его с помощью эмбед-кода. Ссылка в таком коде обернута в html-теги и содержит ряд предварительно заданных атрибутов, которые можно изменить.

Поставьте курсор в тот абзац, после которого вы хотите расположить эмбед, или в нужную ячейку сетки, нажмите на значок </> в правой панели, а затем на значок {...} в появившемся окне в поле поста. Ведите HTML-код, который вы можете найти – например, под видео на Youtube, Vimeo или нажав на знак троеточия в твите. 

 

 

Что такое функция render/unrender в embed?

Чтобы посмотреть, как эмбед  будет выглядеть в посте, откройте вкладку Embed и нажмите на кнопку render. Если вы нажмете unrender, оно снова будет отображаться в виде кода.

 

Как изменить ширину эмбеда?

Если вы нажмете Embed > Responsive embed > off эмбед будет отображаться в том размере, который задан в коде. Если нажать Embed > Responsive embed > on, то видео растянется по ширине контейнера, в который он вставлен (колонки, таблицы или поста).

 

 

Как добавить блок с подсвеченным синтаксисом кода?

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

Вариант 1 - Вставить эмбед с ресурса codepen.io

  1. Зарегистрируйтесь на https://codepen.io/
  2. Создайте новый pen
  3. Нажмите кнопку "Save" в верхнем равом углу экрана
  4. Нажмите кнопку "Embed" в нижнем правом углу и скопируйте код.
  5. Вставьте код в эмбед в интерфейсе Setka Editor.

Вариант 2 - Используйте highlight.js - инструмент для подсветки синтаксиса кода.

  1. Скачайте файл библиотеки с их сайта нажатием на серую кнопку на главной странице.
  2. Откройте страничку гида highlight.js и следуйте инструкциям из раздела "Getting started"
  3. Поместите код из блока ниже в <head> страницы сайта.
    <link rel="stylesheet" href="/path/to/styles/default.css">
    <script src="/path/to/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>

    Учтите, что  

    /path/to/styles/default.css

    и

    /path/to/highlight.pack.js

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

  4. Поместите блок кода, который вы хотите подсветить в эмбед. Убедитесь, что код обёрнут в соответствующие тэги. Вот пример того, как это должно выглядеть.
<pre><code class="html">...</code></pre>

 

Как добавить форму с тегом <form> 

Если вы добавляете форму, в коде которой присутствует тег <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>