Getting Creative with the Style Editor Part II: Turn an Article Collection Into an Announcements Index

Turn an Article Collection Into an Announcements Index

When displaying articles on your site, say, for news stories or a blog, you would normally use an Article Index template or Article Index component to display a list of articles. Each item in the article index includes a thumbnail, header, excerpt, and a call to action. Here’s what it looks like:

However, you may wish to use the article index for other purposes, for example to show important announcements which, like news or blog articles, you want to list in chronological order in a vertical list, organized from newest to oldest. But maybe these announcements don’t need to include a thumbnail. This can be a problem, since the whitespace left by missing thumbnail images will throw off the alignment of your article listing. It looks like this:

You can use the Article Collection component to fix this problem. Here’s how you do it (we’ll use announcements as an example):

1. For your article index page, go to your page properties and swap out the Article Index template with the Super Template and save the properties.
2. Add an Article Collection component to Slot 1 in your Slots tab, and set the number of items you want to display.
3. Create a page for each announcement, and label each page appropriately.
4. Navigate to your announcement index page. The announcements should display in a grid layout. In order to change this layout to a vertical list, use the style editor and apply the classes col-12 col-lg-8 mb-4 to the “Utility classes for items” region.
5. Save and/or publish the page.

Your new page should now look like this:

Note that the Article Collection component does not include an archive or list of related articles. If you want those, you must use the Article Index component.