How to...

Add background images to a Bibblio module

Provide alternatives for content without images

You might have pages on your site that don’t have images in them, be they WordPress 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.

A blog using missing images

This will mean that you’ll see gray tiles representing these pages in the Bibblio Related Content Module. They will work sure enough but they won’t be very impactful.

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

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

If you do not want to edit a style sheet file, you can edit your "Additional CSS" directly via your WP admin’s Appearance Customizer. To do this, in your WP admin, click Appearance > Customize then click Additional CSS from the menu. Paste the CSS here and click Save & Publish.

The following guide explains how to either:

  1. change the default gray background to one single image,
  2. change the default gray background to several images to avoid repetition in one module,
  3. change the color of the default background to something other than gray.

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, changing the class number to correspond with each tile. (In the code a tile is defined as a link. e.g. .bib__link--1, .bib__link--2 etc.) Set the URL to the path of each image, for example:

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

.bib__link--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 );
}

Need further assistance?

Visit the Help Center or get in touch with the Bibblio team.