Wagtail Gridder

Wagtail Gridder is an interactive layout for the Wagtail CMS. Grid Items are created within categories, and displayed on a Grid Index Page. The JavaScript libraries Gridder and MixItUp are included.

Python
Django

About

Wagtail Gridder was developed at The Wharton School to display classroom simulation tools in a grid-format. Each content item appears as a card in categories on the main page, and clicking the categories restricts the interface to items within the category. Items can be in multiple categories.

To see it live, check out WRDS Classroom.

To see installation instructions and details, the project is on Wharton's GitHub.

Clicking on a card expands a content area, similar to Google Image Search. You can even embed a video!

The Grid Index Page

Grid Index Page

The Grid Index Page, With an Item Expanded

Grid Index Page Item Expanded

Optional Hero Area

There is also an optional hero area you can add, with a banner image and a featured link. There's also a spot for two featured grid items.

Featured Hero Area

The Editor in the Wagtail CMS

Grid Item Editor