Reverse Blog Page Post Order (Oldest Date First)

Site URL: https://grape-bell-nez6.squarespace.com

Hi all, 

On a site I am building, I am using the Blogging function in order to create an 'Event' on a Calendar on the website. Basically, a blog post acts as an 'Event' that the client inputs. Under the calendar I then have all of these Blog/Events listed in a Masonry style layout, BUT I would like it to show the Blog/Event posts in reverse order. The outcome would be that the most current event date would be the top most blog post. I know that you can revise the published date, but that would defeat the purpose of using the Blog Post to enable it to appear on the Calendar. 

So all in all, my request is asking if the blog posts can be reversed to appear Chronological (oldest date first), instead of newest date first (as blogs/events will be pre-input to appear in the calendar). 

See the attached screenshot for what I currently have.

Website Password: rc

Thanks everyone, 
Tom 

On 9/30/2022 at 7:21 PM, joseph81 said:

I wrote an article about this here: https://www.ui-workarounds.com/reversing-the-order-of-a-list-of-items/

In your case it is tricky since you are using a masonry construct and the only way I know how to reverse the order is to take out the masonry and add the following extra stuff:

In Custom Css panel you write:

.blog-masonry-wrapper {
  display: flex;
  flex-wrap: wrap;
  article {
    position: static !important;
    transform: none !important;
  }
}

In Injections > Footer panel :

<script>
  const articles = document.querySelectorAll('.blog-masonry-wrapper > article');
  const articleNr = articles.length;
  
  articles.forEach((item,i) => {
    item.style.order = articleNr - i;
  });
</script> 

 

Hi @joseph81, thank you so much for this code. As far as I can tell, it has worked perfectly! See the attached screenshot! Perfect thank you! 

Cool. Just don't forget, my solution stops the Masonry functionality. They don't work in the same time ! If you like my solution please give the answer an upvote on the left where the 0 is, it would help me grow in the community. Thank you !