The default placeholder image for my blog posts has been a gray box for a while so I finally decided to do something about it and add a quick writeup here so that I can remember how I did it. The main thing to remember is that the source code for the blog post template is not in the code repo, it's saved in the database which makes sense but there's a copy of it in github which I always find and start modifying first before spending like 30 minutes remembering that I need to update the html in the admin section under Design --> Templates.
I'll include a code sample here shortly, but it's pretty straight forward, just using some javascript to detect when the image loaded from the server is blank and injecting a randomly selected image from a predefined folder. Not perfect, but gets the job done and one of the habits I'm picking up from working at a startup is that imperfect shipped code beats perfect unshipped code every, single, time.
<script>
document.addEventListener("DOMContentLoaded", function() {
var headerBackground = document.getElementById("header-background");
var currentBackground = headerBackground.style.backgroundImage;
window.status=currentBackground;
if (!currentBackground || currentBackground === 'url("/media/")') {
var images = [
'/media/random-images/image1.jpg',
'/media/random-images/image2.jpg',
'/media/random-images/image3.jpg',
'/media/random-images/image4.jpg'
// Add more image paths as needed
];
var randomImage = images[Math.floor(Math.random() * images.length)];
headerBackground.style.backgroundImage = 'url(' + randomImage + ')';
}
});
</script>