Enlightenment Theme allows you to display every blog archive from your website in a multicolumn grid powered by the Masonry script. Your posts will be displayed in elegant tiles that automatically adapt to the device screen size and can showcase any media format like images, galleries, videos and audio streams.
This tutorial is part of the series “Enlightenment Theme Documentation“. Enlightenment is a powerful theme that can help you create advanced page layouts for your website, but may require a bit of mastering for beginners. Make sure to read all of the theme’s documentation tutorials to get the most out of this theme.
The options for customizing the Grid Loop can be found under “Appearance > Theme Options > Grid Loop”. Here’s a preview of the options page:
From the option “Select Template to Edit” you can choose the archive you wish to display in a custom grid. The default “Blog” archive can be customized as well as Categories, Tags, Author pages and Search Results. Any custom post types and taxonomies will also appear in this list and additionally you can customize the grid of post formats archives:
The option “Select Grid” displays the available choices for grid columns. The first option resembles “One Column” and actually disables the grid loop, instead displaying posts in the traditional blog format. When the grid is activated posts can be displayed in either Two Columns, Three Columns or Four Columns.
Depending on the selected layout, a sidebar may also appear besides the content. For consistency reasons, when the content is selected to display in three or more columns the layout is overridden to full-width, regardless of the setting in theme options, to avoid cramped post tiles.
Each grid option can be previewed at the theme’s demo:
- Traditional Blog with Grid disabled
- Blog with 2 Columns Grid
- Blog with 3 Columns Grid
- Blog with 4 Columns Grid
Selecting Leading Posts
If you are displaying post archives in a grid, posts will display as tiles with featured media and a short excerpt of content. You have the option to display a selected number of posts as full posts from the “Lead Posts” option:
The “Lead Posts” option can be from zero (no leading posts) to the maximum “Posts per Page” setting you have set under Settings > Reading. Leading posts will display full-width with content instead of excerpt:
Overriding the Grid Loop option for all Archives
Under the “Select Template to Edit” option, if you select the “All” option you will be able to override the grid setting for every archive:
You won’t see any visual feedback when updating this setting, the grid selections for this case always remaining blank. Instead the setting for each archive will be updated.
Conclusion
Masonry grids are a great way to showcase any type of media. Wether it be images, galleries or videos they will all magically fit the tile’s content area. We have first experimented with this style in our Pinboard Theme and have tried to perfect it in our integration into Enlightenment Framework. Please let us know in the comments how you find our integration of blog archives with the masonry grid system and remember to read our other tutorials that cover Enlightenment Theme’s documentation.
Leave a Reply