faded84 Posted March 20, 2021 Share Posted March 20, 2021 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
Beyondspace Posted March 20, 2021 Share Posted March 20, 2021 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 - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! 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
faded84 Posted March 20, 2021 Author Share Posted March 20, 2021 @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
creedon Posted March 20, 2021 Share Posted March 20, 2021 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
Beyondspace Posted March 20, 2021 Share Posted March 20, 2021 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 - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.