Главная › Интернет › Image cms шаблоны. Адаптируем шаблон из магазина Templatemoster под ImageCMS. Что касается призов

Image cms шаблоны. Адаптируем шаблон из магазина Templatemoster под ImageCMS. Что касается призов

Система ImageCMS Shop Premium представляет собой особую сборку с расширенными возможностями для самых требовательных клиентов.

Основные аспекты развития версии 4.4
модульность - написали как функционал для удобного создания модулей в дальнейшем;

работа с изображениями;
оптимизация шаблона.

Модернизация системы
изменение подхода к формированию изображений продукта;
изменение размера изображений и применение водного знака;
создание нового заказа менеджером;
управление сортировкой продуктов в каталоге.
Новые модули ImageCMS
“Узнать о снижении цены” (версия ImageCMS Shop);
“Авторизация через социальные сети” (версия ImageCMS Corporate & ImageCMS Shop);
“Нашли дешевле” (версия ImageCMS Shop);
“Управление баннерами” (версия ImageCMS Corporate & ImageCMS Shop).
Подробнее об улучшениях системы
Изменен подход к формированию изображений продукта
Отныне можно создавать необходимое количество изображений разного размера. Используйте эту возможность, чтобы обогатить магазин медиа-контентом.

Изменение размера изображений и применение водяного знака.

Если в ходе работы вы решили изменить водяной знак либо применить размер, это будет проще сделать с функцией Resize:

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

Взяв во внимание идеи нашего сообщества, мы изменили способ создания заказа из панели администрирования. Заменив пошаговую стратегию создания нового заказа (операции с момента поступления звонка вашему менеджеру и формирования его в админпанели), на более наглядную схему “All-on-Desk”, решили проблему последовательности поступления информации менеджеру.

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

Среди дополнительных функций предоставлена возможность изменить порядок вывода, название на сайте, указать подсказку и так же изменить видимость опции на сайте.
Новые модули ImageCMS
(версия ImageCMS Shop)

Модуль позволяет добавить кнопку "Следить за ценой" для товара в категории, на странице товара или бренда. Пользователь указывает свой е-mail, на который и придет уведомление, если цена на продукт изменится в сторону меньшего. Так же реализована возможность управлять товарами в слежении из личного кабинета.

Модуль доступен пользователям бесплатно с магазина расширений
Авторизация через социальные сети (версия ImageCMS Corporate & ImageCMS Shop)

Теперь вашим клиентами не нужно создавать еще один аккаунт на вашем сайте для того, чтобы себя идентифицировать - достаточно будет всего лишь выбрать один из предоставленных сервисов: Google, VKm Facebook или Яндекс.

Модуль “Нашли дешевле” (версия ImageCMS Shop)

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

