• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Feast Design Co.

WordPress Themes for Food & Lifestyle Bloggers

  • Themes
  • Feast Plugin
  • Blog
  • Support
  • Tutorials
  • Nav Social Menu

    • Email
    • Facebook
    • Instagram
    • Twitter
menu icon
go to homepage
  • Themes
  • Feast Plugin
  • Support
  • Tutorials
    • Facebook
    • Instagram
    • Twitter
  • search icon
    Homepage link
    • Themes
    • Feast Plugin
    • Support
    • Tutorials
    • Facebook
    • Instagram
    • Twitter
  • ×

    Home » SEO

    FSRI Block

    Published: Jun 9, 2020 · Modified: May 4, 2022 by Skylar · 3 Comments

    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
    • Custom post types

    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:

    block editor user interface accessed using the plus icon in the top right, showing the FSRI Block option

    Or by going to a new line and typing /fsri

    block editor inserting the FSRI block by 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.

    In the Feast Plugin v.6.8.0 we introduced the ability to add the post IDs to the "All Posts" admin screen:

    See it in action:

    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 anywhere on the page, it doesn't matter.

    The FSRI block also improves on previous "display posts" widgets by only linking to your post once (instead of once in an image, once in text), and using regular text instead of an h2.

    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 block editor behaves different than the front end and the block editor preview should be considered placeholder content only - the correct output is on the front end of the website
    • 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

    Why aren't my images showing?

    Typically, this is because you haven't regenerated your thumbnails. It could also be because you're using a CDN (such as Jetpack). Please disable the CDN. Finally, check that you actually have featured images set on your posts.

    Do you support CDNs?

    No. CDNs require advanced configuration and require professional assistance from a paid specialist such as nerdpress.

    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:

    Feast plugins' default image size setting

    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; }
    • Food Blog Site Structure
    • How to Write a Recipe Post
    • Category Pages Need Content
    • SEO for Food Bloggers

    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; }
    }
    • Food Blog Site Structure
    • How to Write a Recipe Post
    • Category Pages Need Content
    • SEO for Food Bloggers

    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.

    Custom post types

    If you have CPTs (custom post types) on your site, you can enable displaying them by adding a filter to the Code Snippets plugin:

    add_filter( 'fsri_shortcode_args', 'fsri_modify_post_type_search', 10, 2 );
    function fsri_modify_post_type_search ( $args, $atts ) {
    	$args['post_type'] = array( 'post', 'recipe' );
    	return $args;
    }

    Update the array to include any post type you want to include.

    Note: this modifies the FSRI blocks site-wide.

    Reader Interactions

    Comments

    1. Bettina says

      June 10, 2020 at 12:29 am

      These are pretty cool news and it works like a charm. Thank you for adding this to the plugin.

      Reply
    2. Amy Treasure says

      February 25, 2021 at 6:45 am

      Thanks so much for this. Been on my to-do list for ages. Literally took 3 mins!

      Reply
    3. Shareba says

      April 08, 2022 at 12:19 pm

      Thank you for adding the post ID section, that's so helpful.

      Reply

    Leave a Reply Cancel reply

    Your email address will not be published. Required fields are marked *

    Primary Sidebar

    Themes

    • Feast Plugin
    • Foodie Pro Classic
    • Brunch Pro Classic
    • Cook'd Pro Classic
    • Cravings Pro Classic
    • Seasoned Pro Classic

    Feast Plugin

    • Feast Plugin
    • Modern Homepage
    • Modern Sidebar
    • Modern Footer
    • Modern Mobile Menu
    • Modern Menu
    • Modern Recipe Index
    • Modern Categories
    • Recipe Update Checklist
    • Recipe Post Template

    Resources

    • Pagespeed Audit
    • Image optimization
    • Recipe Guidelines for Foodie Bloggers
    • How to write a recipe post
    • SEO for Food Bloggers
    • Tutorials

    more resources →

    Categories

    • How to use categories
    • Category pages need content
    • How to configure the category pages
    • Food blog site structure
    • Food blog page structure
    • Simple Category Index

    Footer

    ↑ back to top

    Topics

    • Food Blog Design and Appearance
    • Productivity
    • Tech and Plugins
    • Food Blogging and Promotion
    • Minimalist WordPress Themes
    • Simple WordPress Themes

    Help

    • Documentation & Tutorials
    • Food Blogging Resources
    • Open A Support Ticket
    • Your Account
    • Subscriptions
    • Downloads
    • Discounts and Coupons
    • Compatibility

    Company

    • Subscribe to newsletter
    • Privacy Policy
    • Refund policy
    • Terms & Conditions
    • Principles and Best Practices
    • Affiliates
    • Contact

    Copyright © 2022 · Feast Design Co.

    Results not typical or guaranteed. Our themes and plugins are just a small part of the overall effort involved in running a food blog. Nothing on this website shall constitute legal or financial advice, always consult a local lawyer and accountant. Accessing this website and all transactions herein are under the laws and jurisdiction of Toronto, Ontario, Canada.