Randomize image order in image grid

[rjmorris67]

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

[DCarter60]

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.

[Jigar_Thakker · Accepted solution]

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: https://knowledge.hubspot.com/design-manager/add-a-javascript-file-to-hubspot

If this helps, feel free to mark it as the solution ✔️ and give it an upvote 👍 !

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