FSRI Block

This tutorial features the Feast Plugin, which contains theme enhancements.

The Simple Recipe Index (FSRI) block is a block-editor component for building the Modern Homepage. It's intended to be used as a replacement for the FSRI shortcode.

It contains many of the same configuration/setting options as the shortcode, but in an easier-to-use, visual way.

Jump to:

• Conversion video
• Adding the block
• Background color
• Related posts
• Specific posts
• SEO
• What you should know
• Alt text
• Pinterest
• Known issues
• Troubleshooting
• Irregular image sizes
• Randomizing posts
• Full width container
• Custom styling
• 💬 Comments

Conversion video

If you originally set up the Modern Homepage with shortcodes, here is how you convert them to the blocks:

Note: the blocks are automatically enabled now and don't require enabling them via the setting. Ignore that part of the video.

You can also convert the FSCI shortcode to a block.

Adding the block

You can add the block either by using the (+) symbol in the top-left of the editor:

Or by going to a new line and typing /fsri

Background color

You can add a custom background color to the block to make it stand out more with a custom class. See:

• Apply a custom class to the FSRI block's Advanced > Additional CSS class(es) (eg. mycustombackground)
• Add styling to your custom class using the "per page CSS"

.mycustombackground { background: #cccccc; padding: 17px; }
.mycustombackground .listing-item { background: #FFFFFF; padding: 7px; }

Related posts

The FSRI block can be used as a "related posts" feature in posts by setting the slug to the primary category the post is assigned to.

Specific posts

You can display specific posts by entering their post IDs into the "Post IDs" field, separate by a comma.

You'll need to modify the "limit" field if using more than 4.

SEO

By default, the FSRI block will exclude previously displayed - we recommend leaving this enabled to avoid repetitive internal links.

This means that a post may not show up where you expect it, but as long as it's on the page, it doesn't matter.

What you should know

• By default, it will exclude previously displayed - we recommend leaving this enabled to avoid repetitive internal links
• This means that a post may not show up where you expect it to, if it shows up earlier on the page and this is fine
  • your "recent posts" is not the most important part of your page
• The category you select must be the category slug, not the category name
• We recommend setting a default image size in the Feast Plugin settings page and not changing it on a per-block basis
• The image used for the post is the featured image for that post, which should be 1200x1200 px
  • Note that you can use any thumbnail orientation (vertical, square, horizontal) regardless of the fact that the uploaded image is a square
• By default the image will intentionally have blank alt text because it is a decorative image - the screen reader text comes from the actual post title below the image
• The ID field will override the category and orderby attributes, but you do need to change the "Number of posts" to match the number of IDs you've provided

Alt text

The FSRI shortcode is built with accessibility in mind, by including a blank alt tag: alt=""

This is because the image and title are wrapped in a single link, with the image acting as a purely decorative image. According to the W3C guide on decorative images:

This is the correct behavior, because having the screen reader read both the alt text AND the image title would result in a burden to non-sighted users, requiring much longer to navigate a page.

Sighted users take for granted that they can skim over 20 post listings in a couple of seconds when looking for their content. Non sighted users must navigate over each element individually.

The purpose of the FSRI shortcode is to provide links to recipes, not to provide content that is used in making those recipes. That content belongs on the actual recipe page.

When the FSRI shortcode include_title="no" attribute is used, the image alt is then filled with the post title, providing a correct alt text.

The images also contain the aria-hidden="true" attribute, to further clarify that these images are simply part of a link to another post, not to be used for on-page content.

Note: the alt text is filled with the post title if the post title is excluded in the block settings. We don't recommend displaying the image without the title, because the featured image won't convey sufficient information to sighted users.

Pinterest

All images have the data-pin="nopin" attribute to prevent thumbnails from being pinned. There is no reason to ever pin the thumbnail.

Known issues

• the block editor post display may be slightly different than the front end - exclude_previous does not excluded posts in the block editor
  • resolving this would involve updating every FSRI block whenever one of them is updated, which currently seems like a bad idea
  • this is not an issue - use the block to evaluate page layout, not specify exact posts
  • this is likely to be left as-is, since it functions as intended on the front (ie. provides a variety of internal links for site structure)
• styling added to "additional CSS" and in the block editor (in the "CSS" section of the post) is not loaded in the block editor itself
• do not mix the FSRI block and FSRI shortcode on the same page - the block is loaded prior to the shortcode, so mixing these two on one page will have very inconsistent results (it will not crash your site though)

Troubleshooting

Irregular image sizes

Irregular (or missing) image sizes are caused by three things:

1. featured images not being the recommended 1200x1200 size
2. not having a proper default thumbnail set
3. not regenerating thumbnails after registering the Modern Thumbnails

To fix #1, re-upload images at the proper size. See image pre-upload optimization for more details.

To fix #2, set the default thumbnail size in the Feast Plugin settings page:

To fix #3, run the Regenerate Thumbnails plugin to Regenerate Thumbnails For The Featured Images Only:

Randomizing posts

At this time we don't have any plans to support randomizing the posts displayed using the FSRI block.

Anecdotally, we've found that 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.

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.

Full width container

Version 5.2.0 of the Feast Plugin introduces the ability to easily add full-width containers with a checkbox:

Note that we only recommend using this on the Full Width Modern Homepage.

If you'd like to modify the background of the full width container, please use the following code (replacing #f5f5f5 with your custom color):

.feast-full-width-wrapper { background: #f5f5f5; }

Custom styling

As of version 4.5.1, you can use the Advanced > Additional CSS class(es) option for the FSRI block, plus the per-page CSS to add custom styling to your posts.

Background color

First, add a custom class to the block by selecting it, and adding it on the right-side:

Then add your CSS styling to the Page Specific Custom CSS below the block editor:

.feastdesignco-recipe-display { background: #E5E5E5; padding: 17px; }
.feastdesignco-recipe-display .listing-item { background: #FFF; padding: 7px; margin: 0; border: 1px solid #CCC; }

Title overlay

You can overlay the title on the image with the following snippet:

@media only screen and (min-width: 1200px) {
.fsri-title {position: absolute; bottom: 0; background-color: rgba(255, 255, 255, 0.8); width: 100%; padding: 17px 7px; min-height: 100px; font-weight: bold; }
}

We recommend enabling this on desktop only (via the @media query) because mobile images sizes are typically too small and the text obstructs the image too much, resulting in poor user experience.

For consistency and branding purposes, we'd recommend using this site wide by putting it in your Additional CSS screen.