In one of my Jekyll projects I wanted to load a random background image every time the page loaded. Backstretch is a nice jQuery plug-in to display a large background image “jumbotron” style. So I got it to work by combining Backstretch with a little bit of JavaScript and Jekyll Liquid. I’ll show you how.
Backstretch
On your Jekyll layout, load the Backstretch plug-in.
...
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
</body>
Javascript
Add this to your Jekyll layout after the script tag that loads the Backstretch plug-in. This will select a random image and display it. Like so:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
<script>
// Image pool to select from
var images = [
'image1.jpg', 'image2.jpg', 'image3.jpg'
];
// Pick a random image
var maxImages = images.length;
var rand = Math.floor(Math.random() * maxImages);
var image = images[rand];
// Set image as background
$(".jumbotron").backstretch(
'/assets/img/' + image,
{
centeredY: false
}
);
</script>
</body>
Note: Be sure to replace the image file names and path with your own.
HTML
Use the Bootstrap jumbotron class to display the background image on your page or post and you’re done!
<div class="jumbotron">
<div class="container text-center">
<h1>Hello World!</h1>
</div>
</div>
More Flexibility
If you want to have the flexibility to override the random image with a specific one determined on a page by page basis, you can just add a few modifications:
Front Matter
In your page’s front matter, add a variable with the image name, like so:
---
layout: your_layout
...
image: your_image_file_name
---
Head
On your layout, add a meta tag so we can pass the image file name from Jekyll to JavaScript.
<head>
...
{% if page.image %}
<meta name="backg-image" content="cliff.jpg">
{% endif %}
</head>
Javascript
Add a Liquid condition to run the appropriate JavaScript code:
{%if page.image %}
<script>
// Use image file provided by the page
var image = $('meta[name="backg-image"]').attr('content');
</script>
{% else %}
<script>
// Image pool to select from
var images = [
'image1.jpg', 'image2.jpg', 'image3.jpg'
];
// Pick a random image
var maxImages = images.length;
var rand = Math.floor(Math.random() * maxImages);
var image = images[rand];
</script>
{% endif %}
<script>
// Set image as background
$(".jumbotron").backstretch(
'/assets/img/' + image,
{
centeredY: false
}
);
</script>
That’s it. Load and reload your page and you should see the image changing randomly.
Happy coding!
Top comments (0)