Jump to content

Random section background image on each visit/refresh

Recommended Posts

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>
Link to comment
  • Replies 21
  • Views 2.6k
  • Created
  • Last Reply

Top Posters In This Topic

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

Link to comment
  • 9 months later...
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", "");
});

 

Link to comment
  • 2 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Try this new CSS code

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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:

Screenshot 2023-08-12 at 6.26.17 PM.png

Edited by jmerrill
providing more data.
Link to comment

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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@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.

Edited by jmerrill
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.