Шаблонизация материалов блога

У любой статьи, разумеется, есть заголовок, а в блоге не помешает и красочная обложка (титульное изображение), но сейчас не об этом. Сейчас исключительно о теле статьи, т.е. о том, на какие типовые элементы можно разложить почти любую статью.

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

• Вступление. Как правило, один – два абзаца без заголовка и изображения.
• Блоки основного текста статьи. Чаще всего каждый блок состоит из нескольких абзацев, нередко блок текста предваряет подзаголовок, часто блок сопровождает одно изображение. Количество блоков зависит от объёма статьи.
• Заключение. Встречается не очень часто, но должно хоть немного визуально отличаться от основного текста, поэтому итог статьи лучше вынести в отдельный логический блок.

Итак, получаем три логических блока, каждый из которых имеет свой элементный состав:

• Вступление: текст.
• Блоки основного текста: заголовок, изображение, текст.
• Заключение: текст.

Разворачиваем элементный состав логических блоков и получаем список фрагментов, на которые требуется разделить тело статьи.

• intro – текс вступления
• heading_01 – заголовок первого блока
• image_01 – изображение первого блока
• block_01 – текст первого блока
• heading_02 – заголовок второго блока
• image_02 – изображение второго блока
• block_02 – текст второго блока
• heading_XX – заголовок блока номер XX
• image_XX – изображение блока номер XX
• block_XX – текст блока номер XX
• conclusion – текст заключения

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

Для разметки тела статьи лучше использовать HTML тег-контейнер, т.е. те теги, которые имеют начало и конец. Хорошо было бы использовать тег <span></span>, т.к. если ему не задавать никаких свойств, то он не будет влиять ни на что вообще, но такой тег может потребоваться непосредственно внутри текста, а его закрывающая часть может запутать регулярное выражение и извлеченный из всей статьи фрагмент будет обрезан не там, где нужно. Поэтому используем блочный тег <div></div>, от которого хуже тоже не станет, если применять с умом. Никакой традиционной полезной нагрузки в виде классов и стилей тег нести не будет, мы поместим в него только один универсальный атрибут – id, которому в качестве значений будем присваивать имена нашего элементного состава.

Воспроизведу предыдущий список (без элементов изображений), воплощенный в HTML разметку:

<div id="intro"></div>
<div id="heading_01"></div>
<div id="block_01"></div>
<div id="heading_02"></div>
<div id="block_02"></div>
<div id="heading_XX"></div>
<div id="block_XX"></div>
<div id="conclusion"></div>

Теперь осталось обернуть этими тегами нужные фрагменты тела статьи.

Важно! Для блоков текста необходимо добавить теги абзацев <p></p>

Вариант применения HTML разметки тела статьи представлен на скриншоте.

Теперь задача сводится к тому, чтобы получить всё тело статьи, вычленить из него нужные фрагменты с помощью регулярных выражений и распределить их по переменным PHP, чтобы позже можно было выводить значения переменных с помощью специализированных элементов конструктора YooTheme Builder.

В данном шаге получаем всё тело статьи и помещаем его в переменную $page_content с помощью конструкции приведенной ниже:

Внимание! Здесь и далее (во всех шагах инструкции) для корректной работы кода в слове source, заключенным в фигурные скобки, нужно заменить символ $ на букву s в тех местах, где этот символ присутствует.

{$ource}<?php $page_content='
### Динамические данные - контент материала ###
'; ?> {/source}

Странный тег-контейнер {$ource}{/source} является частью синтаксиса плагина Sourcerer от Regular Labs, установка которого позволяет (в том числе) использовать произвольный пользовательский PHP-код внутри полей Joomla.

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

Элемент Code, ответственный за передачу тела статьи переменной, нужно разместить в любом месте, предшествующем выводу статьи.

Теоретически можно получить контент статьи с помощью родных переменных Joomla, но я фиговый программист и не умею так делать, поэтому получаю тело статьи с помощью элемента, работающего с динамическими данными.

Работа с элементом:

