Random section background image on each visit/refresh

Hi all,

I'm trying to get the background image of a section (first section on a 7.1 home page) to randomly load a different image each time the user visits or refreshes the page - probably around 8 images in total.

I found the below code on an older post - sometimes it works, sometimes a new image loads but the original suddenly pops up over top of it.

Any suggestions that might iron out the bugs here would be appreciated.

<script>
document.addEventListener('DOMContentLoaded', function() {
  var images = [
    'https://randomwordgenerator.com/img/picture-generator/54e9d1454b5ba914f1dc8460962e33791c3ad6e04e507440752b7edc9649c2_640.jpg',
    'https://randomwordgenerator.com/img/picture-generator/50e2dc464e4faa0df7c5d57bc32f3e7b1d3ac3e45658724e77267bd493_640.jpg',
    'https://randomwordgenerator.com/img/picture-generator/50e2dc464e4faa0df7c5d57bc32f3e7b1d3ac3e45658724e77267bd493_640.jpg',
    'https://randomwordgenerator.com/img/picture-generator/nick-dunlap-h65WkTvyWJY-unsplash.jpg'
].sort( () => .5 - Math.random() );
    var randImage = images[0];
    document.querySelector(".homepage article.sections section:first-child .section-background img").src = randImage;
    document.querySelector(".homepage article.sections section:first-child .section-background img").setAttribute("srcset", "");
});

</script>

Hi,

We can achieve this with Gallery. Do you still need help on this?

On 5/15/2022 at 3:07 PM, tuanphan said:

Hi,

We can achieve this with Gallery. Do you still need help on this?

Hi tuanphan,

Yes still looking for a suitable solution here.

