How to...

Choose one default background image

You might prefer to keep it simple by choosing one single generic image to appear on all recommendations without a thumbnail image (Your own logo could be a good option for example.) In that case, make sure the image you choose is cropped to a thumbnail format, resized around 500px wide and compressed so it isn't too heavy, then save it to your site.

Add the following CSS to your style sheet replacing the URL with your own image URL path:

.bib__image {
   background-image: url('https://assets.bibblio.org/hubfs/images/visuals/support/bibblio-how-to-social.jpg');
}

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 background image displaying in those gaps.

Choose one image per tile

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.

Choose up to six pictures that you've not used as thumbnails before (and don't plan to in the future!) Choosing more than one and keeping them 'reserved' ensures no image repeats in the same module. Crop these images to a similar ratio to your other thumbnails, 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, making sure the number in the "nth-of-type" pseudo selector corresponds to each tile. Set the URL to the path of each image, for example:

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

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

etc.

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.

Change the background color

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;
}

Optional: Add a black gradient

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 an 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 );
}