На этом список не заканчивается. Магазин дополнений также пополнили
модуль “Управление баннерами” для сборок как Corporate, так и Shop;
модуль “Расширенные новости” позволяет управлять отображением новостей на определенной категории товаров, не выводя их на других. Теперь возможны уникальные новости на каждой категории;
возможность распечатать товар будет предоставлена соответствующим модулем, который пока в бета-версии, но скоро мы сможем анонсировать стабильную версию;
так же подготовлено два псевдо-модуля для разработчиков. Это модуль “Оповещение о новом комментарии”, который является вполне функциональным модулем и подробно документированным руководством по созданию своего расширения. Так же доступен “Каркас модуля” - программный каркас для разработчиков модулей. Интересно узнать больше о возможности создания собственного расширения? Читайте подробное .
Другие изменения, коснувшиеся этого релиза
правки настроек пунктов меню;
добавлен класс mediaManager для управления изображениями;
доработки средств автоматизации: 1С и СSV;
улучшено формирование тегов типа no-index и canonical, другие моменты, касающиеся SEO;
изменена работа дополнительных полей типа “заказ” и “профайл”;
добавлена обработка ссылок-дубликатов (содержащих двойной слеш “//”, и учет регистра);
улучшен список сравнений;
добавлена возможность управления дополнительной валютой на фронтальной части сайта;
работы с шаблоном по обеспечению кроссбраузерности.

Система ImageCMS продолжает устраивать конкурсы. Буквально недавно рассказывал про а вчера стартовал еще один . В этот раз больше для дизайнеров и всех тех вебмастеров, которые знакомы с фотошопом + созданием сайтов. Здесь пригодятся и те, и другие навыки. Суть конкурса — вам нужно нарисовать шаблон для системы управления сайтами ImageCMS Corporate.

ImageCMS Corporate — это бесплатная Open Source система для разработки веб-проектов, которая включает в себя все основные функции: меню, пользователи, мультиязычность, формы, комментарии, кэширование, пользователей, галерею и т.п. Она достаточно проста в использовании и удобна. Скачать ее можно на официальном сайте. Кстати, в рунете заняла шестое по популярности место после таких монстров как WordPress, TYPO3, Joomla, Drupal.

Для конкурса нужно сделать 2 вещи — собственно, создать шаблон, а потом его «зарегистрировать». Звучит немного сложновато, но если пошагово выполните все инструкции, то проблем не возникнет. Итак:

Этап 1. Создание шаблона для ImageCMS Corporate

1. Скачиваете с официального сайта самую последнюю сборку ImageCMS Corporate.
2. Нужно буде создать на локальном компьютере виртуальный сервер — используете для этого XAMPP или Денвер (в статье есть про установку)
3. Изучить инструкцию создания шаблона .
4. Создайте свой шаблон, переделав базовый вариант. Таким образом, вы должны будете вносить изменения и свои правки только в текущий шаблон — templates/default. При этом по желанию можете изменить структуру, но данные менять нельзя.

В результате работы у вас должен получится архив базового шаблона — папки templates/default, который будете предоставлять на суд жюри. В этот же архив нужно включить скриншоты дизайна вашего шаблона. Основные критерии в конкурсе — качество дизайна и верстки.

Этап 2. Регистрация шаблона

1. Первым делом регистрируетесь на сайте ImageCMS .
2. Входите в учетную запись, где находите «Мой магазин» и кликаете по кнопке «Добавить».
3. Добавляете свой шаблон, при этом крайне желательно прикрепить парочку скриншотов + обязательно в начале описания укажите «На конкурс шаблонов». Желательно чтобы в архиве шаблона также были скриншоты.
4. Дальше остается следить когда ваш шаблон появится в магазине дополнений. Увидели? — размещаете ссылку на него в соц.сетях или своем блоге. На этом все.

После этого просто ожидаете результатов конкурса. Старт его был дан 3.06, продлится прием шаблонов ImageCMS до 28.08.13. Итоги огласят 2.09.

Что касается призов

1 место: $400 + 1 лицензия ImageCMS Shop Premium (которая стоит 600 баксов), а также 5000 рублей на счет фотобанка Лори. Кроме того, получите 50% скидки на любой шаблон в TemplateMonster Russia и 50% на сервис Jivosite. Кстати, в блоге я как-то уже писал. Плюс была статья — есть там хорошие шаблоны.

2 место: $300 + также одна лицензия ImageCMS Shop Premium. По скидкам — 50% на шаблон в TemplateMonster Russia и 30% на Jivosite.

3 место: $150 + также одна лицензия ImageCMS Shop Premium. Скидки — 30% на Jivosite и 20% на шаблон TemplateMonster.

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

Процесс адаптации шаблона под ImageCMS.

Основой шаблона на ImageCMS Corporate стал шаблон . Кроме того при его создании была использована по созданию корпоративного сайта на базе ImageCMS Corporate. На ее основных положениях мы сейчас останавливаться не будем, а рассмотрим главные этапы создания нового шаблона.
В базовом шаблоне ImageCMS Corporate, в отличие от верстки Templatemonster, стали доступными некоторые страницы. В результате этого в новом шаблоне имеются некоторые ограничения.
Главное меню не может содержать более 5 пунктов;
не поддерживается фотогалерея;
ограничения на странице блога (последние комментарии, теги).
Для создания нового шаблона понадобилось сделать 26 настроек, на что ушло 3 часа. Это был мой первый опыт создания шаблона для ImageCMS, поэтому в дальнейшем, думаю, время можно сократить практически вдвое.
Настройки:
1. В папке templates создаем папку шаблона, которую называем motheme (как шаблон на templatemonster). В нее копируем содержимое дефолтного шаблона (папка templatesdefault)
2. В папки: css, js, images загружаем скрипты, стили и рисунки, которые будем использовать при верстке вместо тех, которые применяются в дефолтном шаблоне.
3. Весь html-код с файла верстки index.html копируем в main.tpl, из дефолтного шаблона оставляем только meta-теги.
4. Для корректного вызова классов, скриптов и рисунков дописываем к пути вызова переменную {Theme}, к примеру

5. В администраторской части заменяем в конфигурации сайта дефолтный шаблон на новосозданный.
6. Ссылку на главную страницу {site_url("")} ставим на логотип в файле main.tpl.
7. Переменные, отвечающие за вход/регистрацию, вставляем в правый верхний угол шаблона в файле main.tpl
8. Код, вызывающий главное меню сайта {load_menu("main_menu")} вставляем в файл main.tpl. Для того, чтобы меню отображалось согласно шаблону, в папке main_menu вносим правки в файл main_menulevel_0container.tpl
9. В разделе “Меню-Главное меню” администраторской части уменьшаем количество пунктов до 5 (поскольку больше шаблон не поддерживает). Убираем также галерею (шаблоном не поддерживается).
10. Чтобы слайдер выводился только на главной странице, ставим возле него в файле main.tpl условие {if $page_type == "main"}
11. Поскольку структура главной страницы несколько отличается от структуры внутренних, в файле main.tpl в месте вывода контента главной страницы ставим условие

12. В файл page_full.tpl для отображения страниц согласно макету вставляем необходимый html-код.
13. Заходим в администраторскую часть и убираем отображение комментариев на главной странице.
14. Новости компании отображаются при помощи виджета news, поэтому правим html-код в папке widgetsnews.tpl согласно макету. В администраторской панели уменьшаем количество новостей в настройках этого виджета до 2-х для правильного их отображения.
15. Для отображения продукции на главной странице создаем дополнительный виджет, который называем product_main, тип “Последние новости”. В настройках указываем отображение 4-х новостей и правим отображение в файле widgetsproduct_main.tpl. Затем ставим в нужное место шаблона при помощи блока: {widget("product_main")} .
16. После этого в файле main.tpl вставляем в футер текст для клиентов.
17. Вставляем нижнее меню в файл main.tpl при помощи блока:{load_menu("bottom_menu")}. Заходим в редактирование меню “Нижнее меню” в админке, указываем использование шаблона bottom_menu. Правим файл bottom_menulevel_0container.tpl в папке bottom_menu таким образом, чтобы меню отображалось в согласии с шаблоном.
18. Вставляем ссылки на социальные сети в файле main.tpl в футере.
19. Изменяем контактную информацию файле main.tpl в футере.
20. Вставляем ссылки на лого и копирайт в файле main.tpl в футере.
21. В файле main.tpl в том месте, где у нас отображается контент главной страницы с помощью переменной {$content}, ставим дополнительное условие, чтобы в разделе “Продукция” справа отображался виджет со всеми продуктами. После этого настраиваем сам виджет продуктов в файле widgetsproduct_all.tpl.
22. В файле category.tpl настраиваем отображение категории “Продукция”.

23. В файле application/modules/feedback/templates/feedback.tpl. согласно дизайну настраиваем отображение обратной связи.
24. В файле main.tpl в месте отображения контента главной страницы при помощи переменной {$content} выставляем доп. условие отображения всех дополнительных категорий “Блога” в разделе “Блог” с правой стороны.
25. В файле blog.tpl. настраиваем отображение раздела “Блог” в соответствии с дизайном.

26. В файле news.tpl. настраиваем отображение раздела “Новости” в соответствии с дизайном.
Шаблон для ImageCMS Corporate завершен и готов к использованию. Также на его основании можно делать и другие шаблоны для своих целей.

Как уже говорил в прошлом посте, последнее время я достаточно плотно работаю с Image CMS. Для тех, кто вырос из WordPress, связываться с Joomla не хочет, но тем ни менее желает получить функциональную open source систему управления контентом для корпоративного сайта, эта 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’];} ,

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

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

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

