topic Re: Randomize image order in image grid in Blog, Website & Page Publishing

Randomize image order in image grid

rjmorris67 — Thu, 21 Aug 2025 15:41:23 GMT

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

Re: Randomize image order in image grid

Jigar_Thakker — Thu, 21 Aug 2025 16:09:51 GMT

Hi @rjmorris67,

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

Identify the CSS selector for your grid’s wrapper (e.g., .image-grid).
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>.
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).

Re: Randomize image order in image grid

DCarter60 — Wed, 24 Sep 2025 08:28:31 GMT

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.