Программируем галерею в Drupal 7

gal-sample

Хотите сделать галерею своими руками, без сторонних модулей в Drupal? Тогда читайте дальше.

Настроим поле для галереи

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

new-gal

При сохранении поля пробегаемся по настройкам. Правилом хорошего тона для меня является настройка пути для сохранения файлов (Каталог файлов), максимальный размер изображений, и разрешите показывать поле для атрибута title — «заголовок» для картинок. Там мы позднее будем размещать подписи для элементов галереи.

st-gl

Но самое важное сейчас сказать, что количество значений — не ограничено.

gal-settings

Итак, у нас есть поле, где картинки галереи хранятся. Теперь все внимание сфокусируем на то как она выглядит. У нас есть два случая отображения картинок в галерее — иконка в общем списке и режим просмотра одного изображения.

Стиль отображения для миниатюры (иконки)

Для иконки нам нужно подготовить стиль. Идем в конфигурацию сайта, виды показа изображений — /admin/config/media/image-styles.

Например, я настроил миниатюры, «вписывающиеся» в квадрат на 210 точек.

style

Теперь переходим в настройки отображения публикации, содержащей наше поле. Я добавил это поле в стандартный тип публикации — page, так что находим настройки вот здесь — /admin/structure/types/manage/page/display.

Жмем на шестеренку для выбора стиля изображения.

view-settings

И подключаем созданный нами ранее стиль — «Иконки в галерее».

set-the-settings

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

Оформление списка картинок

Если сейчас загрузить в наше поле картинки, то они выстроятся вертикально ряд. Вот как то так:

gal-output

Выстроим их в ряд, добавим отступы, тени и что нить на свой вкус :) Пропишем в общий файл со стилями пару правил.

Если вы назвали поле так же как в примере (field_gal), то стили сработают и вы получите вывод картинок как на следующем скриншоте.

gal-output-2

Если у вас идут такие «разношерстные» картинки, то возможно стоит вернутся к стилю отображения и сделать масштабирование с обрезкой в нужный размер. Это уже на ваш вкус.

Подключение и настройка jQuery плагина

Т.к. в состав drupal входит jQuery, то использование расширений и плагинов jQuery — то, что «доктор прописал». Для показа полного изображения я буду использовать fancyBox. Подобных ему плагинов много, вы можете использовать какой то свой. Просто посмотрите, что и как делаю я.

В инфо (.info) файл темы оформления я дописываю необходимые пути к fancyBox плагину и пути к jQuery версии «по свежей», чем та тухлая версия, которая входит в состав ядра Drupal.

Остаётся лишь подключить плагин к нужным контейнерам, т.е. к нашей галерее. Этот код я размещаю в файле шаблона html.tpl.php в секции <head>.

Вот мы и прошли весь этот длинный путь. Задаю себе лишь один вопрос — не отбил ли я охоту у вас писать собственные код. Ведь так заманчиво подобрать и поставить «Левый плагин». :)

На самом деле, мы написали едва ли 30 строк кода + добавили в проект плагин для jQuery.

Мало букафф? Читайте есчо !

Регистрация/авторизация в Drupal по учетке в соц.сетях

Май 12, 2013 г.

Самое не приятное, с чем можно встретиться на многих сайтах - это регистрация учетной записи. Неприятное ощущение усиливается ещё и от контраста - везде ...

Читать

Пакетная загрузка картинок в поле типа ImageField CCK (Drupal)

Декабрь 17, 2011 г.

В wordpress, к примеру, такая возможность уже есть в базовой комплектации движка. А что касается drupal-a, в 7й версии хоть и интегрировали в движок что ...

Читать

 

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: