На коммерческих шаблонах Rockettheme установлено около 10 модификаций частицы Image Grid - она присутствует на каждом шаблоне. Служит для вывода фотографий и изображений - и может иметь поля навигации при просмотре всего альбома картинок.
1 тип - галерея картинок имеет сдвиг колонн по вертикали, а при наведении на изображение подсвечивает надпись в оверлее (шаблоны Versla, Gemini)
2 тип - галерея картинок представляет собой монолит, а при наведении на избражение появляется название и иконка плюс "+" и происходит затемнение изображение по цвету Accent Color 1 - появлется оверлей (шаблон Protean).
3 тип - все то же самое, что и в типе 2, кроме иконки плюс "+" (шаблоны Notio, Remnant, Citadel)
4 тип - галерея картинок представляет собой аккуратно собранные изображения с описанием и зазорами между рядами и столбцами, при нажатии у изображения происходит затемнение с градиентным оверлеем (шаблоны Flux, Supra, Acronym)
5 тип - галерея картинок представляет собой аккуратно собранные изображения с описанием и зазорами между рядами и столбцами, столбцам можно задавать проценты (какую часть на экране будет занята столбцом) при нажатии у изображения происходит затемнение с градиентным оверлеем (шаблоны Flux, Supra)
6 тип - галерея картинок представляет собой аккуратно собранные изображения без описания и минимальными зазорами между рядами и столбцами, при наведении на изображения появляется иконка и происходит затемнение оверлеем (шаблон Interstellar)
7 тип - галерея картинок представляет собой аккуратно собранные изображения без описания и стандартными зазорами между рядами и столбцами, при наведении на изображения появляется большая иконка плюс "+" и происходит почти сплошное затемнение цветом Accent Color 1 (шаблон Photon)
8 тип - галерея картинок представляет собой монолит с оверлеем (без зазоров), при наведении на изображение появляется иконка "лупы в кайме" и происходит небольшое масштабирование и оверлей с изображения пропадает (шаблон Galatea, Antares, Xenon)
9 тип - галерея изображений с небольшими аккуратными зазорами, при наведении появляется значок "лупа" и происходит затемнение оверлеем (шаблоны Isotope, Salient, Ethereal)
10 тип - уникальный, галерея изображений имеет несколько стилей, имеет 2 типа ссылок на статьи , возможность вставки дополнительного текста, возможность использовать различные плагины (rokbox или lightcase)
Структура
Исходная частица Image Grid содержит стандарно 3 файла в 2-х папках - particles и scss
- imagegrid.yaml
- imagegrid.html.twig
- _imagegrid.scss
Файлы imagegrid.yaml у всех модификаций частиц Image Grid от Rockettheme стандартные, универсальные и почти на 99% не отличается по коду. Даже икноку используют одну : fa-pucture-o. Все основные отличия в файлах: imagegrid.html и _imagegrid.scss
Файлам не нужна предварительная установка частицы-атома Uikit for Gantry5, они готовы к работе .... но оказывают сильнейшее влияние друг на друга при установке на шаблон Helium одновременно нескольких модификаций Image Grid (проблема в стандарном коде - стили могут накладываться при рекомпиляции друг на друга, теряя индивидуальность).
Поэтому старайтель выбрать и использовать стили, которые не оказывают влияния друг на друга.
Копирование
Найти исходную частицу Image Grid на шаблоне от Rockettheme можно лишь , если у Вас есть уже скачанный шаблон этого разработчика.
Для того, чтобы скачать imagegrid.yaml и imagegrid.html.twig, надо пойти по пути: [root/templates/шаблон от Rockettheme/particles/..]
Для того, чтобы скачать файл _imagegrid.scss, надо пойти по пути: [root/templates/шаблон от Rockettheme/scss/шаблон/particles/..]
Активация
Для всех найденных частиц, согласно правилам модернизации шаблона - 3 золотым правилам переопределения - чтобы при обновлении шаблона Helium наши изменения (модернизация) остались в силе, надо задать правильное переопределение для измененных (новых, дополнительных) файлов.
Копирование всех новых файлов должно осуществляться в папку custom (она уже создана разработчиком). Изначально в ней всего 2 папки - config и css-compiled. Для этого нужно внутри папки custom создать папки particles и scss.
Напоминаю, работать (создавать папки, копировать файлы, вносить изменения) можно и на самом шаблоне Helium, достаточно нажать
и зайти на ссылку Параметры G5_helium
В папку particles перенести 2 файла - imagegrid.yaml и imagegrid.html.twig, в папку scss оставшийся файл - _imagegrid.scss
Создать дополнительно в папке scss файл custom.scss (сюда в дальнейшем мы будем записывать всю информацию для активизации файлов с расширением .scss), открыть его и записать в первых строках:
//Двойной флэш - подсказка для нас
@import "dependencies";
//подключаем стили imagegrid от шаблона flux
@import "imagegrid";
Сохраниться и перейти в административную панель нашего шаблоа.
Внимание !!!
Если Вы используете в шаблоне по умолчанию Helium настройки шаблона Base Outline (автоматическое переопределение), то Вам надо зайти в Base Outline на вкладку Styles и нажать на кнопку Recompile CSS
Если ошибок при рекомпиляции нет, то получите сиреневую надпись (если в это время держать курсор в нижнем правом углу, то надпись не исчезнет)
При наличии ошибок или предупреждений появится другая надпись, чтобы успеть прочитать ее - держите указатель мышки в нижнем правом углу.
Желто-оранжевая надпись - это предупреждение, что что-то не так, обратите на меня внимание. Как правило, это бывают переменные, которые не определены при рекомпиляции с указанием строки из файла с расширением .scss (в данном случае строка 31 файла _imagegrid.scss информирует нас не найдена переменная $font-weight-black - забегая вперед, это высота жирного шрифта в шаблоне Flux с высотой 900)
Самое опасное, это может появиться так называемая ошибка 500 с указанием строки, которая не может идентифицироваться.
В этом случае поставьте двойной флеш // перед записью @import "_imagegrid"; - это устранит ошибку и откатит в дальнейшем систему назад (только обязательно надо провести повторную рекомпиляцию) - а сами идите разбирайтесь с кодом вашего файла.
Настройка
Ниже приведен скриншоты настроек частицы Image Grid от шаблона Flux от Rockettheme
Напоминаю, без активации стилей (файл с расширением .scss) внешний вид частицы будет далек из задуманной разработчиком.
P.S.
К сожалению. разработчики Rocketheme намеренно искажают правильный код частицы, допускают использование отсутствующих классов и делают другие пакости, а потом за деньги исправляют код (т.е. осуществляют платную техподдержку)