Помощь начинающим веб
разработчикам

Мини галерея для сайта под Drupal 7. Модуль Gamma.

24.02.2014

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

  • Самостоятельная установка/настройка данного модуля администратором сайта
  • Возможность переносить данный функционал на другие сайты, под управлением Drupal 7.
  • Необходимость полей для загрузки изображений и полей для вставки видео с vimeo.com и youtube.com

Так же были и другие требования, как например:

  • Возможность скрывать поля изображений и видео в слайдер
  • Поддержка touchscreen
  • Открытие файлов и видео с сервисов в модальных окнах
  • И т.д

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

Результат работы модуля по умолчанию

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

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

Как устанавливать данный модуль – думаю и без меня знаете, не будем на этом останавливаться. После активации модуля Gamma Gallery (кстати находится он в категории модулей «Other» ), по пути «Структура -> Типы материалов» у вас будет доступен новый тип материала – Gamma Gallery

Доступен новый тип материала Gamma Gallery

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

По умолчанию данный тип материала имеет уже два встроенных поля:

  • Загрузка изображений (Images for Gallery)
  • Ссылка на видео (Video for Gallery)
Поля доступные по умолчанию

Так же после установки модуля Gamma Gallery – Вам станут доступные два новых пресета стилей изображений:

  • Gamma-large
  • Gamma-small
Доступны новые пресеты стилей изображений

Которые вы так же сможете изменить при необходимости.

Хочу заметить, что после удаления модуля Gamma Gallery, данные пресеты не удаляются. Это сделано специально, так как данные пресеты могут использоваться другими модулями сайта.

Теперь идем по пути «Структура -> Типы материалов -> Gamma Gallery -> Управление отображением», где для поля «Images for Gallery», для необходимых вам форм вывода, необходимо изменить формат. В моем случае я изменяю формат для тизера (тип вывода, по умолчанию уже выставлен как fancybox), в качестве формата должны выступать наши новые пресеты

Изменили формат вывода для поля Images for Gallery

Когда вы устанавливали модуль fancybox, то вы должны были изменить версию jQuery не ниже, чем 1.7, если нет, то сделай те это.

Теперь нам лишь осталось вписать селектор для модуля fancybox и на этом с основными настройками будет покончено. Для этого идем по пути «Конфигурация -> Интерфейс пользователя -> fancyBox», и в разделе «Настройки» в поле «Селектор fancyBox» необходимо вписать вот такую конструкцию:

  1. #gamma .desc a
Вписали селектор fancybox

Не забываем сохранить настройки. Теперь можно приступить к добавлению материала. Идем по пути «Добавить содержимое -> Gamma Gallery» и заполняем поле «Images for Gallery»

Загрузили изображения

Сохраняем и смотрим что у нас получилось.

Результат работы поля Images for Gallery

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

Теперь давайте расскажу вам о настройках данного модуля. После его активации, вам так же стал доступен новый раздел «Gamma Gallery» (не путайте с типом материала Gamma Gallery), где вы можете настроить свой вывод для полей «Images for Gallery» и «Video for Gallery». Данный раздел находится по пути «Конфигурация -> Интерфейс пользователя»

Настройки Gamma Gallery

В данном разделе вы можете выбрать настройки для любого из типов полей. В качестве настроек выступают такие параметры

  • Скрывать файлы пользователя в слайдер
  • Включить автопрокрутку слайдов (зависит от первого параметра)
Настройки полей

Данные настройки доступны так же и для поля «Video for Gallery». Давайте отключим скрытие файлов в слайдер для поля «Images for gallery» и посмотрим, что у нас из этого получилось.

Отключили скрытие файлов для поля Images for Gallery

Как мы видим, теперь все наши файлы расположены в ряд.

Теперь давайте рассмотрим, как работать с полем «Video for Gallery». Так как через данное поле нам необходимо выводить видео контент, то первоначально нам нужно включить дополнительный плагин fancyBox, который называется «Media Helper». Для этого идем по пути «Конфигурация -> Интерфейс пользователя -> fancyBox», и в разделе «Helpers (Помощники)» ставим галочку напротив «Enable the media helper (Включить media helper)»

Подключили дополнительный плагин fancyBox

И сохраняем настройки. Теперь давайте добавим видео.

Добавление видео с видео-хостинга vimeo.com

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

Добавили видео с сайта vimeo.com

Сохраняем и смотрим что получилось.

Добавленное видео с vimeo.com

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

Добавление видео с видео-хостинга youtube.com

По сути, добавление для youtube, практически не отличается от добавления видео с vimeo. Вся сложность может оказаться при формировании правильной ссылки. Если вы хоть раз выводили видео во фреймы с данного хостинга, то наверняка знаете, что ссылка на видео должна строиться по принципу

  1. youtube.com/embed/id_видео

ID видео можно узнать в адресной строке браузера или кликнуть по кнопке «Поделиться» под необходимым вам видео

Узнаем ID видео для сайта youtube.com

Таким образом ссылка на данное видео будет выглядеть как:

  1. youtube.com/embed/ui5hbO617cM
Добавленное видео с youtube.com

Сохраняем и смотрим результат.

