Displaying Category Blocks (FSCI)

This tutorial features the Feast Plugin, which enhances and extends your theme to improve SEO, pagespeed, accessibility and user experience.

The Feast Category Images (FSCI) Block lets you visually display your categories, by assigned images to categories.

This lets us to build a more user-friendly Modern Recipe Index that helps users navigate our site by category, and improves site structure.

Just insert the Feast Category Images (FSCI) block wherever you want to display a list of categories, like on the homepage and posts.

Calling the block with no additional parameters will output all eligible categories.

Jump to:

Examples

If you've embedded the category name into the image, you can disable the title output by adding toggling off the "show title" setting.

Auto suggested categories

As you type (2 letters minimum), the categories will automatically start populating for you to pick from:

Using the mouse to click the suggestion, or the down arrow then enter, will enter the correct category for you.

Round images

A trend that's surfaced on recipe sites is:

using rectangular images for posts
using circles for categories (must be uploaded square)

This adds a visual queue to readers about what you're linking to (but is not a substitute for good accessibility).

To accommodate this, we've added the ability to display the image as a circle (even if uploaded as a square):

feast simple category index block with rounded borders

By combining different styles, we can create entirely new and unique displays. The images for the pastries categories below are uploaded at full color, but displayed in a classical parisian monochrome-style and frame.

Title Overlay

To show the category title inside a box, use the "Title Overlay" checkbox. For square images, the title will appear in a gray box below the image. For circle images, it will be overlaid on top

We do not recommend using the Title overlay for Mobile Grids smaller than "feast-grid-third" and it is not ideal for the "feast-desktop-grid-ninth", as the size is too small for a clear effect.

Feast+ users can further customize this color on their Feast+ Branding page:

Block settings

The block settings let you customize the layout of the FSCI:

Note that the categories you enter must be the Categories field.

Using the Feast Category Image block without any parameters will display all your eligible category images and the category name, but this is not a good user experience and is not how it should be displayed.

We recommend customizing the display by specifying Categories field:

We recommend separating these with proper use of headings, as recommended in the Modern Recipe Index.

Sorting

The categories will display in the order they're added. To re-order them, you'll need to delete them and re-add them.

We recommend breaking the FSCI into groups of 4 when possible to keep them topically organized, and removing the need to re-add all categories.

Categories missing images

Any categories without featured images set will have generic placeholder styling:

You'll need to add featured images to the categories, per below:

Add featured images to categories

You'll need to upload brand new images (JPG) to categories at 1200x1200 dimensions:

1. Upload your Category Featured Images

Upload the new square image in Media > Add New

Note: this must be square. If you don't upload a square image, it will appear as an oval once the circle effect is applied.

We recommend intentionally building new category images so that they have a consistent look.

Square images (1200x1200 px) with centered text that takes up around 70% of the width provide the best clarity:

2. Set the Featured Category Image

You can see which categories have images attached in Admin > Post > Categories:

admin category page showing category images

You can then edit or add them in "edit categories" screen:

wordpress admin interface to set category image

Irregular images

By default the FSCI block will force your images to display as a square/circle, since this is how the majority of sites display category images.

If you want to disable this and allow displaying irregularly sized images (not recommended), you can enable the Allow irregular images property in the FSCI block:

Icons

You can also set an icon, which is just a separate image (1200x1200) that can be used instead of the category image.

Once set, you can toggle it on in the FSCI block:

Note that if there's no icon image set, it will use the normal category image instead.

Sources to buy packs of icons:

Tips for building category images

Images should be JPGs, and 1200x1200 or larger (minimum 1000x1000, maximum 2000x2000)
- Following a convention established by larger sites, we recommend using square images with rounded corners for categories, to visually distinguish them from posts
Image names should follow good SEO practices: they should match the page content (be named after the category + word "recipes") eg. keto-breakfast-recipes.jpg
Including the category name in the center of the image allows for flexibility in how it gets displayed, and allows for circle-styling

We recommend following the best practices outlined in the image optimization guide.

Grouping categories

We aren't big fans of nested categories, and with the Category Images block you can create a visual hierarchy by grouping categories under (h2) headings without actually requiring categories to be nested.

For example, you can have categories for seasonal recipes including "Winter", "Spring", "Summer" and "Fall", without having a useless "Seasonal" parent category by simply displaying these categories with a "Seasonal" h2 header.

Image alt text

The image's alt text is generated from the category's name for accessibility and screen readers.

For the Feast Category Images block, Alt text is intentionally left empty if the category title is displayed below the image, to avoid duplication of content for screen readers.

