Tutorial - How to Use Featured Images

[wparasae]

Topic Description

Based off of the lesson plan: Featured Image -- abbreviated version

What is a featured image in WordPress? How is it the same as what displays on social shares vs what displays on your own site? How do themes use featured images? Set a featured image, view where it displays in a query loop. Demonstrate using a featured image block and featured image within a cover block.

Related Resources

Links to related content on Learn, HelpHub, DevHub, GitHub Gutenberg Issues, DevNotes, etc.

• https://wordpress.org/documentation/article/page-post-settings-sidebar/#featured-image
• https://wordpress.org/documentation/article/post-featured-image-block/
• https://learn.wordpress.org/tutorial/adding-removing-images/

Guidelines

Review the team guidelines

Tutorial Development Checklist

• Vetted by instructional designers for content idea
• Provide feedback of the idea
• Gather links to Support and Developer Docs
• Review any related material on Learn
• Define several SEO keywords to use in the article and where they should be prominently used
• Description and Objectives finalized [pulled directly from the lesson plan]
• Tutorial created and announced to the team for Q/A review
• Tutorial reviewed and ready to publish
• Tutorial submitted and published to WPTV
• Tutorial published on WPTV
• Tutorial captioned
• Tutorial created on Learn.WordPress.org
• Tutorial post reviewed for grammar, spelling, etc.
• Tutorial published on Learn.WordPress.org
• Tutorial announced to Marketing Team for promotion

[wparasae]

Script (Rough Draft)

One of the best features of WordPress is that it allows you to create beautiful-looking galleries in a post or a page with a click of a button. If you’re new to WordPress, you might notice that your theme includes a space on the homepage or blog page for an image representing a post or page, or on the post or page itself. You might be wondering,

How do I select an image to fill that space?

How does WordPress know which image to show on my home page?

And, as a bonus, imagine you want to share a post or a page on social media: in a post or page that has lots of images, which image will a social media website such as Facebook, Twitter, or LinkedIn choose to display?

The answer to each of these questions is this: Use a Featured Image

Script: To find your featured image section, first, open a post or a page. From there, select the ‘settings icon’, make sure that it says ‘post or page’, and then scroll down. You can then select X button to be taken to your media library, where you can pick which image you’d like to use.

By default, some themes, especially classic themes, will use your featured image in a pre-defined way, such as across the header of a post or page, on your home page, or on your blog page. These themes may suggest an image size that will work best for your particular theme–in a classic theme, be aware that you will need to know some code if you want to change the way your featured images appear; as a positive, however, classic themes from the theme repository are curated by designers and are great options for people who want to focus only on their content, trusting their theme to make it beautiful every time.

If you’re using a block theme, you have much more control over how your featured images appear on your block theme website without using any code on your home page, your post page, and your blog page.

For example, you can use a queryloop to pull featured images in from each post, adjust the size of each, add borders and padding–or remove them altogether.

You can also edit a post or page template using the featured image block so that a featured image appears in a way that you would prefer. For example, this template has been designed to show a large featured image in the left column and displays the written post content on the right.

Featured images are also the image that will be used by social media if you or someone else shares a page or post from your website on social media.

Bonus Content: Similarly to featured images,The text that will appear on a social media preview is usually pulled from the post excerpt and may be displayed on your theme in different ways.

Do know that there are many plugins available to help you hone your website’s social media appearance–this is simply the way to do so using only core WordPress.

[wparasae]

Slideshow resources: https://docs.google.com/presentation/d/1xkcOFFaJPQEn2V1kOp9ibokxOOuDyK0jtVfM8JgCp0U/edit?usp=sharing

[wparasae]

Sound and visuals complete in rough draft form; the next step is to edit it all together and add transitions, and then it will be ready for review. Working on that next!

[wparasae]

Ready for Review (~7 minutes, a little less):

https://drive.google.com/file/d/1eKZzLSq7B2whr0MtZwDVRcvlhnm8IVeE/view?usp=sharing

1. My birds are reeeeeeeeally loud today, even with Krisp. Do I need to re-record any sections because of them? I can't tell because they are still tweeting. 😓

2. Does the content give enough context for a beginner to start experimenting with a WordPress block theme, or do I need to go in-depth about making changes to featured images in block themes? I specifically refrained from doing too much there as some settings (like border and radius) will not be enabled for all block themes. Your thoughts are valuable!

[westnz]

Review:

• Well done Sarah!
• The sound quality is great. I cant' hear any birds, Krisp has done its job successfully.
• I think you might give a bit more context for block themes
• I like the annotations you have used.
• Remove dead space: 1:49 - 1:55
• Remove the breath at 2:52
• Could you relook at 2:59 - 3:15. I can't follow along visually. It would help if you could show the individual post with the featured image slowly and then the homepage. The transition after the homepage example was also a bit too fast. Allow another 2 or 3 seconds before moving on.
• May I suggest just having a static screenshot when you say "By default, most themes, Classic and Block will use your featured images in a preset way. However there are some differences how Classic and Block Themes use featured images that you should know about". It will help the learner to focus on what is being said. You can even have a slide with the words on it if you prefer. Then you can transition to the "Using Featured Images in Block Themes' slide.
• This relates to providing more context for block themes, but it will be helpful if you explain why you are editing the Single template.
• There are a few places in the tutorial when the mouse suddenly moves to a different part of the page. In future, it would be good to avoid this as it can be distracting.
• 4:45 - 4:46 Could slow down the transition here? It suddenly moves from the cat to the bird image.
• I suggest re-recording your screencast 5:33 - 5:56 for the 'Using Featured Images in Classic Themes' section to ensure there is a correlation between what is being said and shown. I couldn't concentrate on what was said while looking at what was being done in the Customizer. Using some slides might be a quick solution.

Hope these comments are helpful

[gudrunfrank]

Sound is clear, Sarah. There is a big need for beginner tutorials like this. I think it would help if you could speak more slowly. Especially, since we have an International audience whose primary language is not English, slower and clearly spoken texts are easier to follow.
In general, I think your tutorial shows that we have a big problem naming what was the FSE. Now that it is not called Full Site Editor anymore, the confusion what to call it is complete. You refer to it as "block editor" vs. "classic editor". But "classic editor" used to be the old way before Gutenberg Blocks, hence the Classic Editor Plugin. Gutenberg is a block editor. Therefore, labeling the FSE block editor as a distinguishing feature is not clear.

[askdesign]

Excellent tut, Sarah. The sound quality is fine: crisp and clear, with no birds chirping. Good tone, encouraging, and welcoming. This definitely provides ample information for a beginner to get their feet wet and dive into the featured image. I liked the comparison between Block vs. Classic Themes' use of featured image.

Here are some specific points of feedback:

• 1:30 - When describing how to edit a post or page, you offer 2 methods. Regarding the 2nd method ("Click on a post or page on your website"), I don't think it's entirely clear unless you say something like "when viewing your post or page on the front-end".

• 1:32 - "Make sure not to confuse this with 'Edit Site'"
  Doesn't this apply only to Block Themes?

• 1:49 - 1:56 - remove dead space

• 2:13 - It's a rectangle, not a square. So, maybe use the term "box" instead?

• 2:52-2:53 - remove the breath and the subsequent dead space

[nomad-skateboarding-dev]

Overall Impression

Well done, Sarah! No specific feedback to add that others haven't already. I thought this was awesome and will be a helpful addition to Learn content!. 🏅