Jump to content

Different background image every time you visit?

Recommended Posts

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!

Link to comment
  • Replies 4
  • Views 620
  • Created
  • Last Reply
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>

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

@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>
Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.