Jump to content

Reverse Blog Page Post Order (Oldest Date First)

Go to solution Solved by joseph81,

Recommended Posts

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 

Screen Shot 2022-09-30 at 11.23.40 am.png

Link to comment
  • Replies 3
  • Views 763
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution

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> 

 

Edited by joseph81

Jozsef Kerekes - Front-end developer and Squarespace enthusiast
My Blog: https://ui-workarounds.com
If you like my answer, please give me an upvote/like. Highly appreciated.

 

 

Link to comment
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! 

Screen Shot 2022-10-03 at 8.52.56 am.png

Link to comment

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 !

Edited by joseph81

Jozsef Kerekes - Front-end developer and Squarespace enthusiast
My Blog: https://ui-workarounds.com
If you like my answer, please give me an upvote/like. Highly appreciated.

 

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.