Featured Images Media Website Appearance Website Development XE Week 1 - introduction and websites

FEATURED IMAGES

Posts and pages can have a Featured Image set. Where and how the image is displayed depends on the theme of the site. With the theme I’m using the Featured Images appear with the title and preview of each post on the homepage.

screenshot of homepage

A featured image can be set when editing any post or page. On the right side of the editing page bellow Categories and Tags is the Featured Image panel.

featured image

Clicking ‘Set Featured Image’ brings up the media library for you to select or upload an image – very similar to adding media to a page or post. Just select the image you want (ideally something that represents the content of the page/post) and hit ‘Set Featured Image’.

set feature image

One thing to note is that it is not possible to edit the size or scale of the image you are selecting and this can impact the outcome. The size and format of the Featured Image is normally decided by the theme and it is worth finding out what image size is suitable to use. If you notice in the bellow image this site’s homepage, there are 6 post tiles, 3 with featured images that are all different sizes. The posts are given the same space on the page, they all include space for a Featured Image, the title of the post a 4 line preview of the post’s content.

screenshot of homepage

As the size of the tile, the title and the text preview are all preset it makes sense to select an image that makes the best use of the remaining space. Unfortunately there was no details on the ideal image size for the theme I’m using so I had to do some experimenting to find what works best.

post tile screenshot

From the posts that have an image set the bottom left uses the space best. I returned to that post to edit the featured image to see what size it was.

feature image size

As you can see the image is 807×565 pixels which simplifies down to a ratio of 1.43:1 (roughly). So for the Featured Images of my posts I need to select or edit images to be in that scale of 1.43:1. Also, as they’re thumbnail images they don’t need to have nearly as many pixels. I found and scaled my images, this is the result:

homepage tiles

 

Much better you’ll agree.

 

Print Friendly, PDF & Email

Leave a Reply

Your email address will not be published.

Powered by: Wordpress
Skip to toolbar