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
• What you should know
• Known issues
• Irregular image sizes
• Custom styling
• 💬 Comments

Conversion video

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

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 recipe posts by setting the slug to the primary category the post is assigned to.

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

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)

Irregular image sizes

Irregular 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:

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

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.