# Randomize image order in image grid

**URL:** <https://community.hubspot.com/t/randomize-image-order-in-image-grid/138376>\
**Category:** Blog, Website & Page Publishing\
**Tags:** starter\
**Created:** [August 21, 2025, 3:41pm UTC](https://community.hubspot.com/t/randomize-image-order-in-image-grid/138376 "2025-08-21T15:41:23Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![rjmorris67](https://avatars.discourse-cdn.com/v4/letter/r/e9bcb4/32.png) [@rjmorris67](https://community.hubspot.com/u/rjmorris67)\
**Post date:** [August 21, 2025, 3:41pm UTC](https://community.hubspot.com/t/randomize-image-order-in-image-grid/138376/1 "2025-08-21T15:41:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jigar\_Thakker](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jigar_thakker/32/63606_2.png) [@Jigar\_Thakker](https://community.hubspot.com/u/Jigar_Thakker)\
**Post date:** [August 21, 2025, 4:09pm UTC](https://community.hubspot.com/t/randomize-image-order-in-image-grid/138376/2 "2025-08-21T16:09:51Z")

</div>

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:

```lia-code-sample
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](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)._

---

<div class="post-metadata">

**Author:** ![DCarter60](https://avatars.discourse-cdn.com/v4/letter/d/bc8723/32.png) [@DCarter60](https://community.hubspot.com/u/DCarter60)\
**Post date:** [September 24, 2025, 8:28am UTC](https://community.hubspot.com/t/randomize-image-order-in-image-grid/138376/3 "2025-09-24T08:28:31Z")

</div>

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.