Toggle title off

If you have text embedded into the image, you can toggle the title off in the block settings:

Live examples

These are some sites that have category images.

Where can I use this?

All the places! The block can be inserted into the:

Modern Homepage
Modern Recipe Index
The block can be inserted directly into posts to link to all the categories the current recipe is a part of

Eligible categories

To be eligible for display, all the following criteria must be met:

the category must have a category featured image assigned to it
the category must have at least 1 post in it
the categories you specify must match an existing category

For more troubleshooting, see "Troubleshooting" below.

Randomizing categories

We get asked about randomizing the categories and will not support this because it's not a good user experience

A user expects content to be relative static, which means that if you click a link to go from one page to the next, and then go back, you'll see the same content.

If I see one category for "gluten free" recipes and one for "vegan" recipes and I'm interested in both, I'll check out one before going back to look at the other. However, if when I go back I see "dinner" instead of "vegan" I'm left disappointed and confused. I question whether I saw "vegan" at all, whether I'm on the right page, or whether it moved somewhere else on the page.

This is just a bad user experience, period.

It's also an issue with search engines, who consider non-static content to be excluded because of user experience.

Search engines won't rank or pass authority to content that isn't static. This is possibly because they can't reliable associate the content that users are searching for, with that page.

Our understanding is that Google keeps multiple caches of a page (once per crawl, up to 10 copies) and dismisses (or de-emphasizes) content that isn't present in each of the caches.

From a user standpoint, it would be a poor experience to click on one recipe, go back to the homepage to find another recipe you also want to see, and find that it has disappeared. You expect a reasonable level of consistency from sites you visit.

Much like sliders, if the content isn't important enough to be static on the homepage, it's not important enough to be on the homepage, period.

The purpose of the homepage is to display the top categories - between 4 and 8 FSCI category images. If you want to display more than that, use the Modern Recipe Index instead.

Troubleshooting

One of my categories isn't showing

If the FSRI block doesn't find a category featured image for the category, it will not show
If your category has no posts in it, it will not show
If you haven't uploaded a new image, it won't show (WP bug)
- This typically displays as "failed to get attachment ID from URL"
If the image you uploaded is too small for the thumbnail size, the image won't show (upload category images at 1024x1024 minimum, 1200x1200 recommended)
If you're implementing this on a staging site it may not work - simply push the site live and then edit the FSCI block
Make sure that the image URL on the category page is HTTPS and not-HTTP (if images are being loaded as HTTP, check your WordPress "General Settings")

We considered adding a placeholder image for all categories without images set, as well as displaying categories without posts, but decided that this would be a bad user experience for visitors.

It's important that you intentionally build these images, and categories, and optimize it for your readers so that you don't end up with thin-content garbage that you need to delete later on.

See our tutorial on how to configure category pages.

This has become especially prominent given that many sites being audited end up needing to delete poor quality content, and it drives up their ranking.

Note about CDNs: we've seen issues with image hosting platforms and CDNs including WP Offload Media and Jetpack. We always recommend removing Jetpack completely, but for WP Offload Media, you'll want to use the "remove from bucket" feature:

How can I prevent a category from showing?

The FSCI block is built to be additive, instead of subtractive. That means if you want to exclude a category from showing, you should list the categories you want to show, instead of trying to remove specific categories.

It's designed to be used as a short, specific list rather than display-all. This is because most blogs have a huge number of unrelated categories and displaying all of them in a single place isn't a user-first experience.

The categories you display should be related to the content of the page you're on. If you're on a desserts page, showing categories related to desserts (pies, cakes, cookies) is a good idea. Showing unrelated categories (salads, smoothies, soups) is not.

Sidenote: not setting a category featured image will prevent that category from showing. So if you have a "family" category, simply don't set a featured image.

Separate mobile and desktop displays

The default grid columns (feast-grid-half, feast-grid-third, feast-grid-fourth) should be used to control the mobile layout. We live in a mobile-first world - design for mobile.

You can use the separate desktop classes to change how the grids are displayed on desktop: feast-desktop-grid-half, feast-desktop-grid-third, feast-desktop-grid-fourth, feast-desktop-grid-fifth, feast-desktop-grid-sixth

Ideally, you'll want to use a mobile grid that divides evenly into desktop - the three primary would be:

feast-grid-half with feast-desktop-grid-fourth
feast-grid-third with feast-desktop-grid-sixth
feast-grid-third with feast-desktop-grid-ninth

Was this helpful?

Happy
Sad