What is the Featured Image?
Example of how a Featured Image may appear in your post
The Featured Image is a key visual element of any website post (an event, an article, a blog post etc), representing the content of that post. The image is often displayed prominently at the top of the content and used as a thumbnail in various contexts, such as archives, related posts sections, and when the content is shared on social media. It serves to attract attention and provide a visual summary of the topic.
It is important for our website’s consistent appearance and behaviour that you aways add a featured image to your post.
One adds this image using the “Featured Image” control panel when editing a post.
Automatic Embedding
On this website, if you have added no images to your post, the website will automatically insert the featured image to the top paragraph of your post, formatting it in keeping with the website’s style.
You may override this behaviour, if you wish (see the next section).
Overriding Automatic Embedding
If your post has no images, the website will automatically embed the Featured Image at the top of your post’s content. The image appears right-aligned when viewed on desktop-style devices, and repositions itself into the centre of the top paragraph when viewed on smartphone/tablet devices.
You may override this feature in one of two main ways:
1) Embedding your own image
In these steps, you will embed your own image(s) into your post; adding an image prevents the Featured Image from being embedded automatically. This approach has the added bonus of adding a caption to any image you embed.
- Edit a post and make sure you’re using the [Visual] tab
- Position your cursor somewhere on the left (beginning of sentence, for example).
- Click the [Add Media]
- Find the image you want, and click on it to select it (we have another task to do before we place the image into the post)
- On the furthest right-hand side of the media selection window, look at the grey “Attachment Details” panel:
- Use the Caption box to type in an appropriate caption that will appear on the bottom of the image
- Scroll down to “Attachment Display Settings”, and select:
- Alignment: Right
- Link to: Media File
- (Leave URL as it is)
- Size: Something that’s around 300/400 pixels wide (often “Medium” will give you this) but you can experiment.
- Click [Insert Post] (the image now appears in your post).
- Lastly, and this is important:
- Click the image once, and a toolbar will appear.
- Select the pencil image (“Edit”)
- In the Image Details window that opened, locate the field labelled “Image CSS Class” and enter: border_1 (this will apply a specific border around the image, ensuring it appears consistent with other images on the website).
- Click the [Update] button
Undoing things Going Wrong
2) Configuring your post to Prevent automatic Featured Image Embedding
For posts with no images, follow these steps to stop the automatic image from being embedded:
- While editing your post, find the section titled Developers.
- In the field CSS File add (or append, using commas to separate each entry) the filename: no_featured_image_embed.css
- Save your post.
To undo this, simply remove no_featured_image_embed.css from the CSS File field (leaving any other filenames in this field untouched).
Contents
0 Comments