В joomla-4 в меню блога можно управлять расположением и количеством колонок вывода статей. Благодаря новой системе классов grid и flex, можно создавать красивые новостные блоки без сторонних компонентов.
В этом материале я покажу несколько примеров на основе стандартных материалов. Скачав и установив классы в свой файл user.css вы можете пробовать сочетание различных вариантов.
В базовом шаблоне cassiopeia установлен такие варианты блога:
- Разделение на Главные и Вступительные материалы ▬: верх / низ.
- Разделение на колонки ▥: 1, 2, 3, 4...
- Разделение на ряды ▤: 1, 2, 3, 4...
- Размещение картинки относительно текста ▣: слева, справа, сверху, снизу, реверс, масонри.
Я добавил следующий макет:
- Расположение Главных материалов и Вступительных материалов горизонтально в 2 блока ◧: слева / справа.
- Вывод на мобильнике в две колонки ◫. По умолчанию система grid на экранах менее 576px выводит каждый материал на всю ширину. Добавляем новое правило в grid blog и вставляем имя нового класса в меню блога mobile-cols-2
- Крупный шрифт для главного материала (для усиления внимания).
Классы вставляются вручную. Попробовав различные варианты, быстро поймете куда что вставлять. Макет Блога не надо менять каждый день, он настраивается один раз.
Варианты вывода статей в макете Блог
1 колонка, фото слева, класс image-left
1 колонка, фото слева-справа, классы image-left image-alternate boxed
2 колонки, фото слева, класс image-left
3 колонки, класс boxed
3 колонки, масонри, фото внизу, классы masonry-3 image-bottom boxed
Главные: 3 колонки, класс columns-3
Вступительные: 1 колонка, классы image-left image-alternate boxed
Мобильный телефон: 2 колонки, без вводного текста, класс mobile-cols-2 boxed
