Different background image every time you visit?

Site URL: https://alpaca-cow-8939.squarespace.com/

Hi,

I'm trying to create a splash page where each time you visit, the background image is different. That would be the image of the yellow truck on the site changing to other images every time you visit.  Don't want the background image to change while you are on it, just each time you revisit the splash page.

https://alpaca-cow-8939.squarespace.com/
Password: help

Thank you!

30 minutes ago, faded84 said:

Site URL: https://alpaca-cow-8939.squarespace.com/

Hi,

I'm trying to create a splash page where each time you visit, the background image is different. I am imagining that you create a gallery with some sort of code that alternates the image for each revisit to that page? Don't want the background image to change while you are on it, just each time you revisit the splash page.

https://alpaca-cow-8939.squarespace.com/
Password: help

Thank you!

You can upload multiple images in Design->Custom css->Manage Files section and get their url to replace in this snippet

Add the snippet into Settings->Advanced->Custom code injection->Footer

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

@bangank36

I tried. That didn't work. Is there a reason that the code is going into the "Footer" section in the "Custom code injection". I just want the image on the main landing page to change.

This is the code i tired:

<script>
document.addEventListener('DOMContentLoaded', function() {
  var images = [
    'https://static1.squarespace.com/static/6035cdd950f9d152a0d83af9/t/60559b6f6c30d57a5701e8aa/1616223087947/IMG_0221_002.jpg',
    'https://static1.squarespace.com/static/6035cdd950f9d152a0d83af9/t/60559b68d79f592dd5171b0a/1616223081025/IMG_0547_002.jpg',
    'https://static1.squarespace.com/static/6035cdd950f9d152a0d83af9/t/60559b7565de7848db920066/1616223093485/IMG_0502_002.jpg',
    'https://static1.squarespace.com/static/6035cdd950f9d152a0d83af9/t/60559b5ff2e79040b7a351c6/1616223071251/IMG_9287_002.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>

Quote

Is there a reason that the code is going into the "Footer" section in the "Custom code injection".

Yes. In general the main reason to put scripts into the FOOTER of Code Injection is to delay the running of code until all the page elements have loaded. But that doesn't always work so special code is needed which bangank36 has tried to provide.

1 hour ago, faded84 said:

@bangank36

I tried. That didn't work. Is there a reason that the code is going into the "Footer" section in the "Custom code injection". I just want the image on the main landing page to change.

This is the code i tired:

<script>
document.addEventListener('DOMContentLoaded', function() {
  var images = [
    'https://static1.squarespace.com/static/6035cdd950f9d152a0d83af9/t/60559b6f6c30d57a5701e8aa/1616223087947/IMG_0221_002.jpg',
    'https://static1.squarespace.com/static/6035cdd950f9d152a0d83af9/t/60559b68d79f592dd5171b0a/1616223081025/IMG_0547_002.jpg',
    'https://static1.squarespace.com/static/6035cdd950f9d152a0d83af9/t/60559b7565de7848db920066/1616223093485/IMG_0502_002.jpg',
    'https://static1.squarespace.com/static/6035cdd950f9d152a0d83af9/t/60559b5ff2e79040b7a351c6/1616223071251/IMG_9287_002.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>

Will check again