Создайте адаптивную галерею 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.


Похожие

HTML5 видеоплеер jQuery плагин
... шаг: 0,01, ориентация: «горизонтальный», диапазон: «мин», максимум: $ oVideo [0] .duration, animate: true, слайд: функция () {bTimeSlide = true; }, stop: function (e, ui) {bTimeSlide = false; $ oVideo [0] .currentTime = ui.value;}});};}; // раздел событий $ oPlay.click (function () {$ oVideo [0] .play (); $ oPlay.hide (); $ oPause.css ('display', 'block');}); $ oPause.click (function () {$ oVideo [0]. Пауза(); $ OPause.hide (); $ oPlay.css ('display', 'block');
🐿️ [5 шагов] Быстро добавьте Fantastic Font Squirrel типы на ваш сайт
В современном веб-дизайне шрифты довольно легко вернуть в отличие от первых дней Интернета - благодаря таким сайтам, как Font Squirrel. Хотя раньше возможности ограничивались несколькими шрифтами, которые должен был использовать каждый, сегодня
Как изменить цвет в частях изображения в Adobe Photoshop
Корректировка « Замена цвета» в Photoshop - это простой способ внесения глобальных изменений в определенный диапазон цветов в изображении без необходимости сначала создавать область выделения. На этом изображении старой витрины цвет фасада должен быть изменен с красного на зеленый.
Что такое Cheatengine62 (1) .exe и как его исправить?
... видность файла EXE, связанного с Cheat Engine 6.2, который разработан Dark Byte для ОС Windows. Последняя известная версия Cheatengine62 (1) .exe: 1.0, разработана для Windows XP. Этот EXE-файл имеет рейтинг популярности 1 звезд и рейтинг безопасности "НЕИЗВЕСТНО". Что такое EXE-файлы? Файлы EXE («исполняемые»), такие как cheatengine62 (1) .exe, представляют собой файлы, которые содержат пошаговые инструкции, которые выполняет компьютер
Что такое SMTP.EXE и как его исправить?
... создать резервную копию, экспортировав часть реестра, связанную с файлом SMTP.EXE (например, PC-119-0): Нажмите кнопку Пуск . Введите « команду » в поле поиска ... НЕ НАЖМИТЕ ENTER снова! Удерживая клавиши CTRL + Shift на клавиатуре, нажмите клавишу ВВОД . Откроется диалоговое окно для разрешения. Нажмите Да .
Сравнение 8 лучших плагинов для галереи WordPress (2019)
Хотите создать фотогалерею на своем сайте? Вы ищете идеальный плагин для галереи WordPress, который соответствует вашим потребностям? Если это так, вы находитесь в правильном месте. В этой статье мы сравним лучшие плагины галереи WordPress на рынке, чтобы вы могли выбрать подходящий для своего сайта и потребностей. Выбор плагина галереи WordPress WordPress поставляется со встроенной функцией галереи, но галерее по умолчанию не хватает функциональности,
23+ Премиум Шрифты в Стиле Граффити
Граффити это ярость прямо сейчас, и можно даже выходить в Интернет и искать некоторых из лучших создателей граффити которые доступны там. Существуют различные виды граффити Maker и один из самых популярных стилей граффити - тот, в котором алфавиты - это мазки ручной работы, которые дают очень естественный элемент для статьи, где он используется. Кроме
Современный сайт для компании от А до Я. Познакомьтесь с рецептами гениальных продавцов.
... CSS-код создается в соответствии с медиа-запросами, и ваш сайт адаптируется к экранам различных размеров. Еще одна добавленная стоимость
Как создать пользовательскую страницу архива WordPress
... видимая разница между страницей индекса и страницей архива - это дополнительный заголовок вверху, который изменяется в зависимости от конкретной просматриваемой страницы. Стандартная архивная страница в Двадцать Пятнадцать. (
Как создать опасный вирус блокнота [10+ кодов]
... создать простой, но опасный вирус Notepad! 😎 Как вы все знаете, вирус - это не что иное, как вредоносная программа, которая входит в систему без разрешения и влияет на данные и работу операционной системы. Вирусы выполняют нежелательные задачи, такие как репликация самих себя, повреждение файлов пользователя и т. Д.,
AdiBags - Дополнения - World of Warcraft - CurseForge

Комментарии

И вы можете добавить его на свой домашний экран?
И вы можете добавить его на свой домашний экран? Есть три основных метода доступа загруженные приложения на Android TV 7 основных приложений для Android TV доступны только через боковую загрузку 7 основных приложений для Android TV доступны только
Где они в Интернете и какой контент они потребляют?
Где они в Интернете и какой контент они потребляют? Кажется, это очевидно, но чтобы быть ориентированным на гостя, нужно также ориентироваться на данные и искать реальные, часто меняющиеся данные о наших гостях. Хорошей практикой, взятой из популярного сегодня дизайнерского мышления, является визуализация этих групп с помощью так называемых человек, или профили конкретных людей - представителей наших гостей - с фотографией, именем, интересами и чертами характера. Благодаря этому
Хотите создать фотогалерею на своем сайте?
Хотите создать фотогалерею на своем сайте? Вы ищете идеальный плагин для галереи WordPress, который соответствует вашим потребностям? Если это так, вы находитесь в правильном месте. В этой статье мы сравним лучшие плагины галереи WordPress на рынке, чтобы вы могли выбрать подходящий для своего сайта и потребностей. Выбор плагина галереи WordPress WordPress поставляется со встроенной функцией галереи, но галерее по умолчанию не хватает функциональности, которой
Как рисовать в граффити шрифт шаг за шагом?
Как рисовать в граффити шрифт шаг за шагом? 1. Сначала нарисуйте контур букв и рисунков карандашом. 2. Теперь добавьте фактические линии вокруг них, чтобы создать идеальный Буквы алфавита граффити и конструкции. 3. Заполните их основными цветами. 4. Идите вперед и добавьте к ним более яркие оттенки. 5. Увеличьте граффити, добавив к

Exe и как его исправить?
Что такое EXE-файлы?
EXE и как его исправить?
Вы ищете идеальный плагин для галереи WordPress, который соответствует вашим потребностям?
И вы можете добавить его на свой домашний экран?
Где они в Интернете и какой контент они потребляют?
Хотите создать фотогалерею на своем сайте?
Вы ищете идеальный плагин для галереи WordPress, который соответствует вашим потребностям?
Как рисовать в граффити шрифт шаг за шагом?