sian75 Posted January 24 Posted January 24 Hi! I have a masonry grid image gallery on this page https://curatress.com/streetstyle and the images display from the oldest to newest. I know I can drag them into the order I wish but because I have so many it would be very tedious. Is there a way to automatically display the newest added images first always with css?
jpeter Posted January 25 Posted January 25 @sian75 The following JS should do the trick as long as you place it in the Header using Code Injection. This will allow the script to run and re-order the elements before the site runs Squarespace's JS code that handles the masonry layout. JavaScript (function(){ // Value of the "data-section-id" attribute of the element with a class of "gallery-masonry" const SECTION_ID = '65b13fd4e94d515c51c1e3cb'; /********************************************************************************* * DO NOT EDIT BELOW UNLESS YOU KNOW WHAT YOU'RE DOING *********************************************************************************/ if(document.readyState == 'complete') { reverseOrderOfGalleryItems(); } else { window.addEventListener('DOMContentLoaded', reverseOrderOfGalleryItems); } function reverseOrderOfGalleryItems() { // Get the parent element that contains the <figure> elements const gallery = document.querySelector(`.gallery-masonry[data-section-id="${SECTION_ID}"] .gallery-masonry-wrapper`); // Get a NodeList of all <figure> elements within the parent element const figureElements = gallery.querySelectorAll('figure'); // Convert the NodeList to an array and reverse it const reversedFigures = Array.from(figureElements).reverse(); // Remove existing <figure> elements from the parent figureElements.forEach(figure => figure.remove()); // Append the reversed <figure> elements back to the parent reversedFigures.forEach(figure => gallery.appendChild(figure)); } })() Remember to place the JavaScript code in between <script> tags, e.g. <script> // Add JS code here </script> tuanphan 1 Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment