The Grid Template

The Grid template type is the most customisable template we ever built for WP RSS Aggregator. You can change anything from the number of columns to the behaviour of video embeds. Plus, if you're not happy with the styling, you can apply custom CSS to practically all elements in the grid!

Here's a quick look at the options it offers.

The Grid template options

In the Grid template type you can set the following:

The number of columns to use.
The number of items to show per page.
The option to enable pagination.
The ability to make a whole grid item clickable or to have individual elements be clickable.
The ability to align the last element for each grid item to the bottom for better styling.
The ability to to show or hide, and the ability to add links to, the title, the image, the excerpt (optionally with a “read more” link), the author, the publish date and the source name.
Optionally, set the images as backgrounds for each card in the grid, making the title and other elements appear above the image which gets a dark overlay added to it.
The ability to set links as nofollow.
The open link behaviour (same window, new tab, lightbox).
The ability to set links to open embeds (especially useful with the lightbox link behaviour).
The ability to add a custom CSS class to apply your own custom CSS for the template.

Here's a closer look at the options with some screenshots.

Image

Use image as a background

This will change the grid item behaviour to set the image as a background to all other elements of the grid item. It darkens the image with an overlay for the white text above it to be more visible.

Link the image

When this option is enabled, the image itself will be a link to the source of the item.

Image height

Set the height of the image that will be used within each grid item for this template (in pixels).

Fill image to size

Since the height of images can vary from one source to another, or even one item to another, this option offers the ability to fill the space for the image within the template by enlarging the image to fill the space.

Replace with embed (if available)

This option will replace the image with the embedded content of an item. For example, when importing from YouTube, this will change the video thumbnail image into an embedded video player. This enables site visitors to play the video directly on your site.

Title

For the title, the only option is to limit the maximum length of the title (in characters).

Excerpt

Excerpts word limit

Set the word limit for the excerpts in this template. This option comes in handy when items being displayed have different excerpt lengths, resulting in a lot of empty white space on certain items. Limiting the number of words displayed will make all items look more uniform.

Excerpts ending

These characters or text are added at the end of the excerpt.

Enable the "Read more" link

Enabling this option will add a "Read more" link at the very end of the excerpt that will link to the source of the item.

Information

Create Template and Link Preferences

Responsiveness

As of version 0.1 of the Templates add-on, the Grid template is not as responsive as it could be. Most of you would prefer the grid to switch to one column when on small screens, such as mobile devices. As a temporary solution until we release an update for this, please use the below method.

In the "Custom Style" section shown above, add a custom class called "responsive", and then style the class for the feed item with a media query, as shown ahead.

You can add the CSS to your theme's stylesheet, or under Appearance > Customize > Additional CSS.

For example, the CSS below will ensure all grid items displayed on a screen up to 768px in width will be displayed in a single column.

@media (max-width:768px) {
  .wpra-item.feed-item.responsive {
    flex-basis: 100%;
  }
}

The Grid Template