• Код (элемент) -> Ещё (вкладка) -> Имя (поле) -> Задаю элементу имя «Помещаем HTML код материала в переменную $page_content». Делается это исключительно для наглядности и чтобы не запутаться.
• Код (элемент) -> Ещё (вкладка) -> Динамический контент (поле) -> Выбираем из списка «Материал».
• Код (элемент) -> Контент (вкладка) -> Контент (поле) -> Выбирать динамически (ссылка) -> Материал (группа) -> Контент (тип данных)
• Код (элемент) -> Контент (вкладка) -> Контент (поле) -> Редактировать (кнопка с изображением карандаша внутри поля) -> Фильтры (группа полей) -> После (поле) -> '; ?> {/source} (Любой «разорванный» PHP-код нужно вставлять начиная с завершающей части, чтобы избежать фатальных ошибок PHP)
• Код (элемент) -> Контент (вкладка) -> Контент (поле) -> Редактировать (кнопка с изображением карандаша внутри поля) -> Фильтры (группа полей) -> До (поле) -> {$ource} <?php $page_content='

Таким образом мы окружили выводимый код тела статьи PHP-кодом, который передает тело статьи переменной $page_content.

Задача этого шага – передать соответствующим переменным нужные фрагменты тела статьи. А чтобы было что передавать, фрагменты нужно найти в теле статьи с помощью регулярного выражения, пример которого приведен ниже:

|<div id="intro">(.*?)</div>|is

Маска регулярного выражения находится между вертикальными чертами |, чтобы исключить конфликт с элементами тега.

Модификаторы (после маски выражения).

• i - Регистронезависимый поиск (на само деле не очень нужен в примере).
• s – Означает, что символ точка включает в себя переносы строк, т.е. поиск будет по всем строкам, а не по одной.

Открывающий и закрывающий тэги разметки приведены в регулярном выражении в полном виде. Содержимое между тегов объединено в группу с помощью скобок и представляет из себя:

• Точка – Соответствует любому единичному символу.
• Звёздочка – После выражения, соответствующего единичному символу, соответствует нулю или более копий этого выражения.
• Знак вопроса – Ленивый (не жадный) квантификатор, означающий в данном примере, что поиск будет производится до первого закрывающего тега </div>, а не до последнего.

Если написал какую-нибудь фигню, то извините, в регулярных выражениях я не большой специалист, как и в программировании.

В связке с PHP-кодом регулярное выражение будет выглядеть так:

if (preg_match('|<div id="intro">(.*?)</div>|is', $page_content, $required_content))
{$intro=$required_content[1];}

Поскольку функция preg_match() возвращает количество найденных строк (или false в случае ошибки), мы сразу помещаем её внутрь оператора-условия if. Таким образом, если поиск не дал результатов, то и вторая строка кода выполняться не будет.

Функция preg_match() ищет соответствия шаблону регулярного выражения в переменной $page_content и помещает результаты поиска в переменную $required_content.

Массив с результатами поиска (в нашем случае $required_content) состоит из двух частей: в $required_content[0] будут найденные строки вместе с открывающим и закрывающим тегами div, а в $ required_content [1] будут те же строки без тега div, т.е. тот текст, что находится в круглых скобках регулярного выражения. (Так должно быть, но у меня если честно, в обеих переменных текст без тега div.) В случае, если с поиском всё тик-так, то сработает вторая строка кода, которая передаст переменной с уникальным (в рамках нашего кода) и понятным в контексте именем значение переменной $ required_content [1], содержащей «чистые» результаты поиска.

Полный код извлечения фрагментов рассчитан на 10 блоков и выглядит так:

<?php
if (preg_match('|<div id="intro">(.*?)</div>|is', $page_content, $required_content))
{$intro=$required_content[1];}
//if (isset($intro))
//{echo $intro;}


if (preg_match('|<div id="heading_01">(.*?)</div>|is', $page_content, $required_content))
{$heading_01=$required_content[1];}
//if (isset($heading_01))
//{echo $heading_01;}

if (preg_match('|<div id="block_01">(.*?)</div>|is', $page_content, $required_content))
{$block_01=$required_content[1];}
//if (isset($block_01))
//{echo $block_01;}


if (preg_match('|<div id="heading_02">(.*?)</div>|is', $page_content, $required_content))
{$heading_02=$required_content[1];}

if (preg_match('|<div id="block_02">(.*?)</div>|is', $page_content, $required_content))
{$block_02=$required_content[1];}


