Image Grid

все модицикации

ETL Image Grid Particle style2

А вот оригинальная бесплатная частица Image Grid с множеством текста и абзацев + 2 вывода - через rokbox и через lightcase

Image Grid Particle style3

А вот оригинальная бесплатная частица Image Grid с множеством текста и абзацев + 2 вывода - через rokbox и через lightcase

Image Grid Particle style1

А вот оригинальная бесплатная частица Image Grid с множеством текста и абзацев + 2 вывода - через rokbox и через lightcase

Корявый код в TITLE - типичная ошибка разработчиков от Rockettheme

Частица - исходник от шаблона Сitadel (ранняя версия) встала немножко коряво. Ошибки разработчика можно устранить - поменять местами строки 5 и 4 в файле imagegrid.html.twig.

Image Grid Particle style4

А вот оригинальная бесплатная частица Image Grid с множеством текста и абзацев + 2 вывода - через rokbox и через lightcase

Image Grid _gf

Исходник с шаблона Flux работал только в одиночку (если на шаблон Helium не установлены другие Image Grid с других шаблонов), пришлось скорректировать все 3 файла в исходнике - заменить в классах буквы g на gf

Image Grid Antares

Исходник переделан - стандартная процедура замены в классе g/ga
image
image
image
image
image
image

На коммерческих шаблонах 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)

Структура

В Gantry 5 копирование всех новых стилей осуществляется только в папку custom, которая изначально создана разработчиками и лежит в вашем шаблоне.
консультант по Gantry5

Исходная частица 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 (проблема в стандарном коде - стили могут накладываться при рекомпиляции друг на друга, теряя индивидуальность).

Поэтому старайтеcь выбрать и использовать стили, которые не оказывают влияния друг на друга.

Копирование

Найти исходную частицу 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.

  • Почти все частицы Image Grid при установке на один шаблон работают не корректно - накладываются стили, а все из-за того что они сделаны с универсальным кодом для любого шаблона 

 

Скошенные углы

Этот код написан Friday. От бельгийца, живущего в Лондоне. Специально для Вас. Поддержка Google Chrome и Firefox

Pattern SVG #2 Aurora