This document will help you avoid blurry and cut-off images. Learn how to get your images perfectly sized every time. Also, for more details, please check our Blog article on featured images. 

Why Is Featured Image Important?

Featured Image is most often the first point of contact between your content and users. Whether we’re talking about social media, browsing through your website, or any other search, the task of the featured image is to attract the user’s attention.

This image most often shows on the top of your posts, your website’s Blog Page, and related posts. Also, a featured image is often displayed when your content is shared on social media or as a message. 

The featured image gives a glimpse of the content in your post or page. Furthermore, it creates user expectations regarding the quality of your content as well as the offer. 

Also, with a bit of effort when designing your featured images, this becomes a chance to raise your brand awareness and stand out from the crowd.

Having said that, it’s clear why is it is crucial to make your featured image perfect every time.

Social Sharing

When your website content is shared on social media, your featured image will take a central role in attracting traffic, as it is shown together with the title whenever shared. 

Here, your images will be scaled proportionally. Thus, failing to set them properly may result in cropping, thus making parts of your image not visible.

SEO plugins like Yoast SEO or RankMath will provide you with options like adding a custom title and description for your posts, pages, and other content. Also, you could choose a different featured image, title, and description for sharing on Facebook or Twitter.

Set Featured Image

We explained the importance of featured images and how these are used. Now, let’s talk about featured image size and how to set things up.

To add a featured image to a page or a post, you will need to edit it. Once you start editing, choose a featured image in the page/post settings. As an example, we will explain how to add a featured image to a new post:

Step 1 – Navigate to Dashboard > Post > Add New;

Step 2 – On the right side of the screen, check the post settings, and scroll down to the “Featured Image” section;

Step 3 – Click on the “Set Featured Image” field, and select or upload your featured image;

Step 4 – Publish/Update doc to save featured image.

Featured Image Size

Featured image size may vary depending on the theme being used. With Astra Theme, we recommend uploading the image size of 1200 pixels (width) by 628 pixels (height):

Once you upload the image, WordPress will automatically create several versions of your original image, used for different screen sizes. 

Setting your original image to 1200 x 628 pixels will also help avoid some cropping issues on your website and social media both.

Uploading Right-Sized Image vs. Resizing

It is vital to have all of your images optimized as the size of the images impacts your loading times and overall website performance. Some great tools will do this for you. You can check our blog article to compare different image optimization plugins and choose the best tool for you.

On the other hand, though these tools are a great help, only up to a certain point. To achieve the best results, the image files should be already formatted the right way before uploading them to your website.

This article explains how you can use this option.

What Are Related Posts?

Related posts are displayed at the bottom of a single post. These posts are picked from related categories or tags of the current post. So when users complete reading the current post, they find more related content that can engage them for a longer time. This way users get to read more content related to their topic of interest and it brings more page views for your website.

For example – Let’s say you have posts named A, B, C, D in the category Fashion. So on the post A, the rest of the posts from the same category i.e B, C, D will be displayed as related posts at the bottom. Once the user completes reading post A, he/she can choose from other posts and continue reading.

Let’s see how you can add related posts using Astra –

Add Related Posts With Astra

Astra makes it easy to display related posts on all single posts. The option is available right inside customizer so that you don’t need to use any extra plugin. Astra gives you total control to display and customize related posts.

Here are steps to enable relates posts on single posts –

Before we begin, make sure you have Astra theme updated to version 3.4 and above.

Step 1 – From WordPress dashboard, go to Appearance > Customize.

Step 2 – In the Customizer, visit Blog > Single Post.

Step 3 – Here you will find option to ‘Enable Related Posts’. Turn it on. It will display more controls below the option.

Title – This option allows you to highlight your related post section with an engaging title. You can rename the default “Related Posts” title to anything you need. Also, you can manage the related posts section title alignment.

Total Number of Related Posts – Here you can decide how many posts from the related category or tag you wish to display. For example – if you have 20 posts under the category Fashion, decide how many posts from this category should be displayed as related posts.

