Пример создания компонента для шаблона MaxSite CMS

Рассмотрим несложный пример создания компонента для шаблона Default (или основанного на нём). Вся теоретическая часть нами уже рассмотрена, поэтому я буду показывать конкретные шаги реализации.

Иногда на сайтах в шапке бывает расположен блок в котором слева/справа выводится какой-то текст, а с противоположной стороны - картинка/лого. Вот примерно так:

Определимся с ТЗ

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

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

Создадим файлы компонента

Компонент располагается в каталоге шаблона components. Пусть это будет text-and-image.php. В начале пусть он будет с одной строчкой-защитой:

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');

Этого уже достаточно, чтобы компонент появился в админ-панели.

Сохраним выбор блоков.

Добавим опции компонента

Опции компонента находятся в каталоге components/options. Имя файла совпадает с именем компонента: text-and-image.ini.

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

[Текст для компонента text-and-image]
options_type = templates
options_key = component_text_and_image_text
type = textarea
description = "Текст для компонента <b>text-and-image</b>. Используйте HTML для оформления текста."
default = "<h3>Привет!</h3>_NR_<p>Добро пожаловать на мой сайт! Здесь вы найдете много интересного и полезного.</p>"
section = "Компонент text-and-image"
section_description = ""
 
[Изображение для компонента text-and-image]
options_type = templates
options_key = component_text_and_image_image
type = textfield
description = "Адрес изображения для компонента <b>text-and-image</b>. Адрес следует указывать в полном формате (с http://)."
default = ""
 
[Выравнивание изображения в компоненте text-and-image]
options_type = templates
options_key = component_text_and_image_align
type = select
description = "Укажите вариант расположения изображения в компоненте <b>text-and-image</b>."
values = "left||Влево # right||Вправо"
default = "left"

Тут все стандартно, разве что обращу внимание на несколько интересных моментов.

• Код «_NR_» используется для создания переноса строки. Чисто визуальный эффект для textarea.
• section и section_description используются для визузального отделения опций.

Теперь, если заглянуть в админку, то увидим созданные опции.

Поскольку мы ещё их не обновили, то они не занесены в базу данных и подсвечиваются красным цветом. Это правило используется для всех опций в MaxSite CMS.

HTML-структура компонента

Теперь самое время создать HTML-каркас компонента. Это будут два DIV'а: основной и вложенный wrap. Для изображения на основе опции сформируем IMG, а текст выведем как есть без обработки.

Результирующий text-and-image.php:

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
 
// получим опции компонента
$text = mso_get_option('component_text_and_image_text', 'templates', '');
$img = mso_get_option('component_text_and_image_image', 'templates', '');
$align = mso_get_option('component_text_and_image_align', 'templates', 'left');
 
// выводим
echo '
<div class="component-text-and-image">
	<div class="component-text-and-image-wrap">'
	. '<img class="' . $align . '" src="' . $img . '" alt="" title="">'
	. $text 
	. '<div class="clearfix"></div></div><!-- div class=component-text-and-image-wrap -->
</div><!-- div class=component-text-and-image -->';

Обратите внимание, как мы указываем выравнивание изображения. В стилях Default-шаблона есть хелпер img.left и img.right. Таким образом нам нет необходимости их отдельно задавать. В конце блока мы прописываем div.clearfix с тем, чтобы корректно завершить обтекание текстом картинки.

Теперь, если обновить страницу сайта, мы увидим наш блок.

Настраиваем оформление

Для компонента необходимо прописать хотя бы базовые css-стили. Делается это в файле text-and-image.css в каталоге components/css/.

div.component-text-and-image {
	font-family: Georgia; 
	font-size: 14pt; 
	font-style: italic; 
	color: #404040;
}
div.component-text-and-image-wrap {
	margin: 5px 10px; 
	padding: 10px; 
	border-bottom: 1px silver dashed; 
}
div.component-text-and-image h3 {
	font-size: 20pt; 
	font-weight: normal; 
}
div.component-text-and-image img {
	padding: 3px; 
	border: 1px silver solid;
}

Поскольку для заголовка мы использовали H3, то для него прописали отдельный стиль.

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

Итоговый результат