Теперь главный шаблон 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} - миниатюра

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

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

За основу разработки шаблона на ImageCMS Corporate был взят шаблон http://www.templatemonster.com/ru/website-templates-type/43798.html . Также при создании данного шаблона использовалась .

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

Поскольку в верстке Templatemonster были недоступны некоторые страницы, которые доступны в базовом шаблоне ImageCMS Corporate, в результате шаблон получил несколько ограничений:

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

В сумме процесс создания шаблона потребовал 3 часа рабочего времени (здесь стоит учесть, что это — первый мой шаблон для ImageCMS и я думаю, что в будущем можно было бы сократить до 1,5-2 часов). В целом, для его создания пришлось сделать 26 различных настроек, о которых я напишу ниже.

1. Создаем папку шаблона в папке templates, называем ее motheme (как назывался шаблон на templatemonster), копируем туда содержимое дефолтного шаблона с папки templatesdefault.

2. Загружаем все рисунки, стили, скрипты, которые используются в верстке вместо применяемых в дефолтном шаблоне в соответствующие папки: css, js, images.

3. Открываем файл main.tpl и копируем в него весь html-код с файла верстки index.html, оставляем только meta-теги, которые используются в дефолтном шаблоне.

4. Для всех рисунков, скриптов, классов, которые вызываются в шаблоне, дописываем к пути вызова переменную {Theme}, к примеру

