DEV Community

Mario
Mario

Posted on • Originally published at mariorodriguez.co on

Load a Random Background Image on Page Load in Jekyll

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)