Программируем галерею в 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.

Написать комментарий

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

Импортируем изображения через wysiwyg

Декабрь 27, 2014 г.

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

Читать

Настраиваем ЧПУ ссылки пейджера в Drupal 7

Июль 19, 2016 г.

Занимаюсь решением ряда SEO задач для сайта на Drupal. Одна из них связана с урлами, генерируемыми пейджером. На самом деле это комплекс задач, ...

Читать

 

Комментарии к «Программируем галерею в Drupal 7»

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



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