7 сентября в 22:10
Drupal 11
Установлены модули - Media Gallery, PhotoSwipe, PhotoSwipe Dynamic Caption, Media Library.
При попытке вывода материала с множеством картинок в поле "more_phote", хочу чтобы они выводились так же как в Media Gallery т.е. плиткой (таблицей) за это отвечает модуль и библиотека PhotoSwipe , который в нужное поле вставляет класс photoswipe-gallery (обертку). этот класс и формирует отображение картинок в виде grid по две-три штучки в строке. Так вот проблема в том что при отображении сущности Media Gallery данный класс работает, а вот при выводе материала с множеством картинок в поле - не работает. Пробовал в качестве типа поля назначать Media Gallery-тоже самое картинки выводятся каждая на новой строке.
Пробовал делать это в Views назначая строке, содержащий фотографии, класс photoswipe-gallery тоже самое - не работает, хотя класс photoswipe-gallery появляется в коде страницы в нужном месте , т.е. в теге-обертке данного поля.
Может где то что-то нужно писать с заглавной буквы? Или какой то еще модуль до установить? Галочку поставить?
Коллеги помогите, направьте в нужном направлении сил уже нет - больше месяца не могу решить эту задачу, хотя везде пишут, что должно работать (форматироваться) сразу как только появляется класс photoswipe-gallery.
Комментарии
1. Эта библиотека точно подключается к странице в случаях, когда используется Media Gallery? Проверить несложно - отключить агрегацию CSS/JS, открыть HTML-код страницы и просмотреть список загружаемых JS/CSS файлов.
2. Если PhotoSwipe использует JS, то имеет смысл посмотреть ещё консоль браузера на предмет ошибок JS.
Агрегация отключена. В HTML-коде страницы материала и при отображении Media Gallery вызываются одни и те же библиотеки (шесть штук) в одинаковой последовательности
<script src="/libraries/photoswipe/dist/umd/photoswipe.umd.min.js?v=11.2.4"></script>
<script src="/libraries/photoswipe/dist/umd/photoswipe-lightbox.umd.min.js?v=11.2.4"></script>
<script src="/libraries/photoswipe-dynamic-caption-plugin/dist/photoswipe-dynamic-caption-plugin.umd.min.js?v=11.2.4"></script>
<script src="/modules/contrib/photoswipe/modules/photoswipe_dynamic_caption/js/photoswipe_dynamic_caption.init.js?t298fc"></script>
<script src="/modules/contrib/photoswipe/js/photoswipe.init.js?t298fc"></script>
Консоль браузера ошибок не показывает.
Есть подозрение, что при отображении материала не грузится класс photoswipe-gallery
смотрю начало html-кода и в случае Media Gallery и в случае с отображением материала грузятся одни и те же css-файлы
<link rel="stylesheet" media="all" href="/libraries/photoswipe/dist/photoswipe.css?t298fc">
<link rel="stylesheet" media="all" href="/libraries/photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css?t298fc">
только в Media Gallery еще и подгружается media_gallery.css и все отличие.
Может есть мысли куда еще посмотреть?
Вы уверены, что визуал а-ля 'grid' формирует именно (или только) .photoswipe-gallery? Возможно, искомое вами отображение 'grid' всё же в media_gallery.css. Инспектор стиля что говорит, где файл-источник этого класса?
Вот я тоже сомневаюсь. Скорее .photoswipe-gallery нужен чтобы детей открывать в попапе.
Да, мнемоника имён файлов как бы намекает, что photoswipe - это скорее какой-то плагин а-ля лайтбокс.
Я тоже все больше склоняюсь к тому же - что не хватает какого то файла-css.
Класс .photoswipe-gallery ни где явно не определяется. Если скрипт photoswipe.init.js видит этот класс где-то в сгенерированном коде страницы, то он делает какие то действия -добавляя какие то классы в атрибуты контейнера.
Понимаю, что решение не очень но может есть какая то возможность вручную прикрутить стили определенные в media_gallery.css чтобы попробовать?
Есть. Хуки. Или загрузка библиотеки из Твига.
Могу, если что, помочь за вознаграждение. Пишите в ЛС.
Может эта статья на Drupal.org придаст нам вдохновение. Сижу вникаю где же лежит этот самый нужный мне field.html.twig
сделать грид - это пару строчек в цсс. Подвязать можно и к текущему классу поля.
У вас там где не работает сетка, само открывание фото работает? ну то есть непосредственно фотоспайпер?
Не настолько знаю CSS - чтобы сделать грид, думаю display:grid; будет маловато. я точно не смогу. И потом не представляю как привязать это к полю.
Что касается отображения - то да все картинки открываются в Photoswipe, в модальное окно, там можно листать стрелки влево-вправо, мышью , зум работает. Photoswipe - отличная галерея.
По подсказке пользователя pselfin -в библиотеке photoswipe в файл стилей photoswipe.css добавил такие строки. По сути определил класс .photoswipe-gallery и все заработало.
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Columns that automatically fit, min 200px, max 1fr */
grid-gap: 2px;
}
Но думаю, что это неправильный путь, т.к. при любом обновлении файл будет заменен и уже никто не вспомнит кто куда что дописал.
Коллеги если есть какое то другое решение - буду очень признателен.
Я не подсказывал писать "в файл стилей photoswipe.css")) Никогда так не делайте.
Во-первых, вешать на весь класс .photoswipe-gallery решение неправильное. У вас может в разных местах встречаться галерея, и возможно в разных местах нужно разное отображение.
Надо найти класс поля инспектором, и цепляться конкретно к нему. В помощь про отключение кеша и дебаггинг тем.
Вторая БОЛЬШАЯ ошибка, делать изменения в классах библиотеки, вы правы - потрется при обновлении.
CSS нужно писать в своей теме оформления. Именно в своей! Если вы используете контрибную (то есть просто с друпал.орг установленную) будет таже проблема - потрется при обновлении. Для таких случаев делают либо дочернюю тему, либо полностью свою с нуля.
Про создание своей темы есть вот такой мощный мастер-класс. Да, нужна определенная компетенция, не все элементарно)
Как еще подробнее описать я не знаю) Но с этими знаниями у вас уже будет хорошая база для подобных действий (здесь нет про основы CSS, это уже отдельная тема, полно уроков, курсов и статей в свободном доступе)