Making the most of images on your Related Posts by Bibblio 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.

Related Posts by Bibblio 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 by Bibblio plugin's module designer
The Related Posts by Bibblio 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 Related Posts by Bibblio 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__image {
    background-image: url('https://images.bibblio.org/bkgds/demos/publishing-virtual.jpg');
}

.bib__tile--2 .bib__image {
    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__image {
   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 Wide (16:9 widescreen size), 4:3 (a standard landscape postcard-like size), Square (both width and height are equal) and Tall (a portrait shape for books and films).

Each of these sizes will influence how your posts’ Featured Images will display in the tiles. The images will proportionately scale themselves to the tiles, so if the majority of your pictures are a particular orientation, choose the ratio that would best show them off.

Other factors such as post title length may also influence which ratio works best. For instance, a square or tall ratio allows more text to be displayed, so would suit a site that invariably uses long titles.

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 the Related Posts by Bibblio plugin

Recommended for you