if (preg_match('|<div id="heading_03">(.*?)</div>|is', $page_content, $required_content))
{$heading_03=$required_content[1];}

if (preg_match('|<div id="block_03">(.*?)</div>|is', $page_content, $required_content))
{$block_03=$required_content[1];}


if (preg_match('|<div id="heading_04">(.*?)</div>|is', $page_content, $required_content))
{$heading_04=$required_content[1];}

if (preg_match('|<div id="block_04">(.*?)</div>|is', $page_content, $required_content))
{$block_04=$required_content[1];}


if (preg_match('|<div id="heading_05">(.*?)</div>|is', $page_content, $required_content))
{$heading_05=$required_content[1];}

if (preg_match('|<div id="block_05">(.*?)</div>|is', $page_content, $required_content))
{$block_05=$required_content[1];}


if (preg_match('|<div id="heading_06">(.*?)</div>|is', $page_content, $required_content))
{$heading_06=$required_content[1];}

if (preg_match('|<div id="block_06">(.*?)</div>|is', $page_content, $required_content))
{$block_06=$required_content[1];}


if (preg_match('|<div id="heading_07">(.*?)</div>|is', $page_content, $required_content))
{$heading_07=$required_content[1];}

if (preg_match('|<div id="block_07">(.*?)</div>|is', $page_content, $required_content))
{$block_07=$required_content[1];}


if (preg_match('|<div id="heading_08">(.*?)</div>|is', $page_content, $required_content))
{$heading_08=$required_content[1];}

if (preg_match('|<div id="block_08">(.*?)</div>|is', $page_content, $required_content))
{$block_08=$required_content[1];}


if (preg_match('|<div id="heading_09">(.*?)</div>|is', $page_content, $required_content))
{$heading_09=$required_content[1];}

if (preg_match('|<div id="block_09">(.*?)</div>|is', $page_content, $required_content))
{$block_09=$required_content[1];}


if (preg_match('|<div id="heading_10">(.*?)</div>|is', $page_content, $required_content))
{$heading_10=$required_content[1];}

if (preg_match('|<div id="block_10">(.*?)</div>|is', $page_content, $required_content))
{$block_10=$required_content[1];}


if (preg_match('|<div id="conclusion">(.*?)</div>|is', $page_content, $required_content))
{$conclusion=$required_content[1];}
?>

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

Закомментированные фрагменты кода отвечают за вывод на экран содержимого переменных, в случае если оно есть, что сделано исключительно для отладки и проверки работы кода. Все закомментированные участки кода можно удалить.

Приведенный выше код нужно обернуть в служебные теги плагина {$ource}{/source} и поместить в элемент конструктора Code, который должен следовать за элементом, описанным в предыдущим шаге инструкции.

Работа с элементом:

• Код (элемент) -> Ещё (вкладка) -> Имя (поле) -> Задаю элементу имя «Разделяем контент страницы на фрагменты по тегам-маркерам и присваиваем их переменным». Делается это исключительно для наглядности и чтобы не запутаться.
• Код (элемент) -> Контент (вкладка) -> Контент (поле) -> Разместить код (сам код и условия размещения приведены выше).

Теперь нужно создать простейший шаблон из привычных элементов конструктора YooTheme Builder, по которым распределить присвоенные переменным фрагменты статьи. Поскольку предполагается возможность использования нескольких шаблонов, а также в связи с тем, что шаблон должен состоять из большого количества элементов (нужно обеспечить вывод вступления, 10 блоков с заголовками, изображениями и текстом и заключения), то самым правильным для шаблона статьи использовать элемент «Sublayout», который внешне выглядит как один элемент, но внутри себя может содержать любое количество строк (без разделов).

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

Итак, в качестве концепции простейшего шаблона будем использовать вывод всего содержимого статьи в одну колонку. Введение и заключение будут немного отличаться по стилю текста от прочего содержимого. Каждый из 10 блоков будет начинаться заголовком (подзаголовком в рамках статьи), за ним будет идти изображение, затем текст. Разумеется, будут выводится не все 10 блоков, а то их количество, которое соответствует разметке статьи. Заголовок и изображение блока тоже опция: могут присутствовать или отсутствовать.