Grid Column Layout – Related posts will be displayed in a grid structure, i.e., a row-column structure. First, you can set the number of columns you wish to display. Then, based on the total number of posts you display with the above option and column number, rows will be added automatically. For example, if you display 8 posts with 3 columns, you will see posts displayed in 3 rows. Related posts column grid is also responsive – you can set the different number of columns for each of the devices by clicking on the responsive icon.

Posts Query – Here you can set a source to fetch related posts from. You can choose Categories or Tags. Posts will be fetched randomly from chosen source and will be displayed as related posts. You can manage to display posts in a particular order.

Posts Structure – Here you can manage to display featured image, title, and post metadata. Just click on the eye symbol to enable or disable the particular section of the post. You can even manage the sequence of metadata by simple drag and drop.

For example – Let’s say you wish to display the featured image, title, category, and publish date for posts, here is a video that shows how you can set it –

Step 4 – Once you decide on a structure you wish to display related posts with, you can set the color and typography of your choice. Click on the Design tab at the top and you will observe dedicated options for related posts.

Here you can set –

• Section Title
• Section Background
• Content Colors
• Section Title Font
• Post Title Font
• Meta Font

Published date is displayed in the front end

Both, published as well as updated dates are available in the markup.

If you want to display last updated date for the post to your visitors, use the following custom code –

/**
 * Display only last modified date in the post metadata.
 *
 * @param String $output Markup for the last modified date.
 * @return void
 */
function your_prefix_post_date( $output ) {
	$output        = '';
	$format        = apply_filters( 'astra_post_date_format', '' );
	$modified_date = esc_html( get_the_modified_date( $format ) );
	$modified_on   = sprintf(
		esc_html( '%s' ),
		$modified_date
	);
	$output       .= '';
	$output       .= ' ' . $modified_on . '';
	$output       .= '';
	return $output;
}
add_filter( 'astra_post_date', 'your_prefix_post_date' );

It hides the published date and makes updated date visible.

Astra helps you to design blog pages in an easier way.

You can find the setting under Appearance > Customize > Blog

Under the blog, you will find the settings for:

• Blog / Archive
• Single Post

We provide more styling options in dedicated modules of Astra Pro Addon plugin. Learn more about the Blog Pro module of Astra Pro Addon.

You can find the setting under Appearance > Customize > Blog > Blog / Archive

Under Blog / Archive there are total 4 settings:

• Blog Post Content
• Blog Post Structure
• Blog Meta
• Blog Content Width

Blog Pro module available with Astra Pro adds more options in the customizer for the blog layouts.

Blog Post Content

The written matter on a blog means the blog post content.
You can manage the content in the following manner:

Full Content

Where the entire write-ups or the copy matter written for a blog post is visible on the archive page.

Excerpt Content

Excerpt content means displaying a short extract of the content, where the count of words is restricted. The default length is 55 words.

Note: If you have entered the excerpt content from the blog excerpt area it will overwrite the current excerpt.

Blog Pro module available with Astra Pro gives you options to control the word count.

Blog Post Structure

Blog post structure helps you in managing the featured image, title, and the blog Meta.
You can hide the featured image for your blog posts.

In the same way, you can hide the Blog meta settings

Note: When you turn OFF the title and blog meta settings, option for Blog Meta disappears.

You can even swap the position of the image and meta settings with a simple drag-drop method.

Blog Meta

Blog meta is all about the in-short description explaining what the blog is all about. It gives extra information about the blog.
Where the author has control to show/hide the number of comments received, the category the post, who is the author, the publish date and the tags.

Note: For managing the categories, tags and publish dates you will have to edit the individual post from the backend of WordPress.

Blog Content Width

Just the way you have the option to manage the container width of your website, you have an option to manage the container width of your blog page.

Typography

You will be able to set the Typography of the Archive Title and Post Title from the settings under this option.

We provide more styling options in dedicated modules of Astra Pro Addon plugin. Learn more about the Blog Pro module of Astra Pro Addon.

Apart from the featured image, you can add images and videos in the post through the media. You can also add/embed the related or reference links to the topics.

You can find the setting under Appearance > Customize > Blog > Single Post

We provide more styling options in dedicated modules of Astra Pro Addon plugin. Learn more about the Blog Pro module of Astra Pro Addon.