Добавили видео с youtube.com

Опять же видим, что у нас появился значок данного сервиса и само видео при клике, открывается в модальном окне fancybox.

Как вы наверное заметили, что для поля «Video for Gallery» нет слайдера, на самом деле он есть, просто отключен по умолчанию.

Хочу заметить, что количество отображаемых элементов в любом из полей зависит от ширины блока в котором они расположены.

Давайте добавим еще несколько видео и включим скрытие в слайдер для данного поля и посмотрим, что у нас получилось.

Включили скрытие файлов для поля Video for Gallery

Как мы видим, все видео файлы у нас скрылись в слайдер. Просьба, если вы нашли какой-либо баг при эксплуатации данного модуля – напишите в комментариях.

СКАЧАТЬ МОДУЛЬ GAMMA (версия 1.0)

Скачать модуль gamma 1.0.zip
Узнавай о новых статьях сайта - первым. Просто подпишись на рассылку.

Комментарии (18)

Profile picture for user Артур
surfbox
03.04.2014

Павел, здравствуйте. Спасибо за Ваш труд. Очень много полезного. У меня вопрос по галерее. Всю голову сломал уже. Поменял пресет gamma-small на 125x125 и в следствие этого некорректно отображается transition в chrome и яндекс,(в firefox все исправно работает) помогите пожалуйста разобраться, если не трудно.

Profile picture for user Артур
surfbox
03.04.2014

При увеличении размера, картинка дергается, а не плавно переходит

Profile picture for user pantey
pantey
04.04.2014

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

Profile picture for user Артур
surfbox
07.04.2014

Повесил glaze-collection.ru

Profile picture for user Артур
surfbox
07.04.2014

https://www.dropbox.com/s/v9i66a9pd1bzf4x/gamma.css

Profile picture for user Артур
surfbox
07.04.2014

Это css файл, может я тут что то намудрил, посмотрите пожалуйста, в сети есть статьи по неправильному отображению свойства transition, но очень мало и к своему случаю ну никак не получается применить

Profile picture for user pantey
pantey
07.04.2014

вот этот код в gamma.css

.gamma ul li:hover img{ 
    width:104%; 
    height:104%; 
} 

замени на этот

.gamma ul li:hover img{ 
   transform:scale(1.4, 1.4);
   -o-transform:scale(1.4, 1.4);
  -webkit-transform:scale(1.4, 1.4);
  -moz-transform:scale(1.4, 1.4);
} 

должно помочь.

Profile picture for user Артур
surfbox
07.04.2014

Спасибо Павел, но как всегда это и бывает одно лечится, другое колечится) Теперь передо мной две "неразрешимые" задачи. Первое-это то что теперь при наведении изображение принимает квадратную форму(в момент перехода), а второе я вообще понять не могу, куда делась внутренняя окружность с прозрачностью. Поменял в стилях уже все что можно, может ты посмотришь еще разок сайт.

Profile picture for user pantey
pantey
09.04.2014

Я то могу посмотреть, только давай ключи от сайта, будем на месте выяснять... Ключи на email...Здесь не стоит размещать... :)

Profile picture for user Артур
surfbox
09.04.2014

Отправил, Павел, спасибо тебе. Посмотри пожалуйста как время будет.

Profile picture for user pantey
pantey
11.04.2014

сам поправить не могу, попробуй так

.gamma ul li:hover .desc{ 
opacity:1;
} 

должно вернуть описание...

Profile picture for user Артур
surfbox
12.04.2014

https://www.dropbox.com/s/v9i66a9pd1bzf4x/gamma.css

Вот css Павел, там opacity уже прописано было, почему и остается загадкой, что не отображается. Жопа какая то. Понять бы хоть куда копать....А jquery кстати роли не играет для работы модуля? У меня default стоит 1.5, я все голову тоже ломаю, чтобы drupal правильно работал при последних версиях jquery. Сложновато дается)

Profile picture for user Артур
Денис
23.04.2014

А как убрать окружность у картинки ? Необходим простой прямоугольник.

Profile picture for user Артур
Денис
23.04.2014

Спасибо, уже не нужно, я просто поменял css.

Profile picture for user Артур
Александр
04.07.2014

Здравствуйте, Павел! Если я правильно понял, то данный модуль работает только с одним типом материала? т.е. Gamma Gallery, попробовал создать другой тип материала и добавить туда поля для галлереи и ничего не заработало... Подскажите как поправить это неудобство?

Profile picture for user pantey
pantey
04.07.2014

ну по сути можно, только проще написать с нуля. Ибо, данный модуль лишь создает отдельный тип материала и далее через темизацию для данного типа материала формирует вывод полей. А в вашем же случае необходимо написание модуля с использованием Field API.

Profile picture for user Артур
Александр
04.07.2014

Печально конечно, думал сойдет правкой парочки строчек. Не программер я к сожалению...

Profile picture for user Артур
анонимус
29.06.2015

Привет всем. Вопрос такой: как прикрутить в этом модуль блок. Мне тип материала не очень подходит

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

- Оповестить о новом комментарии.
- Все комментарии
- Только мои комментарии