Colorbox views множественные изображения

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

В общем, идея в том, есть у нас ноды с полем Изобржения с неограниченным количеством записей. Нужно сделать выборку по каким-то параметрам во вьюхе, отобразить превью первого изображения в нужном нам стиле, но по клику отобразить colorbox.

Конечно, вам понадобятся модули views, libraries, colorbox и colorbox plugin.

$ drush en views libraries colorbox -y

Drush подтянет все зависимости, вам останется только закинуть colorbox plugin в папку libraries.

https://github.com/jackmoore/colorbox/archive/1.x.zip

Порядок действий:

  1. создаем вьюху блок/страница
  2. показать Поля
  3. В полях выбираем поле Изображения
    1. - исключить из вывода
    2. - средство форматирования “colorbox”
    3. - стиль изображения: Thumbnail
    4. - Content image style for first image : no special style
    5. - Colorbox image style: стиль для отображения в попапе.
    6. - Галерея: Одна галерея на материал
    7. - Настройка множественного поля:
    8. - отображать в одну линию
    9. - без разедилителя
    10. - Display 1 value
  4. Выбираем еще раз поле Изображения
    1. - исключить из вывода
    2. - средство форматирования “colorbox”
    3. - стиль изображения: Full
    4. - Content image style for first image : no special style
    5. - Colorbox image style: стиль для отображения в попапе ()
    6. - Галерея: Одна галерея на материал
    7. - Настройка множественного поля:
    8. - отображать в одну линию
    9. - без разедилителя
    10. - all values offset 1 == ставим сдвиг, потому что первым будет стоять изображение которое запускает попап.
  5. Добавляем поле Colorbox: Trigger Colorbox
    1. - поле триггера выбираем то поле, где превью картинки, в нашем примере это field_images.
    2. - всплывающее окно пишем токен поля, где большие изображения. [field_images_1] например, тк field_images мы поставили отображать только одно Изображение – превью.

Ставим блок на страницу или переходим по ссылке на страницу вьюхи и любуемся результатом.

Из поля со множеством картинок мы отображаем первое превьюшкой (thumbnail) при клике на него открывается попап colorbox со всеми изображениями.

Другие решения:

Можно было бы отобразить все изображения и спрятать их по display: none.

Или более приемлемый это в template.php темизацию запилить опять же с помощью display:none.

Или можно написать свой view_mode и уже в нем кастомизировать вывод поля для сущности.

Или заюзать colorbox_field_formatter.

Но вьюхами удобней и быстрее.

UPD: Был приятно удивлен увидев свой мануал на drupal.org https://www.drupal.org/node/1419098#comment-8883415

Комментарии

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