Add background images to a Bibblio module
You might have pages on your site that don’t have images in them. 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 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 your site's pre-existing style sheet. Be sure your style sheet loads after the Bibblio style sheet (bib-related-content.css) so that it overwrites Bibblio’s default class properly.
The following guide explains how to either:
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.
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.
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; }
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 ); }