Jump to content

Reverse the order of blog posts (Oldest at the top)

Go to solution Solved by iamdavehart,

Recommended Posts

I believe it should be possible to reverse the ordering of blog posts, as I've seen a few other posts in the forum about it, and a solution I've tried involves creating some Custom CSS and Footer code injection, but sadly it isn't working for me.

Could someone take a look at my blog site and let me know if this would be an easy task?  https://www.garyweber.net/pine-100 is the blog I'm talking about.

The oldest post is from March 25 and the newest is April 7.   I want the March 25 post to be appearing at the top of the page and the newer posts would be below that, with the newest all the way at the bottom of the page.  (I'm hoping this also will have the affect of the "previous/next" links at the bottom of each post having the right-most link go to a newer post.)

I appreciate any help.

Edited by Voidwatcher
fixing a typo
Link to comment

What's interesting is that I see a bunch of masonry references in the frame source that SquareSpace is rendering, which made me think the solution for "Masonry" blogs would work.  My format is "side-by-side" though.

I'm referring to this post mentioning a solution that unfortunately doesn't work for me:  

 

Edited by Voidwatcher
Link to comment
  • Solution

First thing to know is that a CSS solution (or a client-side JS solution for that matter) can only affect elements that have already been loaded up. that means that you can only reverse the order of the first n posts which squarespace. (n is set in the blog page settings and can go up to a max of 20).

if you're ok with that, then it's actually pretty easy. just make sure that the blog container you're using is set to flex and then reverse the flex direction.

so in your case - as you're using side-by-side - just add this to your css.

.blog-side-by-side-wrapper { display:flex; flex-direction:column-reverse; }

remember though, if your page is set to show n articles and you add n+1 articles to your blog then you won't get the oldest post. you'll get the oldest post of the first n newest posts.... your pagination would also be a bit weird.

PS. the first computer we ever had in our house was a TRS-80!

 

ADDENDUM: Pagination on item pages

I looked at your post and you want to swap the pagination links as well. A little trickier, as the next and previous are aligned and padded in specific ways with arrow icons. But you can do it. 

  • reverse the flex direction
  • invert the padding
  • flip the icons 100% horizontal
  • prefix the css rules with this particular blog collection-id as you don't want to change other pagination in the site

 

body.collection-642f14ee1e413265ff0d44f2 section#itemPagination {
  flex-direction: row-reverse;
}
body.collection-642f14ee1e413265ff0d44f2
  a.item-pagination-link.item-pagination-link--next {
  margin-left: 0;
  margin-right: auto;
  flex-direction: row-reverse;
}
body.collection-642f14ee1e413265ff0d44f2
  a.item-pagination-link.item-pagination-link--prev {
  margin-right: 0;
  margin-left: auto;
  flex-direction: row-reverse;
}
body.collection-642f14ee1e413265ff0d44f2
  a.item-pagination-link.item-pagination-link--next
  .item-pagination-icon {
  padding-left: 0px;
  padding-right: 25px;
}
body.collection-642f14ee1e413265ff0d44f2
  a.item-pagination-link.item-pagination-link--prev
  .item-pagination-icon {
  padding-right: 0px;
  padding-left: 25px;
}
body.collection-642f14ee1e413265ff0d44f2
  a.item-pagination-link.item-pagination-link--prev {
  margin-right: 0;
  margin-left: auto;
  flex-direction: row-reverse;
}
body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link svg {
  transform: scaleX(-100%);
}

 

Edited by iamdavehart

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment

This worked!  Can't thank you enough.  I appreciate the solution so much.

And I now see what I had been doing wrong in my initial CSS solution attempt, too.  I needed the side-by-side wrapper tag and not the masonry tag.

--

This does now all make me wonder, though, if using the Blog feature was even the best feature to use for this story.  Would I have avoided all this hassle if I'd chosen a different type of SquareSpace section?  Just wondering if there's a different feature that would still be able to present a side-by-side summary layout, and have pagination links at the bottom of each page, which wouldn't be subject to the blog post ordering.

Edited by Voidwatcher
Link to comment
2 hours ago, Voidwatcher said:

This does now all make me wonder, though, if using the Blog feature was even the best feature to use for this story.  Would I have avoided all this hassle if I'd chosen a different type of SquareSpace section?  Just wondering if there's a different feature that would still be able to present a side-by-side summary layout, and have pagination links at the bottom of each page, which wouldn't be subject to the blog post ordering.

99% of the time blogs should be newest stuff first so it might not be but within Squarespace it probably is the best option.

I guess it depends how many of these "articles" there are in each series. You could consider portfolios, but you don't really get the side-by-side layout or excerpts. What you do get though is a completely free reign on the layout of each project and can order the projects within each portfolio as you wish.

If you did it like this you could just write up each section directly in the project page or you might also have an unlisted blog page that kept all the articles in and then use summary blocks to insert them into sections within the project page. So have a portfolio project for the TRS-80 repair, and then take people through it as a single story. big splashy headline, sections that take them through the concept and then use summary blocks to put the full blog articles in. if you wanted to break that story up into "acts" you could tag your blog posts and filter multiple summary blocks to show just the relevant tags. (note: summary blocks would still have new content first so you'd need some similar code to get those the right way round.

bit more effort, but would make for very engaging pages that described your projects well. 

 

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment
Quote

This does now all make me wonder, though, if using the Blog feature was even the best feature to use for this story.  Would I have avoided all this hassle if I'd chosen a different type of SquareSpace section?

SS has no collection type ( Blog, Events, the only two that are date based ) that is suitable to present oldest to newest information.

As @iamdavehart mentions if you have less than a page worth you can hack it but if you have more than one, you are screwed.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 5 months later...
  • 1 month later...

Not meaning to bump an old thread but for anyone trying to solve this problem in future I was able to pretty easily reverse the order of hundreds of blog entries arranged with the masonry design using the universal filter plugin. 

This is a paid plugin and maybe overkill if you dont intend to add any filters but for the sake of having all the options it was simple as adding one line to the filter config.



 

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.