Post Gallery

The post-gallery.html include file creates a magazine-style layout for displaying groups of posts. It’s designed to showcase posts in a visually appealing manner, with the first post of each section displayed prominently and subsequent posts in a more compact format.

Parameters

Parameter	Default	Description
`sections`	Required	Grouped post sections to display
`section_permalink`	`page.pagination.permalink`	The permalink structure for individual sections
`replace_value`	None	The value to replace in the `section_permalink` with the section slug
`per_section`	`page.per_section` or `page.pagination.per_page`	Number of posts to display per section

Usage

To use this include in your Jekyll site, you can call it from a layout or another include file like this:

{% include post-gallery.html
    sections=site.categories
    section_permalink='/category/:name/'
    replace_value=':name'
    per_section=4
%}

This include is component-oriented: sections should be passed explicitly, while section_permalink and per_section can optionally fall back to page-level pagination values.

Layout

The category_index layout utilizes post-gallery.html to create a page that showcases posts from various categories.

To use the category_index layout in a page:

---
layout: category_index
title: Explore Our Categories
---

Demo Page

To see post-gallery.html in action within the category_index layout, visit our demo page:

Category Index Demo

Functionality

For each section in the collection, the include renders a heading and an optional “View all” link.
The first post in each section is displayed using post-tease-image-card.html.
Subsequent posts use post-tease-text-card.html.
The layout alternates direction between sections for visual variety.
If sections is missing, the include renders nothing.

Dependencies

This include depends on:

post-tease-image-card.html
post-tease-text-card.html
Primer CSS classes
Octicons for the “View all” arrow

Customization

You can customize the appearance by modifying the HTML structure and CSS classes within the include file.

Notes

Ensure that the post-tease-image-card.html and post-tease-text-card.html includes are properly set up in your Jekyll site.
The {% cycle '', 'flex-row-reverse' %} tag alternates the layout direction for visual interest.
The “View all” link uses the section_permalink and replace_value to generate the correct URL for each section.