Masonry плитка для галереи и записей
Опубликовано: 01.09.2018
Masonry представляет собой каскадный стиль сетки, которая часто используется в современном интернете для удобного и красивого просмотра блоков информации, таких как записи, портфолио, галереи.
Создание плитки masonry на CSS без плагинов
Пример взят из источника Add Masonry, Grid Layouts To Your WordPress Site With Just CSS .
В коде нет ничего сложного, его можно скопировать и настроить за 5-10 минут.
Используется свойство CSS3 column-count, главное привязать его к правильному селектору.
В теме understrap основное содержание страницы разделено на два блока: #primary и #right-sidebar. Поэтому я подогнал пример для #primary, и сократил количество столбцов до 3-х.
/* Masonry Custom CSS */ /* Masonry container */ body.blog div#primary, body.archive div#primary { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; -moz-column-gap: 0.5em; -webkit-column-gap: 0.5em; column-gap: 0.5em; } /* Masonry bricks or child elements */ body.blog article, body.archive article { background-color: #eee; display: inline-block; margin: 0 0 1em; padding: 1em; width: 100%; } body.archive .archive-header, body.blog .paging-navigation, body.archive .paging-navigation { background-color: #ffffff; -webkit-column-span: all; column-span: all; }Осталось сделать колонки респонсивными для разных экранов. Код из того же примера-источника с указанием своего контейнера.
@media only screen and (max-width : 1024px) { body.blog div#primary, body.archive div#primary { /* Masonry container */ -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; } } @media only screen and (max-device-width : 1024px) and (orientation : portrait) { body.blog div#primary, body.archive div#primary { /* Masonry container */ -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } } @media only screen and (max-width : 768px) { body.blog div#primary, body.archive div#primary { /* Masonry container */ -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } } @media only screen and (max-width : 480px) { body.blog div#primary, body.archive div#primary { /* Masonry container */ -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; } }Получилось действительно неплохо, и главное, за минуты и без лишних плагинов. Сайт тестовый, на реальном будет лучше выглядеть с настроенным excerpts и применив дополнительные стили.
Рекомендую прочитать всю статью оригинальную за дополнительными пояснениями как это работает.
Несмотря на простоту техники, во многих случаях разумно использовать готовый плагин. Благо их десятки и они предоставляют дополнительные элементы управления в админке.
к содержанию ↑
Универсальный плагин плитки для записей и галерей
Плагин Simple Masonry Layout .
В описании доступны два вида демо, для записи и для галереи:
http://demomasonry.ospreythemes.com/masonry-layout-of-posts/ http://demomasonry.ospreythemes.com/masonry-layout-gallery/В настройках плагина можно задать количество постов, сортировку, а также увидеть примеры использования (шорткоды), которые можно вставлять непосредственно в редактор или в шаблон.
Немаловажно, что плагин поддерживает также и пользовательские типы записей.
к содержанию ↑
Еще один универсальный плагин плитки
Скачать: Masonry Layout (Pinterest Like Grid)
Демо: http://www.masonrylayout.com/masonry-theme-demo/default/
Шорткод генерируется в настройках плагина, среди которых можно выбрать или задать тему (единственная в бесплатной версии), количество колонок, тип записи, респонсивность, сортировка. Больше опций доступно в про версии.
И еще один плагин для создания masonry плитки
Страница: Grid Plus .
Плагин предлагает довольно большой набор возможностей по конфигурации сетки, выбору и отображению данных, включая пользовательские типы, а также возможность задавать и создавать свои скины.
Плагин хорош, но есть кое-какие недоработки. Вкладка Color & CSS на момент тестирования странно себя ведет.
к содержанию ↑
Плагин для masonry галереи
Скачать: jQuery Masonry Image Gallery .
Демо: http://willrees.com/jquery-masonry-wordpress-gallery-plugin-demo/
Хороший и простой плагин, но с выходом Gutenberg придется переписывать, потому что при вставке галереи в новом редакторе фильтр не работает. Я забегаю наперед. Мне кажется, очень много славных плагинов придется переписывать, если не будет совместимости. Поживем — увидим.
к содержанию ↑
Еще один плагин для masonry галереи
Скачать: Photoswipe Masonry Gallery
Демо: https://plugins.thriveweb.com.au/photoswipe-plugin-demo/
Я попутно тестирую в классическом редакторе и в Gutenberg. Нет, в последнем не работает. Хотя Gutenberg еще не вышел официально во время написания этой статьи.
Оба вышеперечисленных плагина работают со стандартным функционалом галерей.
Есть десятки других плагинов, которые создают собственный тип галереи с различными наборами настроек для управления и отображения. Практически во всех имеется выбор и настройка плитки, но их обзор выходит за рамки этой статьи.
Создать плитку можно разными инструментами, с плагинами или без, в WordPress это делается легко и доступно практически любому уровню пользователя.