Создайте адаптивную галерею Colorbox в Drupal 8 (с наложенными надписями)

  1. Шаг 1. Установите модули и библиотеки
  2. Шаг 2. Создать контент для галереи
  3. Шаг 3. Создать стиль изображения
  4. Шаг № 4. Создать вид
  5. Шаг № 5. Поместите блок
  6. Шаг № 6. Редактировать вид
  7. Шаг № 7. Добавить CSS

Участник OSTraining спросил, как создать галерею с Colorbox в Drupal 8.

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

Шаг 1. Установите модули и библиотеки

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

Шаг 2. Создать контент для галереи

  • Перейдите в Структура> Типы контента. Создайте новый тип контента, специально для этой галереи

Создайте новый тип контента, специально для этой галереи

  • Создайте поле изображения, которое прикреплено к вашему новому типу контента.
  • Кроме того, поскольку это будет просто галерея, я удалил поле Body из этого типа контента.

Кроме того, поскольку это будет просто галерея, я удалил поле Body из этого типа контента

Наконец, создайте некоторый контент, который вы можете использовать для проверки галереи. Вы можете ввести некоторые изображения вручную или использовать функцию «Создать контент» в модуль Devel ,

Шаг 3. Создать стиль изображения

  • Перейдите в Конфигурация> Стили изображений

Перейдите в Конфигурация> Стили изображений

  • Создайте стиль изображения с эффектом Масштаб и обрезка. Я выбираю 300 пикселей в ширину и 300 в высоту, но вы можете выбрать любой размер, который вы хотите для своей галереи.

Я выбираю 300 пикселей в ширину и 300 в высоту, но вы можете выбрать любой размер, который вы хотите для своей галереи

Шаг № 4. Создать вид

  • Перейдите в Структура> Виды> Добавить новый вид.
  • Выберите новый тип контента и выберите тип «Галерея».
  • Выберите вы выводите свой блок в виде просмотра, а не страницы.
  • Выберите «неформатированный список» из 9 «Предметов на блок»

Выберите «неформатированный список» из 9 «Предметов на блок»

  • Добавьте поле для изображения.
  • В «Настройках формата» добавьте это к «Классу строк», как показано на рисунке ниже: «col-sm-4». Это происходит из темы Bootstrap.

Это происходит из темы Bootstrap

  • Теперь в «Расширенные настройки» для представления добавьте CSS-класс «container-liquid».

Теперь в «Расширенные настройки» для представления добавьте CSS-класс «container-liquid»

Шаг № 5. Поместите блок

  • Перейдите в Структура> Блочная компоновка.
  • Нажмите «Поместить блок» и выберите новый вид / блок.

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

Шаг № 6. Редактировать вид

  • Вернитесь, чтобы редактировать свой вид.
  • Выберите поле «Содержимое: заголовок».
  • В области «Перезаписать результаты» добавьте тег заголовка как {{title}}. Это позволит нам стилизовать и переместить текст заголовка.

Это позволит нам стилизовать и переместить текст заголовка

  • Выберите поле «Содержимое: изображение».
  • Обновите «Formatter», чтобы он стал «Colorbox».
  • Обновите «Стиль изображения для содержимого», чтобы использовать стиль, созданный на шаге 2.

Обновите «Стиль изображения для содержимого», чтобы использовать стиль, созданный на шаге 2

Шаг № 7. Добавить CSS

Теперь, поскольку я назвал представление «Блок галереи», если мы добавим CSS в .view-gallery-block, он будет применять CSS только к этому представлению. Я добавил немного CSS, который позволит заголовку отображаться на изображении в качестве заголовка. Изображение ниже показывает сетку галереи:

Это следующее изображение показывает отдельное изображение во всплывающем окне Colorbox:

Вот CSS, который я использовал:

.view-gallery-block {margin-top: 1em; } .view-gallery-block img {ширина: 100%; граница: 3px solid # 337ab7; обивка: 3px; радиус границы: 10 пикселей; } .view-gallery-block img: hover {border-color: #ddd; } .view-gallery-block a {color: ## 28df35; текстовое оформление: нет; } .view-gallery-block p {margin: 0 0 10px; дисплей: встроенный; положение: относительное; низ: 60 пикселей; слева: 6 пикселей; фон: rgba (17, 17, 17, .5); цвет: #fff; набивка: 0,4em; радиус границы: 10 пикселей; }

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