Как уже было сказано, каждый логический блок нужно будет проверять на необходимость вывода, также потребуется проверять фактическое наличие изображений.

Назовём наш первый шаблон простым и понятным русским словом «Content template - 1 column».

Внутреннее наполнение элемента «Sublayout», содержащего шаблон статьи, выглядит достаточно просто: каждому логическому блоку соответствует одна строка.

Каждая строка содержит необходимое количество элементов конструктора для отображения логического блока:

• Введение: текст и разделитель.
• Основные текстовые блоки: заголовок, изображение png, изображение jpg, текст, разделитель.
• Заключение: текст.

Все основные текстовые блоки имеют нумерацию каждого элемента, соответствующие нумерации тегов, с помощью которых размечен контент материала.

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

Для проверки строки на необходимость отображения используется простейший механизм: в настройках строки на вкладке «ещё» назначаем ей в качестве динамических данных контент материала и проверяем содержится ли в нём тот тег разметки, за вывод которого отвечает строка.

Реализовано это так (на примере основного текстового блока №1):

• Нажимаем кнопку «Редактировать» (карандашик в правом верхнем углу за границей строки).
• Строка -> Ещё -> Динамический контент (поле выбора) -> Страница (группа) -> Материал (источник данных)
• Строка -> Ещё -> Динамическое состояние (поле выбора) -> Материал (источник данных) -> Контент (тип данных)
• Строка -> Ещё -> Условие (поле выбора) -> Содержит
• Строка -> Ещё -> Значение (поле ввода) -> <div id="block_01">

В качестве значения всегда вводить открывающий div тег разметки текстовой составляющей логического блока. Заголовок или картинка могут отсутствовать в основных текстовых блоках, поэтому ориентируемся именно на текст.

• Введение - <div id="intro">
• Основные текстовые блоки - <div id="block_XX"> (где XX – номер блока)
• Заключение - <div id="conclusion">

Разберемся с настройкой каждого логического блока поэлементно. Начнем, что очевидно с введения.

Логический блок «Введение» представлен, по сути, одним элементом конструктора – «Text». После элемента текста поставлен элемент разделителя (Divider), но это уже украшательства, а не функционал.

• Текст (элемент) -> Контент (вкладка) -> Контент (поле ввода текста) -> Разместить код:

{$ource}
<?php
echo $intro;
?>
{/source}

• Текст (элемент) -> Настройки (вкладка) -> Текст (группа настроек) -> Цвет текста (поле выбора) -> Emphasis (чтобы текст введения был немного ярче основных текстовых блоков).
• Текст (элемент) -> Ещё (вкладка) -> Имя (поле ввода) -> intro (задаём имя элемента)

Введенный в качестве контента код обеспечит вывод для отображения на странице содержимого переменной $intro , в которой находится текст введения.

Настройка логического элемента «Заключение» будет почти идентичной, только в качестве переменной для отображения нужно будет использовать $conclusion, а в качестве имени элемента конструктора «conclusion». Также стоит отказаться от завершающего элемента разделителя, т.к. после заключения он будет не уместен.

Рассмотрим настройку элемента на примере заголовка с именем heading_01.

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

А теперь непосрседственно о настройках элемента:

• Заголовок (элемент) -> Контент (вкладка) -> Контент (поле ввода текста) -> Разместить код:

{$ource}
<?php
echo $heading_01;
?>
{/source}

• Заголовок (элемент) -> Настройки (вкладка) -> Заголовок (группа настроек) -> HTML элемент (поле выбора) -> h3 (оптимальный тег для подзаголовков блоков статьи).
• Заголовок (элемент) -> Ещё (вкладка) -> Имя (поле ввода) -> heading_01 (задаём имя элемента).

Я решил попробовать отказаться от внедрения изображений непосредственно в статью и сделать привязку через имя файла, часть которого будет идентична алиасу названия статьи.

Например, изображение для первого основного текстового блока стати, использующейся в примере, будет иметь имя top-5-promising-truck-brands-advantages-and-features_01.png.

Разберём состав имени файла:

• top-5-promising-truck-brands-advantages-and-features – Переводной алиас заголовка статьи « Топ-5 перспективных брендов грузовиков: преимущества и особенности».
• _ - Знак подчёркивания, используется для связки слов в предложение.
• 01 – Порядковый номер, соответствующий номеру основного текстового блока.
• .png – Расширение файла, возможно использование PNG или JPG файлов. В PNG можно использовать прозрачный фон, а JPG славится умеренностью размера и является стандартом де-факто для большинства изображений в интернете.

Такой режим работы с изображениями предполагает, что сначала должен быть создан материал (статья) в Joomla, затем используя алиас названия статьи (скопипастив его, попросту говоря) как способ привязки графического файла к материалу, можно подготавливать изображения с именами файлов из рецепта выше. Готовые изображения загружаются в общую папку изображений блога.

Такое решение имеет свои плюсы и минусы. Рассмотрим их.

Плюсы:

• Гарантировано отсутствие конфликтов имён файлов.
• Имена файлов имеют кошерный формат: только латиница, никаких пробелов, нижний регистр.
• Нет необходимости отягощать тело статьи дополнительными HTML тегами для изображений. К тому же не очевидно в какое конкретно место статьи их нужно было бы вставлять, ведь шаблон может выводить информацию не в том же порядке, что в оригинальной статье.
• Любая работа с изображениями не требует редактирования материала.
• Все изображения одной статьи имеют общую часть имени файла – удобно при пакетной обработке и редактировании.

Минусы:

• Глядя на материал статьи Joomla в панели администрирования (backend) абсолютно непонятно содержит ли статья изображения и если да, то какие и сколько, придётся заглянуть в медиа менеджер.
• При экспорте материалов нет связи с изображениями. Потребуются некоторые дополнительные действия (но это решаемо).

На самом деле только время и впечатления от работы покажут насколько практично такое решение. Сейчас мне оно видится оптимальным.

Рассмотрим настройку элемента на примере изображения с именем _01.png.

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

Изображение – Контент Здесь указываем относительный путь к файлу, используя алиас материала как основную часть имени файла и прибавляем к нему спереди путь к папки хранения файла изображения, а сзади номер файла и расширение. Таким образом собираем из трёх составляющих окончательную конструкцию top-5-promising-truck-brands-advantages-and-features_01.png, т.е. путь к файлу изображения для тега img.

А ещё в качестве альтернативного текста изображения используем заголовок блока. Так что альтернативный текст в теге img будет только в том случае, если заголовок блока существует.

• Изображение (элемент) –> Контент (вкладка) –> Изображение (поле ввода) –> Выбирать динамически (ссылка над полем справа) –> Страница (группа) –> Материал (источник данных) –> Алиас (тип данных).
• Изображение (элемент) – Контент (вкладка) – Изображение (поле ввода) -> Редактировать (кнопка с изображением карандаша внутри поля) -> Фильтры (группа полей) -> До (поле ввода) -> images/blog/ (путь к папке с изображениями блога).
• Изображение (элемент) – Контент (вкладка) – Изображение (поле ввода) -> Редактировать (кнопка с изображением карандаша внутри поля) -> Фильтры (группа полей) -> После (поле ввода) -> _01.png (порядковый номер изображения и расширение файла).
• Изображение (элемент) –> Контент (вкладка) –> Атрибут alt изображения (поле ввода) –> {s0urce} <?php echo $heading_01; ?> {/source} (В качестве значения атрибута alt изображения используется заголовок блока. Если его нет, то атрибут останется пустым.).

Изображение – Настройки

Тут у нас всё для настройки внешнего вида изображения. Воспользуюсь только одной опцией: центрирование по горизонтали.

• Изображение (элемент) –> Настройки (вкладка) -> Общие (группа настроек) -> Выравнивание (поле выбора) -> По центру. Изображение – Ещё

Здесь зададим имя элементу (ну, это просто) и настроим проверку на существование файла изображения, чтобы не выводить его в случае отсутствия (а то пустые альты повылезают от картинок или того хуже).

Для проверки наличия изображения будем использовать динамические данные файла, конкретно его размер. Если размер не пустой, значит файл существует. Для настройки пути проверки потребуется обращение к алиасу материала через динамические данные. Настройка пути файла делается точно также как на вкладке «Контент».

