Фотоальбом в Netcat

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

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

Интегрировать Lightbox не просто, а очень просто. Этот нехитрый процесс описан на сайте проекта. Если кратко:

  • Скачиваете библиотеку и размещаете ее в корневой директории сайта (да, собственно, где угодно, только пути потом нужно будет подправить).
  • Прописываете в макете дизайна, в header’e, линки на 3 JS-файла из библиотеки и один CSS-файл.
  • Средствами Netcat создаете компонент, который будет формировать строку для отображения фотографии и ссылку с нее. Подключаете компонент к разделу. Все.

Чуть подробнее.

Вот, что в Netcat действительно хорошо, так это работа со списками. Вы определяете какой-нибудь список (создаете компонент), определяете, какие поля будут характеризовать элемент этого списка, и настраиваете шаблон вывода. Например, нужно вам вывести на сайте список сотрудников. Создаете список (компонент) «Сотрудники», определяете набор и тип полей, который будет описывать сотрудника (ФИО, пол, фотография, должность и т.д.), определяете верстку шаблона — и вперед. Пусть оператор сайта ими дальше рулит. Если потребуется, набор и тип полей можно будет изменить впоследствии.

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

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Это один элемент списка. Соответственно, нам нужно создать компонент Фотоальбом, и определить для него поля:

  • Большая фотография (поле типа file)
  • Фотография-preview (поле типа file)
  • Описание фотографии (строка)

Да, собственно, и все. Это наверное самый простой компонент, который можно придумать. Шаблон вывода «объекта в списке» (в терминологии Netcat) может принять, например, такой вид:

<div class='photos'><a href='$f_pic_view' rel='lightbox[1]' title='$f_pic_desc'><img src='$f_pic_preview'/></a></div>

Пример работающего решения.

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

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

This entry was posted in Верстка, Технологии and tagged , , . Bookmark the permalink.

4 Responses to Фотоальбом в Netcat

  1. Сергей Сергей says:

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

  2. Оксана Оксана says:

    Все просто. Действительно, Lightbox нельзя использовать в коммерческих целях, а редактор можно.

    • Странно. Перед публикацией я специально просмотрел лицензию, но не нашел там соответствующих ограничений. Плохо искал?
      Да и на сайте разработчика явно указывается, что коммерческое использование библиотеки допускается. У меня сложилось впечатление, что вам было бы достаточно оставить упоминание о разработчике в js-файлах. А в идеале — разместить на сайте ссылку (в описании компонента) и перечислить 100 долларов. :)
      Счастливых людей на Земле стало бы больше.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

*


Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>