Support Center

Rotating page images with a simple HTML solution

Last Updated: Apr 07, 2015 08:03AM EDT

Rotating page images with a simple HTML solution

This HTML solution randomly displays a page image from a library of images uploaded in a File Area. A different image is displayed on each reload of the page.


To enable rotating page images with this solution follow these steps:

1. Prepare your images with the recommended page image size. The page image recommended size is displayed when you select Custom Image in your Page Image properties.




2. Add all images that should rotate in a File Area on some page from your site. Publish the page.

3. Copy the permanent file URL for each file.

4. Add an HTML Snippet just bellow your page header area.




5. Paste the code below into the HTML Snippet box.




var img_urls = new Array();
img_urls[0] = "U
RL0 ";
img_urls[1] = "U
RL1 ";
img_urls[2] = "U
RL2 ";
img_urls[3] = "U
RL3 ";
img_urls[4] = "U
RL4 ";

var random = Math.ceil (Math.random() * img_urls.length) - 1;
var el = $$('div.pageImage')[0];
if (typeof(el) == 'object') el.setStyle('background-image', 'url(' +  img_urls[random] + ')');



6. Replace the URL0, URL1, etc in the code with your permanent file URLs (step 2). Publish the page.


Liquid error: undefined method `gsub' for nil:NilClass
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found