Different background image every time you visit?

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!

This is becoming my standard answer for a lot of questions now ;)

You can probably do it with javascript.

You'd have a bunch of images on the squarespace server (or anywhere else, for that matter) and each time the page loads a javascript function would run and would randomly select one of those images to display. If you've got a site already with the images uploaded somewhere, can you provide a link and I'll try and get around to writing you a javascript routine that should do the job?

Here's a start on the code. The problem at the moment is that you don't have a specific area on your page to put the images like on that example page you linked in your original question. What i've done is just insert them in the background for the time being. I've just linked to some of my images for lack of another option, but you can replace my images with your own in the code. When you add image links, include a comma between each one and remember the double quotes around them. As we get this worked out properly for you, we can replace the hard coded image links with either a plain text file of links or a variable in the code with plain text links. That way you don't have to worry about getting the formatting correct. The other thing we can do is work out what's called the 'relative link' to your images on your SS site. Those will be shorter and a bit cleaner looking.

So can you redo your home page so that there is a space to put the images in? What you can do is just put in an image block(?) with a single image in it, and after that I can direct the javascript code to use that block as the home for the random images.

Anyway, here's the code so far, so you can see it working in a fashion. You need to insert this code into the page header. Go to the page, click on the settings cog, then click the advanced tab and then put the code in the injection point.

 <script>
 (function(){

   var images = [
     "http://static1.squarespace.com/static/53453ebbe4b0d46770eb7505/5345482be4b01730378288f7/54b3a45de4b0d7856db8059e/1421059173445/", 
     "http://static1.squarespace.com/static/53453ebbe4b0d46770eb7505/5345482be4b01730378288f7/54c5f3c8e4b0d7a7fa84acc2/1422274046633/", 
     "http://static1.squarespace.com/static/53453ebbe4b0d46770eb7505/5345482be4b01730378288f7/54a78e9ae4b00f7c5fb39c4a/1421997719378/"
   ];

   var imgCount = images.length;

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

   imgURL = "url('" + images[randNumber-1] + "')";

   var body=document.getElementById('collection-542ba4a1e4b032a0dde82b31');
   body.style.backgroundImage=imgURL;
   body.style.backgroundSize="100% auto";
   body.style.backgroundRepeat="no-repeat";
 }());
</script>

Keep in mind that because there's only three images there, the random function will often select the same image twice or more in a row. For this to work well you'd want at least 10 images or so.

Wow that is amazing. I haven't tried yet but will let you know my results. I did plan to add a home page for this feature.

No worries. Let us know the link to your homepage when you get it set up and we can work from there.

I made the homepage www.taylordonsker.com though the code does not seem to work so far.. let me know what you think?

Seem my new answer with the new element targeted.

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.

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.

I also tried simply using your code as is but it also didn't work on my page.

One other note! I noticed that this is considered a hidden page. Technically the link is www.taylordonsker.com/home. Does that change anything?

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

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.

It says "Undefined"

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?

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>

Ok, I've just adjusted the code and posted it in a new answer. Give it a try.

Changing to "thumb-image" worked!!! But now when I add over 3 images it defaults to the image before we started all of this. How can I add more?

You probably made a mistake in the syntax when entering it. Try doing it again, and if the problem occurs again, leave the code there so I can inspect your site to see what might be going wrong. But you need to hurry. I'm off the internet in about 2 days.

We are good, it works. I must have entered it wrong earlier!

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!

With this code, Safari spits out:

TypeError: undefined is not an object (evaluating 'image[0].setAttribute')

Any help?

That's basically saying that there are no thumbnail images on the page. Do you actually have any images on your page?

Is it possible to randomize a gallery block on Ishimoto?

I want to add 3 galleries to a gallery block (grid), and use that as my home page.

That way, whenever somebody visits, they can see random pictures of all types.

i would also want the images to randomize again the next time a user visits (or if easier, it randomizes every week)

Is it possible to randomize a gallery block on Ishimoto?

I want to add 3 galleries to a gallery block (grid), and use that as my home page.

That way, whenever somebody visits, they can see random pictures of all types.

i would also want the images to randomize again the next time a user visits (or if easier, it randomizes every week)