Ideally I was hoping to achieve this using background images as I have a bit of content to go over top of the imagery. A gallery may be a workable option though if I cant get background images to work - how do you go about achieving random load of gallery images? (I don't want users to be able to scroll through other images either).

Thanks,
Aaron

Have you figured this out yet? I too would like to randomize the first image on my homepage.

On 5/12/2022 at 7:52 AM, aaron1 said:

Hi all,

I'm trying to get the background image of a section (first section on a 7.1 home page) to randomly load a different image each time the user visits or refreshes the page - probably around 8 images in total.

 

I found the below code on an older post - sometimes it works, sometimes a new image loads but the original suddenly pops up over top of it.

Any suggestions that might iron out the bugs here would be appreciated.

<script>
document.addEventListener('DOMContentLoaded', function() {
  var images = [
    'https://randomwordgenerator.com/img/picture-generator/54e9d1454b5ba914f1dc8460962e33791c3ad6e04e507440752b7edc9649c2_640.jpg',
    'https://randomwordgenerator.com/img/picture-generator/50e2dc464e4faa0df7c5d57bc32f3e7b1d3ac3e45658724e77267bd493_640.jpg',
    'https://randomwordgenerator.com/img/picture-generator/50e2dc464e4faa0df7c5d57bc32f3e7b1d3ac3e45658724e77267bd493_640.jpg',
    'https://randomwordgenerator.com/img/picture-generator/nick-dunlap-h65WkTvyWJY-unsplash.jpg'
].sort( () => .5 - Math.random() );
    var randImage = images[0];
    document.querySelector(".homepage article.sections section:first-child .section-background img").src = randImage;
    document.querySelector(".homepage article.sections section:first-child .section-background img").setAttribute("srcset", "");
});

</script>

The code you provided looks like it should work for randomly loading a background image on refresh, but it's possible that the issue you're experiencing is related to caching. The browser may be caching the previous image and not updating it with the new one. One way to prevent caching is to add a query parameter to the image URL. This will make the browser think that the image is a new resource and force it to reload the image. Here's an updated version of the code that includes a query parameter:

document.addEventListener('DOMContentLoaded', function() {
  var images = [
    'https://randomwordgenerator.com/img/picture-generator/54e9d1454b5ba914f1dc8460962e33791c3ad6e04e507440752b7edc9649c2_640.jpg',
    'https://randomwordgenerator.com/img/picture-generator/50e2dc464e4faa0df7c5d57bc32f3e7b1d3ac3e45658724e77267bd493_640.jpg',
    'https://randomwordgenerator.com/img/picture-generator/50e2dc464e4faa0df7c5d57bc32f3e7b1d3ac3e45658724e77267bd493_640.jpg',
    'https://randomwordgenerator.com/img/picture-generator/nick-dunlap-h65WkTvyWJY-unsplash.jpg'
  ].sort(() => .5 - Math.random());
  
  var randImage = images[0];
  var imgEl = document.querySelector(".homepage article.sections section:first-child .section-background img");
  
  imgEl.src = randImage + '?v=' + Math.random(); // add a query parameter to prevent caching
  imgEl.setAttribute("srcset", "");
});

I am also looking for a solution to this! Seems like nothing was ever resolved and I've reopened a similar question thread. Are these code injections into the <head> tag of the page? or in general code injections? Or as a code block added onto the page?

On 4/27/2023 at 12:06 AM, Lkrohnmiller said:

I am also looking for a solution to this! Seems like nothing was ever resolved and I've reopened a similar question thread. Are these code injections into the <head> tag of the page? or in general code injections? Or as a code block added onto the page?

Code Injection > Footer

Silly question,

Assuming I'm able to inject the code, where should I upload all the pictures I'd like to random show as my Cover page background?

Thanks!

On 7/14/2023 at 1:18 AM, Mario_Martino said:

Silly question,

Assuming I'm able to inject the code, where should I upload all the pictures I'd like to random show as my Cover page background?

Thanks!

Follow this guide to upload images

https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

@tuanphan I have a new 7.1 site and am trying to achieve the same result as @aaron1 in the first post above. I took the same code, placed it in the code injection footer section.

I then added 10+ images via the file uploader method and linked them into the footer code, but nothing is happening.
 

Any help would be appreciated.

Update: I got the code to work. But there's one little issue I'd like to resolve whereby the first image flashes for a second and then updates to the new image. Every page refresh does this same thing.

Any ideas on a solution? @tuanphan

URL: artabounds.squarespace.com
PW: artabounds

On 8/8/2023 at 3:22 AM, jmerrill said:

Update: I got the code to work. But there's one little issue I'd like to resolve whereby the first image flashes for a second and then updates to the new image. Every page refresh does this same thing.

Any ideas on a solution? @tuanphan

URL: artabounds.squarespace.com
PW: artabounds

Add this code to Design > Custom CSS (or Website > Website Tools > Custom CSS)

body.homepage article>section:first-child [src*="leonardo-da-vinci-public"] {
    opacity: 0 !important;
}

Thanks @tuanphan

But, unfortunately it's doing the same thing even though I added the code into the Custom CSS panel.

On 8/9/2023 at 11:27 PM, jmerrill said:

Thanks @tuanphan

But, unfortunately it's doing the same thing even though I added the code into the Custom CSS panel.

Can you send first image url?

https://static1.squarespace.com/static/64c4b1978afb0d5cacf7f225/t/64d5b96a546fe041893b89f9/1691728236707/banner-image-01.jpg

On 8/11/2023 at 11:45 AM, jmerrill said:

https://static1.squarespace.com/static/64c4b1978afb0d5cacf7f225/t/64d5b96a546fe041893b89f9/1691728236707/banner-image-01.jpg

Try this new CSS code

body.homepage article>section:first-child [src*="banner-image-01"] {
    opacity: 0 !important;
}

Thank you, but no difference.

On refresh, first image still shows for a split second before displaying the next random image. In order to debug, I first want to make sure that I've set up the homepage section correctly. Here is a screenshot of what I've done.

I added a background image (banner-image-01.jpg) to the top section of the homepage:

I see that image doesn't exist now

https://static1.squarespace.com/static/64c4b1978afb0d5cacf7f225/t/64d5b96a546fe041893b89f9/1691728236707/banner-image-01.jpg

it show blank page. Can you check it again?

I think the script code only runs 1-2 seconds after the page has loaded. And during that time, the default background image will still appear. The above code will hide that image. Since the code in CSS will often run parallel to the page load, if the image you provided is correct, the code should work.

@tuanphan I noticed that as well and am not sure why the images don't display. As you can see in the screenshots below, I still have them uploaded via the Link Editor modal, and they are also still included in the code injection section. And, for good measure, I've also included a screenshot of the CSS code.

@tuanphan Does it matter if I haven't published the site yet and am still working on a trial account?

For some reason this is what I see when I arrive at the official domain (artabounds.net😞

And this is what I see when I am working with Squarespace's built-in domain:

@tuanphan Update: For some reason—out of the blue—the code is now working correctly. No idea why since I didn't change a thing, but I'll take it lol.

The only remaining issue is that no homepage banner images display when I visit artabounds.net, (PW: artabounds) but I'm assuming that might resolve when I launch the site and get off of a trial account.

Not sure, but I see this code, this will make image invisible