Hey Techies

Recently I was working on a website with Squarespace and I faced a major challenge that I am going to share with you in this article, along with the solution that I devised.

I had to loop through a given number of gifs where gifs should change on every page reload in Squarespace. I tried many inbuilt options that we have in Squarespace, but nothing served my purpose. It drove me to create a javascript code for looping.

Let’s first have a basic idea of Squarespace before deep-diving into the main problem and its solution.

Squarespace is a CMS (Content Management System) where you can add your stuff. Squarespace offers a lot of templates to choose from and each template comes with dummy data. With Squarespace, you can easily create a website, until and unless you don’t want to add some custom code. For inserting your custom code, Squarespace offers a code injection for every page header and there you can write your custom code to achieve any desired functionality.

You can log into your site by visiting your built-in or custom domain and add/config to the end. For example:

https://site-name.squarespace.com/config

https://www.site-name .com/config

You will be prompted for username & password, enter the credentials and you are logged in.

A number of inbuilt options are available which you can choose while creating pages in Squarespace. You can insert a gallery with different layouts and images layouts as well. Also, you can insert video directly from Vimeo or YouTube, etc. There are numerous other options that you can try.

As you know I had to loop through a given number of images where the image should change on every page reload, I used code injection where I could insert my own javascript or jquery code.

I inserted the following code in the footer part:

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

if (body[0].getAttribute("id")=="collection-body_id") {

var images = [
"path_to_image",
"path_to_image",
"path_to_image"
];

var imgCount = images.length;

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

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

var body=document.getElementById('collection-body_id');
body.style.backgroundImage=imgURL;
body.style. backgroundSize="25% auto";
}
}());

Make sure to add the above code in the script tag. You also need to find body ID so that you can choose the page on which you want to show images/gifs in a loop.

You can find the ID by the inspect element. It will be somewhat like “collection-fefrt2434fyfhssd985klyon”.

You will have to upload images to Squarespace and copy the path to be pasted here, in images variable. The more the number of images will be there, the lesser will be the chances of getting the same image/gif on page reload. If your images are fewer, there might be a chance that you get the same image on page reload.

You can also add any style if you need, according to your requirements the way I have added “backgroundSize” property.

You can see the working demo here

https://spencer-kehe-ewr2.squarespace.com/home

Found the article useful? Share it with your friends and co-workers… Now!