• Изображение (элемент) –> Ещё (вкладка) –> Имя (поле ввода) -> _01.png (имя элемента, чтобы не запутаться).
• Изображение (элемент) –> Ещё (вкладка) –> Динамический контент (поле выбора) -> Внешний (группа) -> Файл (источник данных).
• Изображение (элемент) –> Ещё (вкладка) –> Шаблон пути (поле ввода) -> Выбирать динамически (ссылка над полем справа) –> Страница (группа) –> Материал (источник данных) –> Алиас (тип данных).
• Изображение (элемент) –> Ещё (вкладка) –> Шаблон пути (поле ввода) -> Редактировать (кнопка с изображением карандаша внутри поля) -> Фильтры (группа полей) -> До (поле ввода) -> images/blog/ (путь к папке с изображениями блога).
• Изображение (элемент) –> Ещё (вкладка) –> Шаблон пути (поле ввода) -> Редактировать (кнопка с изображением карандаша внутри поля) -> Фильтры (группа полей) -> После (поле ввода) -> _01.png (порядковый номер изображения и расширение файла).
• Изображение (элемент) –> Ещё (вкладка) –> Динамическое состояние (поле выбора) -> Файл (источник данных) -> Размер (тип данных).
• Изображение (элемент) –> Ещё (вкладка) –> Условие (поле выбора) -> Не пустой

Процесс настройки элемента, содержащего изображение JPG идентичен процессу настройки элемента, содержащего изображение PNG за исключением расширения файла.

Делать всё, что в предыдущем шаге, только вместо .png везде использовать .jpg

На скриншоте пример настроек вкладки «Ещё», которая одинаково хорошо иллюстрирует настройки данного и предыдущего шага.

В статье примера файлы JPG не используются вообще.

Рассмотрим настройку отображения текста в основном текстовом блоке на примере элемента именем block_01.

• Текст (элемент) -> Контент (вкладка) -> Контент (поле ввода текста) -> Разместить код:

{$ource}
<?php
echo $block_01;
?>
{/source}

• Текст (элемент) -> Ещё (вкладка) -> Имя (поле ввода) -> block_01 (задаём имя элемента)

После элемента текста в шаблоне поставлен элемент разделителя, но, как я уже говорил ранее, это только для нарядности, - никакого функционала.

После создания первого логического основного текстового блока, разумеется, не имеет смысла создавать второй такой же вручную с нуля. Достаточно создать копию (кнопка «копировать» вторая сверху в правом верхнем углу за пределами строки) предыдущей строки и изменить в копии следующие параметры:

Строка:

• Строка (редактирование) -> Ещё (вкладка) -> Значение (поле ввода) -> Изменить номер блока.

Заголовок:

• Заголовок (элемент) -> Контент (вкладка) -> Контент (поле ввода) -> Изменить номер заголовка.
• Заголовок (элемент) -> Ещё (вкладка) -> Имя (поле ввода) - Изменить номер заголовка.

Изображение PNG:

• Изображение (элемент) -> Контент (вкладка) –> Изображение (поле ввода) -> Редактировать (кнопка внутри поля) -> После (поле ввода) -> Изменить номер во фрагменте имени файла.
• Изображение (элемент) -> Контент (вкладка) –> Атрибут ALT изображения (поле ввода) -> Изменить номер в переменной заголовка, которая используется в качестве атрибута.
• Изображение (элемент) -> Ещё (вкладка) -> Имя (поле ввода) -> Изменить номер в имени блока.
• Изображение (элемент) -> Ещё (вкладка) -> Шаблон пути (поле ввода) -> Редактировать (кнопка внутри поля) -> После (поле ввода) -> Изменить номер во фрагменте имени файла.

Изображение JPG:

• Произвести действия, идентичные корректировкам для изображения PNG.

Текст:

• Текст (элемент) -> Контент (вкладка) -> Контент (поле ввода) -> Изменить номер блока в переменной. Текст (элемент) -> Ещё (вкладка) -> Имя (поле ввода) -> Изменить номер имени блока.

Сейчас имеется только один вариант макета и не факт, что для данного сайта потребуется что-то большее.

Планы создать несколько вариантов макета и наладить возможность их простой и удобной ассоциации с материалом есть. Как только появится какая-то информация по этому поводу, то либо будет дописана данная инструкция, либо будет дана ссылка на другу, описывающую работу с несколькими вариантами шаблонов.

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