Randomize Specific Portfolio

Hello!

I know there's code to randomize your homepage gallery showing your portfolio work, but is it possible to randomize one single portfolio page's gallery when on that specific page?

For example, in the link below, I'd like these images to be randomized each time the page is loaded. However, I don't want that to occur on other portfolio pages where I have things in a specific order.

Is that even possible?

https://www.brettlair.ca/work/logos

19 hours ago, brettlair said:

Hello!

I know there's code to randomize your homepage gallery showing your portfolio work, but is it possible to randomize one single portfolio page's gallery when on that specific page?

For example, in the link below, I'd like these images to be randomized each time the page is loaded. However, I don't want that to occur on other portfolio pages where I have things in a specific order.

Is that even possible?

https://www.brettlair.ca/work/logos

You can insert the code to a code block of the page, so it will affect that page only

Unfortunately I can't do that directly though because the page falls under the "Work" section in the nav which is a Portfolio layout.

I can get it to randomize my homepage gallery no problem, but that's not what I want to do.

On 9/11/2024 at 9:37 PM, brettlair said:

Unfortunately I can't do that directly though because the page falls under the "Work" section in the nav which is a Portfolio layout.

I can get it to randomize my homepage gallery no problem, but that's not what I want to do.

Okay, then you can identify the page ID, which is unique for every page, then it will only work for the specific porfolio page

This is the code that will randomize everything on my homepage. I'm not entirely sure how/where to add the specific page ID though.

Quote

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const productGrid = document.querySelector('div#gridThumbs');
    if (productGrid) {
        var productItems = productGrid.querySelectorAll('.grid-item');
        for (var i = productItems.length; i >= 0; i--) {
            productGrid.appendChild(productItems[Math.random() * i | 0]);
        }
    }
});
</script>

On 9/25/2024 at 7:05 PM, brettlair said:

This is the code that will randomize everything on my homepage. I'm not entirely sure how/where to add the specific page ID though.

 

 

Suppose your Portfolio Page ID is: #collection-66a1bfc99041e47b896c1e48

Change your code to this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const productGrid = document.querySelector('#collection-66a1bfc99041e47b896c1e48 div#gridThumbs');
    if (productGrid) {
        var productItems = productGrid.querySelectorAll('.grid-item');
        for (var i = productItems.length; i >= 0; i--) {
            productGrid.appendChild(productItems[Math.random() * i | 0]);
        }
    }
});
</script>

On 9/27/2024 at 11:17 PM, tuanphan said:

Suppose your Portfolio Page ID is: #collection-66a1bfc99041e47b896c1e48

Change your code to this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const productGrid = document.querySelector('#collection-66a1bfc99041e47b896c1e48 div#gridThumbs');
    if (productGrid) {
        var productItems = productGrid.querySelectorAll('.grid-item');
        for (var i = productItems.length; i >= 0; i--) {
            productGrid.appendChild(productItems[Math.random() * i | 0]);
        }
    }
});
</script>

 

I only have "item" and "section on this page instead of "collection". Wondering if that's because it's a "Portfolio" category page?