Создание сайта
Верстка шаблона для Image CMS

Верстка шаблона для Image CMS

Как уже говорил в прошлом посте, последнее время я достаточно плотно работаю с Image CMS. Для тех, кто вырос из WordPress, связываться с Joomla не хочет, но тем ни менее желает получить функциональную open source систему управления контентом для корпоративного сайта, эта CMS подойдет, как нельзя кстати. Движок набирает обороты, становится популярным, но есть одна загвоздка. На сегодняшний день, кроме дефолтного шаблона не существует ни одного адекватного шаблона для Image CMS. На официальном форуме эта тема постоянно поднимается, но бесплатных шаблонов как не было, так и нет.
На самом деле сверстать свою тему для Image CMS достаточно просто, что я и постараюсь сегодня продемонстрировать.

Верстка шаблона для Image CMSДля того, чтобы освоить верстку под Image CMS необходимо познакомиться с файлами шаблона, используемых при генерации сайта. На самом деле тут нет ничего сложного, вот основные файлы:

main.tpl — это основной шаблон нашего будущего сайта, он отвечает за генерацию header, footer, сайдбара и прочих элементов.
category.tpl — шаблон категории. Редактируя его мы сможем настроить отображения страниц разделов нашего сайта.
page_full.tpl — шаблон внутренней страницы.
homepage.tpl – шаблон для главной страницы сайта.

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

Итак, я бесплатно скачал симпатичный html шаблон, который мы будем натягивать на Image CMS. Да простят меня templatemonster, с которыми я сотрудничал перед Новым годом, так как шаблон, как оказалось позже, продается на их сайте.

Начнем с main.tpl
После открытия тега < head > прописываем правило

{$page_type = $CI->core->core_data[‘data_type’];} ,

далее подставляем переменные {$site_title}, {$site_description}, {$site_keywords}.

Подключаем обработку шаблона, прописываем title, description, keywords

Подключим таблицы стилей css и javascript’ы
Убедимся, что все файлы находятся в соответствующих директориях. Для удобства обозначаем пути к файлам папки шаблона через переменную {$THEME} .
Например,

<link rel=’stylesheet’ type=’text/css’ href='{$THEME}/css/style.css’/>

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

Вставляем меню в header (шапку):
Просто заменяем имеющиеся ссылки на {load_menu(‘main_menu’)} — это означает, что здесь мы будем загружать меню с названием ‘main_menu’, сформированное в админке.

ем меню в header (шапку)

Далее добавим правила, по которым будет генерироваться главная страница:
{if $page_type == ‘main’} (если тип страницы «главная»),  то запускаем слайдер:

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

Не забываем редактировать адреса картинок, а все javascript обрамлять {literl}….{/literl}) !

Далее вырежем все, что идет в шаблоне между слайдером и подвалом и вставим в файл homepage.tpl, а вместо вырезанного укажем {$content} и оставим теги форматирования общие для всех страниц сайта.

Верстка главной страницы Image CMS

Теперь главный шаблон main.tpl готов, а к homepage.tpl мы вернемся чуть позже.
А пока оформим категории.

Оформление категорий

Мы «одели» в html-код регулярные выражения, присущие категориям Image CMS:
{$category.name} — название категории
<а hrеf=»{site_url($page.full_url)}»>{$page.title} — ссылка на страницу
{$page.prev_text} — предварительное содержание страницы
Также мы внедрили дополнительное поле {$page.field_image} — картинку-миниатюру для страницы, которая будет отражаться в категории (это дополнительное поле необходимо подключать через админку).

Теперь настроим отображение внутренних страниц. Займемся файлом page_full.tpl.
Тут еще проще — оперируем лишь:
{$page.title} — заголовок страницы
{$page.full_text} — полное содержание страницы
{$page.field_image} — миниатюра

Настройка page_full.tpl

После того, как мы задали дизайн внутренним страницам и категориям, вернемся к файлу homepage.tpl и займемся оформлением главной страницы. Я специально оставил эту работу напоследок, так как в файле homepage.tpl мы будем работать с виджетами. Виджеты необходимо заранее создать и настроить через админку! Дабы не усложнять процесс разработки я пошел простым путем: использовал лишь два виджета: news и works, все остальное пространство между слайдером и виджетами пустил под отображение контента.

Виджет ‘works’ отображает последние три записи с миниатюрами из указанной категории.

Виджет 'works'

С ‘news’ пришлось немного повозиться: достаточно сложно запихать теги и в формат вывода даты. Поэтому решил пойти обходным путем:

Настройка виджетов Image CMS

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

Виджет news
Собственно, на этом верстка шаблона для Image CMS закончена. Рекомендую всем желающим скачать получившийся шаблон и протестировать на своем сайте.

Скачать шаблон для Image CMS

Официальный сайт Image CMS — http://www.imagecms.net/

Шрифт, подключенный в шаблоне латинский, кириллицу этот шрифт не поддерживает. Жаль, конечно, но ничего  не поделать.

Шаблон представлен в ознакомительных целях, права на его использование принадлежат правообладателям.

Всем успехов и до новых встреч на страницах блога adminpab.ru!

Комментариев: 8

  1. Респект за статью.
    В своё время, самостоятельно изучал файлы вордпресса, сам натягивал, если бы попалась такая статья, был бы рад :)

    Продолжать писать о ImageCMS планируешь?
    Думаю интересно бы, выкладывать какие-нибудь кейсы о разработке нестандартных фич, для всяких специфических сайтов типа инет магазина или корпоративного…

    1. Спасибо за отзыв.
      Да планирую писать про ImageCMS еще. Движок мне нравится, последнее время делаю сайты именно на нем, постоянно приходится реализовывать какие-то нестандартные идеи. Как раз готовлю такой материал, но пока маловато его дня отдельного поста, плюс как всегда со временем беда….

  2. Ничего не получилось почему-то , кроме слйдера ничего не выводится , ни меню , ни сайдбаров. Не могу с этой cms разобраться : (

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

  4. А как в админке рядом с полем для картинки страницы сделать поле, в которое прописывать атрибут alt для каждой картинки?

Отставить комментарий

Ваш электронный адрес не будет опубликован.Обязательные для заполнения поля отмечены *

Я не спамер и не робот!

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