, чтобы они корректно вызывались для данного шаблона.

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

7. В файле main.tpl вставляем в правый верхний угол шаблона переменные, которые отвечают за вход/регистрацию.

8. В файле main.tpl вставляем код, который вызывает главное меню сайта {load_menu(‘main_menu’)}. Далее заходим в папку main_menu и правим файл main_menulevel_0container.tpl, чтобы меню отображалось согласно шаблону.

9. В администраторской части в разделе “Меню-Главное меню” скрываем ненужные пункты, уменьшаем их общее количество до 5 пунктов, так как больше шаблон не поддерживает, в том числе убираем и галерею, поскольку она также не поддерживается шаблоном.

10. В файле main.tpl ставим условие {if $page_type == ‘main’} возле слайдера, чтобы он выводился только на главной странице.

11. В файле main.tpl в том месте, где нужно выводить контент главной страницы, вывод которого немного отличается от структуры других внутренних, ставим условие

12. Правим файл page_full.tpl, который отвечает за отображение страниц, в нем вставляем необходимый html-код для отображения страниц согласно макету.

13. В администраторской части убираем отображение комментариев для страницы на главной.

14. Поскольку новости компании отображаются с помощью виджета news, заходим в папку widgetsnews.tpl и правим согласно макета html-код. Дополнительно в администраторской панели в настройках данного виджета уменьшаем количество новостей с 3 до 2, чтобы он правильно отображался согласно макету.

15. Создаем дополнительно виджет для отображения продукции на главной. Называем его product_main, тип “Последние новости”, в настройках указываем отображать 4 новости, далее правим отображение в файле: widgetsproduct_main.tpl. После этого вставляем в нужное место в шаблоне, с помощью блока: {widget(‘product_main’)} .

16. В файле main.tpl вставляем в футер произвольный текст для клиентов.

17. В файле main.tpl вставляем нижнее меню с помощью блока: {load_menu(‘bottom_menu’)}. В админке заходим в редактирование меню “Нижнее меню” и указываем, чтобы использовался файл шаблона bottom_menu. После этого правим в папке bottom_menu файл bottom_menulevel_0container.tpl, чтобы меню отображалось согласно шаблона.

19. В файле main.tpl в футере меняем контактную информацию.

20. В файле main.tpl в футере ставим копирайт и ссылку на лого.

21. В файле main.tpl в том месте, где у нас отображается контент главной страницы с помощью переменной {$content}, ставим дополнительное условие, чтобы в разделе “Продукция” справа отображался виджет со всеми продуктами. После этого настраиваем сам виджет продуктов в файле widgetsproduct_all.tpl.

22. Делаем настройку отображения категории “Продукция” в файле category.tpl

23. Делаем настройку отображения обратной связи согласно дизайна в файле application/modules/feedback/templates/feedback.tpl.

24. В файле main.tpl в том месте, где у нас отображается контент главной страницы с помощью переменной {$content}, ставим дополнительное условие, чтобы в разделе “Блог” справа отображались все дополнительные категории “Блога”.

25. Делаем настройку отображения раздела “Блог” согласно дизайна в файле blog.tpl

26. Делаем настройку отображения раздела “Новости” согласно дизайна в файле news.tpl.

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