Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Different background image every time you visit?


taydiggs

Question

I am trying to create a homepage gallery wherein 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.

Sorry to be picky, but I do not want the background to change while you are on it, just each time you revisit the page.

Please see this website for an explanation. Each time you hit refresh, the background changes on the homepage: bddw.com

Thank you!

Link to comment
  • Answers 35
  • Created
  • Last Reply

Recommended Posts

Here's the adjusted code that is to be put into the footer section of the site-wide code injection point. To put it there, you need to be in site edit mode, click Settings on the menu on the left, then Advanced, then Code Injection, and then put the following code in the footer section. This will put the code in the footer of every page on your site, but the code itself is conditional to run only on your homepage.


<script>
   (function(){

   var body=document.getElementsByTagName("body");

   if (body[0].getAttribute("id")=="collection-54d11b07e4b0a33bbb20a490") {
     var images = [
     "http://www.mediafactory.org.au/alexandra-race-lyons/files/2014/07/creative-commons-2-1ef4xzl.png",
     "http://www.mediafactory.org.au/alexandra-race-lyons/files/2014/07/creative-commons-2-1ef4xzl.png", 
     "http://www.mediafactory.org.au/alexandra-race-lyons/files/2014/07/creative-commons-2-1ef4xzl.png"
     ];

     var imgCount = images.length;

     var randNumber=Math.floor((Math.random() * imgCount) + 1);

     imgURL = images[randNumber-1];

     var image=document.getElementsByClassName("thumb-image loaded");
     image[0].setAttribute("src", imgURL);
     image[0].setAttribute("data-image", imgURL);
     image[0].setAttribute("data-src", imgURL);
     image[0].style.visibility="visible";
   }

 }());
</script>

I'll give you some css in a minute to hide the original image on the homepage so that it doesn't display briefly before being replaced by one of the randomly selected images.

Edit to add CSS:Add the following CSS to the page header injection point of your homepage (settings cog->advanced):


<style>
   .thumb-image {
     visibility: hidden;
   }
</style>

Link to comment

Thank you for this question and the answers! I've learned a lot digging into all of this. However, I am stumped on implementing this into a banner image — do you know if this approach could be used for a thumbnail banner image? I'll link you to my site, but I'm afraid it may not be a good example, as things are changing constantly with my experimentation: (https://toth-construction.squarespace.com/intro) It seems that the class would be either "thumbnail" or "loading content-fill" but neither of these override the image source. Thank you again for the insight you've already put towards this!

Link to comment

Hi-@bernardwest I am trying to do this with the homepage banner; that is: I would like a different image to show each time the user visits the page.

I tried the code in the code injection--> footerthen tried to put it in the code injection--> header (due to I am not changing the background image but I am changing the header banner.)

Link to comment

So here's the specific code for your new page. Because there are no ID's created for the image or the image containers by the SS code, the following code is potentially targeting any image on your page. As there is only one image on your page, this is fine. But if you add more at any point, we might need to revisit this code. If you add more, and strange things happen, then post back here. So, paste this image into the header injection point for your home page.


<script>
 (function(){

   var images = [
     "http://www.mediafactory.org.au/alexandra-race-lyons/files/2014/07/creative-commons-2-1ef4xzl.png",
     "http://www.mediafactory.org.au/alexandra-race-lyons/files/2014/07/creative-commons-2-1ef4xzl.png", 
     "http://www.mediafactory.org.au/alexandra-race-lyons/files/2014/07/creative-commons-2-1ef4xzl.png"
   ];

   var imgCount = images.length;

   var randNumber=Math.floor((Math.random() * imgCount) + 1);

   imgURL = images[randNumber-1];

   var image=document.getElementsByClassName("thumb-image loaded");
   image[0].setAttribute("src", imgURL);
   image[0].setAttribute("data-image", imgURL);
   image[0].setAttribute("data-src", imgURL);
 }());
</script>

I've just put three of the same image in there, for simplicity. You'll need to replace those and add any extras you want. Just remember to keep the formatting the same. Try this code and if it works, then we can work on simplifying the code a little bit to make adding images a bit easier and cleaner.

Let me know how it goes.

Link to comment

Ok. The javascript is loading and running, but the img element hasn't loaded yet. I think the solution might be to insert the javascript into the site-wide code in the footer instead of the header. I'll try and rewrite the code to work with that soon. I'm heading overseas for a month in a few days, so I won't be able to help you anymore soon. Get back to me asap so I can sort this for you before I go.

As a test, can you change the bit with "thumb-image loaded" to "thumb-image" and see if that makes any difference?

Link to comment

I gave it a shot, but still no lucky. So what I did was replace the image links with my own image links from various pages of my website. I limited it to three variable images to keep it as similar as possible to your code. I also tried deleting the image image in the image block to see if they would just fill it, but it didn't work either.

Link to comment

Hi Bernard, thanks so much for this. Is there any way to get this to work for the background images on a cover page?

This is the link to my home page - https://koushik-sarkar.squarespace.com/

Like I said, I'm using a cover page to achieve this layout. I tried modifying your code to work on it but to no avail. Here it is -


var image=document.getElementsByClassName("sqs-slice-gallery-item content-fill sqs-gallery-design-stacked-slide loaded sql-active-slide");

Any help would be much appreciated! Thanks in advance.

Link to comment

Hmmm, I don't know what's going on. When I run my code above on your page, it works. I wonder if this has something to do with the javascript being in the header vs the footer. As it's in the header, the page might not have fully loaded when the javascript starts running, therefore it might not be able to find the elements (as they don't technically exist yet). Can you try a debugging trick for me? I'll continue this in a following comment...

Link to comment

Add one line of code, run your site (use shift + reload, to refresh your page), see what happens, then delete the line of code. (Then shift + refresh again).

After this line of code:

var image=document.getElementsByClassName("thumb-image loaded");

Insert this:

alert(image[0]);

Note down what it says. This is basically a test to see if your image object exists yet on the page when the javascript is running.

Link to comment

Is there a way to adapt this code so it will work for my Cover Page? Right now my page is using a slideshow, but I would prefer it so that every time someone visits my website, there is a different image that is displayed on my cover page. Thanks!

www.daveangilella.com for reference, using the Forte template.

Link to comment

Archived

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

Guest
This topic is now closed to further replies.

×
×
  • Create New...