Making the most of images on your Related Posts for WordPress plugin

< Blog home

We're more likely to click on an image than plain text, so make sure your related posts pack a visual punch.

Bibblio’s Related Posts for WordPress has become the much-discussed new kid on the block of content recommendation plugins. Its use of AI to constantly monitor and select the most appropriate content suggestions to appear below site posts has set it apart from the raft of predecessors that have saturated this increasingly important area of audience retention.

Alongside the AI, Bibblio’s plugin boasts a slickly-designed, customizable module, with many controls to determine how it looks and behaves. Literally hundreds of combinations are available to the WordPresser, from the layout of the recommendation tiles, to the text’s font and size, to the interaction effects.

The Related Posts for WordPress plugin's module designer
The Related Posts for WordPress plugin's module designer

What makes the most impact though are the images used on the module. These are vital in attracting the reader’s eye, encouraging them to discover more and stay on your site.

Here are 4 tips to make the most of imagery on your Bibblio Related Posts plugin...

 

1. Be sure your images are set as Featured Images

Featured Images are a standardized way to assign a primary visual element to your posts. The majority of WordPress templates support Featured Images (also known as post thumbnails) which allow third party plugins such as Bibblio’s to use them for other purposes.

Featured Images
The Featured Image dialog

If you do not have any images appearing in your Related Posts module, it is possible you aren’t using Featured Images. But fear not, you can use Martin Stehle’s Quick Featured Images plugin to bulk-update your posts with Featured Images. The premium version of Martin’s plugin gives you more control over the operation, with plenty of tools to achieve the best result.

When your posts update with the Featured Image change, the Related Posts plugin will see the update too.

 

2. Provide alternatives for posts that have no images

You might have posts that don’t have images in them, be they Featured Images or otherwise. This is fair enough - it might be an article that didn’t require illustration, or it might be a post containing embedded video or audio playback objects that were visually impacting enough. This will mean that you’ll see gray tiles representing these posts in the Related Posts module. They will work sure enough but they won’t be very impactful.

A post without a Featured Image would display a gray pattern on the module
A post without a Featured Image would display a gray pattern on the module

A solution to this is to add some generic images to the backgrounds of your Related Posts module tiles. That way, if a Featured Image is missing, the tile will show a default image instead of the gray background.

Say your website follows a football team - you could have a generic image of their stadium, one of the team, one of a close-up of the badge, one of the mascot geeing up the crowds, etc. If the images are ambiguous enough they will probably work with any post subject.

Do this by adding some CSS to either one of your pre-existing stylesheets or by creating a new one. Be sure your stylesheet loads after the Related Posts plugin’s stylesheet (bib-related-content.css) so that it overwrites the plugin’s default class properly.

Choose up to six pictures that you've not used as Featured Images before (and don't plan to in the future!) Choosing six and keeping them 'reserved' ensures no image repeats in the same module. Crop these images to a similar ratio to your Featured Images, resizing them to around 500px wide and compressing them so they aren’t too heavy, then save them to your site.

Add the following class for each of your tiles, changing the class number to correspond with each tile (e.g. .bib__tile--1, .bib__tile--2 etc.) and the URL to the path for each image, for example:

.bib__tile--1 .bib__link {
    background-image: url('https://images.bibblio.org/bkgds/demos/publishing-virtual.jpg');
}

.bib__tile--2 .bib__link {
    background-image: url('https://images.bibblio.org/bkgds/demos/publishing-laptop.jpg');
}

etc.

If you want to put the cherry on top, add the following class to your stylesheet. The black gradient behind the tile titles are darker when there's a Featured Image and lighter on the gray empty tiles, for better text legibility. This class will ensure the gradient is dark enough for all tiles:

    .bib__link .bib__info {
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
}

Save the CSS file and reload a post page that you know to have related post suggestions without images. You should see your new default images displaying in those gaps.

If you’d prefer not to use replacement images but instead would like to change the gray background for a different color, you can do so by ignoring the preceding classes and using the following code in your CSS, replacing the hex code with a color of your choice:

.bib__link {
   background-color: #FF9999;
}

 

3. Be sure your module shows off your images effectively

For the majority of layouts used on the Related Posts plugin, the module builder allows you to set the ratio of all of the tiles. The choice is 4:3 (a standard landscape postcard-like size), Square (both width and height are equal) and Wide (16:9 widescreen size).

Each of these sizes will influence how your posts’ Featured Images will display in the tiles. For example, if you have widescreen-shaped images and choose Square ratio tiles, the image will display centred in each tile with the left and right edges cropped off the sides. If you have square-shaped images and choose 4:3 ratio tiles, the image will fit in each tile with an effect auto-applied to blend it into the left and right sides.

How Featured Images display with the plugin's module designer settings
How Featured Images display with the plugin's module designer settings

Playing around with these ratios will reveal the best combination. Other factors such as post title length may also influence which ratio works best. For instance, a square ratio allows more text to be displayed, so would suit a site that invariably uses long titles.

Toggle 'Using portrait images' on if all of your images are that shape
Toggle 'Using portrait images' on if all of your images are that shape

Some sites use portrait shaped images (where the width is less than the height), which will create vertical letter-boxing on ratios such as 4:3 and square. This letter-boxing will be disguised by the blending effect, but if you'd prefer your images to fully fit the widths of each tile, go to the Modules tab in the Bibblio plugin admin, choose a module to edit and select “Using portrait images” from the Display Options panel. This will assume all images on your site are portrait shaped and will resize the images in each tile to fit correctly, anchoring them to the top of the tile. Very useful if all of your Featured Images are book covers!

 

4. Be careful your images aren't blurry

It could be that using a particular module makes your background images appear blurry or low quality. This is because the image might be being stretched to fit the larger area of each tile, and here's why...

In order to not have the user download high resolution versions of each related post's Featured Image, the plugin instead selects the "Medium" sized version. This was one of several default sizes saved by WordPress when you first added the image to your post. WordPress creates a medium-sized image by limiting the width or height (whichever is largest) to a maximum of 300 pixels, scaling the image proportionally.

Increase the dimensions of all future medium-sized images
Increase the dimensions of all future medium-sized images

Some of our plugin layouts may have tiles that are wider than 300 pixels in certain instances. The Featured Images are then forced to fit each tile, making them look poor quality.

You can ensure a better image quality for all of your future posts, by going to Settings > Media, changing the Medium size Max Width to 400 and Max Height to 600. Then clicking Save Changes. This will make all newly-created medium-sized images slightly larger, even in portrait orientation.

If you wish to change the "Medium" size of your existing featured images, there are a variety of plugins available to automatically resize them to your desired dimensions. Once complete, you will need to re-import your posts so that Bibblio knows the new image URLs for each. Please get in touch if you would like to clear your account to perform this.

 

In summary

Play around with the module builder and see what works best for your post images and titles. There will be an ideal layout for you, we're sure! You can even go further and customize the module as much as you like with your own stylesheets. It's your site and your plugin, so make it look as though it has always lived there! If you have any questions or feedback, get in touch with Bibblio’s WordPress team.

Also read5 ways to get more from Bibblio's Related Posts for WordPress plugin

Recommended for you