How to Use the Gutenberg Featured Image Block in WordPress

How to Use the Gutenberg Featured Image Block in WordPress

Graphics and visuals are a must for capturing the audience’s attention and enhancing the overall appeal of your content. Without visuals, your content will look boring, no matter how valuable texts and information you add. This is why, the idea of featured images has been so popular.

It summarizes the content of an entire blog post or piece of content in a single image. WordPress provides a default option to add a featured image for any blog post or page. Yet it offers a dedicated Featured Image block that you can integrate anywhere on your post/page editor.

In this guide, I’ll walk you through everything you need to know about the block including its basic functionalities. Let’s get into the discussion of how to use the Gutenberg Featured Image block in WordPress.

What Is the Featured Image in WordPress?

In WordPress, the Featured Image serves as a crucial visual element for posts and pages. It represents the main image associated with a particular piece of content. When you publish a post or page, the Featured Image is often displayed in search results, or within social media previews.

The Featured Image block is a default Gutenberg block in WordPress for managing and showcasing your post thumbnails directly within the editor. With the block, you can effortlessly add, edit, and customize your post thumbnails without leaving the editing interface.

This block empowers you to upload images, crop and resize them as needed, and even apply various effects and styles to enhance their visual appeal – all within a seamless editing workflow.

How to Add Featured Image to Post in WordPress

The WordPress Featured Image block is directly linked to the default featured image option. This means the image you add to the default featured image section will automatically be displayed on the block, and vice versa. So, let’s first add an image to the default featured image section.

Step 01: Open a Post and Add an Image to the Featured Image Section

Open a new post or an existing one. Navigate to Post > Featured Image section on the right sidebar. Click on the Set featured image box.

Go to the featured image section

To use an existing image for the feature image section, select the image from the Media Library section. But to add a new image, use the Upload files option.

In this tutorial, I will add an existing file for the featured image. Don’t forget to add alt text and title to the image. Finally, click the Set featured image button.

Explore how to add alt text to images in WordPress.

Select an image for the featured image section

You can see the featured image has been added to the respective section of the post.

The featured image is added

Step 02: Add the Gutenberg Featured Image Block to the Editor

Come to a suitable position on your post where you want to add the block. Find the Featured Image block by clicking the plus (+) button. Once you see this, add it to the editor.

Add the Gutenberg Featured Image Block to the Editor

You can see the Featured Image block has been added displaying the same image I added to the respective section just a minute ago.

The Featured Image block is added

Step 03: Stylize the Gutenberg Featured Image Block

Go to the Styles tab keeping the block. You’ll get options to add an overlay color, overlay opacity, filters, and dimensions to customize the block. Hope you can do these customizations yourself.

However, for inspiration, you may explore the post on how to use the Gutenberg Duotone filter in WordPress.

Stylize the Gutenberg Featured Image Block

Step 04: How to Change the Featured Image

Both the featured image block and section allow you to change the image. Here again, whatever option you use to change the image will automatically be applied to both fields.

Click any Replace button.

How to Change the Featured Image

Select a new image to replace the featured image whether from the existing ones or uploading a new one from your local drive. Hit the Set featured image button at the end.

Select a new image to replace the Featured Image

The featured image is changed.

The featured image is changed

Tips and Guides for the WordPress Featured Image Block

I will now share some tips and guides for the Featured Image block I learned through my personal blogging journey. Read them below.

1. Choose High-Quality Images

Select images that are high-resolution and visually appealing. High-quality images enhance the professionalism and attractiveness of your website.

2. Relevance to Content

Ensure that the Featured Image aligns with the content of your post or page. It should provide a visual representation or summary of what the content is about, enticing visitors to engage further.

3. Optimize for Web

Before uploading, optimize your images for the web to improve website performance. Compress images without sacrificing quality to reduce loading times and enhance user experience.

4. Consistency in Style

Maintain consistency in the style and format of your Featured Images to create a cohesive visual identity for your website. Consistency helps establish brand recognition and reinforces your website’s aesthetic appeal.

5. Consider Typography

If your Featured Image includes text, ensure that it is legible and complements the overall design. Avoid placing text in areas that may be obscured by overlaying elements or cropping on different devices.

6. Utilize Image Editing Tools

Take advantage of built-in image editing tools within WordPress or external software to enhance your Featured Images. Crop, resize, and apply filters or effects as needed to optimize visual appeal.

FAQ on the Gutenberg Featured Image Block in WordPress

Featured image is such an important web element without which any blog post today is incomplete. So, there are lots of questions in people’s minds about it. Some of these important questions will be answered in this section.

Is the featured image good for SEO?

The featured image doesn’t have a direct link to content ranking on the main search engine result pages. Yet, it has SEO value because it can rank your post in the image section of search engines. You may receive a considerable amount of clicks due to the captivating featured images in the image section.

What are the best tools to optimize the featured images?

Does naming images help SEO?

Is it necessary to add the Gutenberg Featured Image block to a post?

What are the best feature image sizes for blog posts?

Conclusion

Although it’s a simple block, I have tried to cover a detailed tutorial post on it. If I ever come across the block or WordPress has introduced new features/plugins for the featured image, I will try to add them in this post in the coming days.

If you are benefitting after studying my post, leave feedback in the comment section below. Visit my blog page to explore more interesting posts on WordPress.

Leave a Reply

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