Randomize image order in image grid

Marketing & Content Hub Blog, Website & Page Publishing
1

Hi - I am using an image grid in my Hubspot webpage design but would like the order of the images to shuffle in some way as I will have large number of them. How can I achieve that easily?

Thanks

Richard

2

Hi @rjmorris67,

This is easiest to do with a small JavaScript snippet added to the page.

  1. Identify the CSS selector for your grid’s wrapper (e.g., .image-grid).
  2. Upload a JS file in Design Manager, then include it on the specific page via the page editor: click Settings ➝ Advanced ➝ Footer HTML and add a <script src=“…your file URL…”></script>.
  3. Paste this code in your JS file and update .image-grid to match your grid’s selector:
document.addEventListener('DOMContentLoaded', function () { 
 const grid = document.querySelector('.image-grid'); // <-- change this to your grid selector 
 if (!grid) return; 

 const items = Array.from(grid.children); 

 // Fisher–Yates shuffle 
 for (let i = items.length - 1; i > 0; i--) { 
 const j = Math.floor(Math.random() * (i + 1)); 
 [items[i], items[j]] = [items[j], items[i]]; 
 } 

 // Re-render in new order 
 const frag = document.createDocumentFragment(); 
 items.forEach(el => frag.appendChild(el)); 
 grid.innerHTML = ''; 
 grid.appendChild(frag); 
});

Publish/Update the page.

Reference: Create and add a JavaScript file to HubSpot

If this helps, feel free to mark it as the solution :check_mark: and give it an upvote :+1: !

Part of this reply was generated by AI (HubSpot and KBs).

3

HubSpot’s default image grid doesn’t have a built-in shuffle or randomize feature. To achieve random image order easily, you can: Use custom JavaScript on your page to shuffle the images dynamically when the page loads. Alternatively, manually reorder the images in HubSpot CMS each time (less practical for large numbers). Use a third-party plugin or widget that supports randomized image galleries and embed it in your page. If you want, I can help with a simple JavaScript snippet to shuffle your images automatically.