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

Different background image every time you visit?

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!

Edited by taydiggs
Tidy

Share this post


Link to post

Recommended Posts

  • 4

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>

Edited by Bernard West
added CSS

Share this post


Link to post
  • 2

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.

Edited by Bernard West

Share this post


Link to post
  • 1

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.

Share this post


Link to post
  • 1

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

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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)

Share this post


Link to post
  • 0

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)

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...