Featured Images – A Deep Dive

Click play to LISTEN to the article below
Request a Demo

Introduction

This guide will help you understand how to effectively manage and optimize featured images on your website. If you’ve ever struggled with how your images appear in article widgets, this post will provide you with clear steps to enhance their display.

Article Widget Showcase

Overview of Available Widgets

Widget Showcase – Slider
Widget Showcase – One Column
Widget Showcase – Two Column
Widget Showcase – Vertical Stack
Widget Showcase – Horizontal Grid
Widget Showcase – Headlines with Hero Image
Widget Showcase – Magazine Style
Widget Showcase – Headlines (Sidebar)

Image Cropping Considerations

  • Default Display: Images will show blurred borders to ensure visibility.
  • Adjusting Crops: You can specify which part of the image to display in the widgets by using the Crop Featured Image tool.

Featured Image Sizes and Cropping

Steps to Reframe Featured Images

  1. Access the Article: Click on the article you want to edit.
  1. Edit Article: Use the admin bar to access the editing options.
Edit an Article from the Admin Bar
  1. Locate Featured Image Panel: Click the crop featured image button.
Featured Image Panel in the Article Editor
  1. Identify Widget Sizes: Note the sizes used by different widgets (e.g., slider, one column, two column). When using the default settings for the article widgets there are only three size variants being used and as such we only need to adjust the cropping on those highlighted below:
Size variants displayed by default in the various article widgets.
  1. Crop the Image: Click on the desired crop size and adjust the preview. Note once a crop has been set you cannot revert to the “blurred borders” version.
Overlay Preview of Featured Image Crop
  1. Save Changes: Hit save crop to apply changes to the selected image size.

Example Sizes

  • Original Image: 1831 x 1000 px
  • Slider Image: 960 x 720 px
  • Square Thumb: 400 x 400 px
  • Small Thumb: 400 x 300 px
Featured Image One-Sheet

Tips and Tricks: Minimum Image Size

Recommended Image Dimensions

  • Minimum Size: Ensure images are at least 960 x 720 pixels, but for optimal cropping we recommend at least 1000px on the shortest dimension.
  • Testing Smaller Images: If using smaller images, be aware of cropping limitations and warnings.
Warning for Images Size below Minimum to Maintain Quality

Tips and Tricks: Vertical Photos

Managing Tall Images

  1. Edit Article: Access the article containing the vertical image.
  2. Crop Featured Image: Click to adjust the cropping. Note once a crop has been set you cannot revert to the “blurred borders” version.
  3. Adjust Dimensions: Ensure the crop fits the widget requirements.
  4. Save and Update: Save the crop and update the article to reflect changes.
Featured Image Crop – Vertical Photo

Featured Image Troubleshooting

Steps to Resolve Display Issues

  1. Edit Article: Open the article and remove the featured image.
  2. Save Changes: Update the article without the featured image.
  3. Re-add Featured Image: Add the featured image back and update again.
  4. Clear Cache: If changes aren’t visible, clear your browser cache or open the site in a private window. Click the link below for instructions on how to clear the local cache for your particular browser:

Conclusion

By following these steps, you can effectively manage and optimize your featured images, ensuring they display beautifully across all widgets on your website. Regularly check image sizes and cropping options to maintain a professional appearance.

Share this Post: Facebook Twitter Pinterest Google Plus StumbleUpon Reddit RSS Email

Comments are closed.