• 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
  • Feast Plugin
  • Support
  • Tutorials
  • Account
    • Facebook
    • Instagram
    • Twitter
  • search icon
    Homepage link
    • Feast Plugin
    • Support
    • Tutorials
    • Account
    • Facebook
    • Instagram
    • Twitter
  • ×

    Home » News & Updates

    Process Shots

    Published: Jun 8, 2022 · Modified: Aug 14, 2022 by Skylar · Leave a Comment

    We recommend using the columns block to lay out process shots for instructions.

    Jump to:
    • Galleries
    • Collages
    • Columns
    • Adding columns
    • Numbering the steps

    Galleries

    We do not recommend galleries because they're not well developed and have undergone a couple changes - and we expect more to come.

    Issues we see are:

    • how alt text is set
    • their use of captions
    • spacing
    • thumbnail size selection

    Collages

    Collages are an option. When using a collage:

    • make sure to export as JPG (not the default in Canva)
    • use a maximum of 4 images per collage, in a 2x2 grid
    • if there's more than 1 collage (eg. steps 5-8), make sure the numbered list starts at the correct step (eg. 5)
      • Note: we haven't tested whether screen readers read the number in numbered lists starting at a number other than 1, or whether they're treated as normal lists

    Any posts created using collages can be left as-is, as they're totally usable.

    Our opinion at Feast is that collages are an inferior solution to columns because:

    • they require creating a new collage image
    • most people design collages for desktop view rather than mobile
    • the alt text is not as descriptive as you'd get from individual images
    • there's missing SEO opportunity for better naming of images
    • numbers/labels are needed on each image in the collage to properly associated it with the instruction step
    • the instruction steps are are further spaced away from the image they're related to
    • more scrolling is required between the image and instructions

    With columns, each image is directly connected to the associated instruction, making numbering unnecessary, although still an option.

    Columns

    We recommend using the columns block for process shots because it uses the core image and paragraph blocks which are the easiest to manage for accessibility and SEO.

    These are relatively stable blocks and unlikely to go through any major changes.

    Rules for using columns:

    1. Use one column block per row
      • there should only be one picture + paragraph per column
    2. Upload images at full width to the media library, but insert them at 360px width thumbnail
      • Note: for re-use purposes and long-term maintenance, we would still recommend uploading the process shots at 1200px
    3. Use proper naming conventions for images (eg. recipe-modifier.jpg) for the images

    We recommend allowing the columns to stack on mobile, which is the default setting. We've found that ½ width display on mobile is too narrow for text to be easily readable.

    Adding columns

    It's important to only use 50/50 column layout and one image + paragraph per column.

    Adding another "columns block" for further instruction steps is simple:

    Numbering the steps

    While galleries and collages require numbering the steps (so that images and instructions can be correlated), columns don't require numbering.

    On the one hand, the number doesn't provide much context to readers (step 4... of 8? or 62?)

    On the other hand, it can be useful for screen readers and people making a recipe together, to reference specific steps (eg. "did you forget the salt in step 3?").

    Numbering images can create a problem down the road if the recipe needs to be altered based on visitor questions - requiring a step to be added to the recipe for example.

    We haven't received enough feedback to recommend or not recommend numbered steps.

    More

    • Modern 404
    • Private Label Rights (PLR)
    • Focus
    • Either "name" or "item. name" should be specified (in "itemListElement")

    Reader Interactions

    Leave a Reply Cancel reply

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

    Primary Sidebar

    Themes

    • Feast Plugin grants access to all 5 themes
    • Not sure where to start? See the getting started guide

    Feast Plugin

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

    Resources

    • Image optimization
    • Recipe Guidelines for Foodie Bloggers
    • How to write a recipe post
    • Page headings
    • SEO for Food Bloggers
    • Tutorials
    • Pagespeed Audit
    • Comments
    • Internal links

    more resources →

    Categories

    • Modern Recipe Index
    • Modern Categories
    • Posts per Page
    • How to use categories
    • Category pages need content
    • How to configure the category pages
    • Food blog site structure
    • Food blog page structure

    Classic themes

    The classic themes are only for hobby sites and any food blog interested in monetizing or SEO needs the Feast Plugin.

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

    Footer

    ↑ back to top

    Topics

    • Food Blog Design and Appearance
    • Productivity
    • Tech and Plugins
    • Food Blogging and Promotion
    • Minimalist WordPress Themes
    • Simple WordPress Themes
    • Travel blogs
    • Knitting + DIY blogs

    Help

    • Documentation & Tutorials
    • Food Blogging Resources
    • Open A Support Ticket
    • Login
    • 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 © 2023 · 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.