Jump to content

Moving Metada positioning and date format on Article List page

Recommended Posts

  • Replies 2
  • Views 421
  • Created
  • Last Reply

Hey Mark, I'd use Flexbox for this. Try adding this to your Custom CSS area:

.blog-basic-grid .blog-basic-grid--text {
  display:flex;
  flex-direction:column;
}
.blog-basic-grid .blog-basic-grid--text .blog-title{
  order: 1
}
.blog-basic-grid .blog-basic-grid--text .blog-meta-section{
  order: 2
}

Now let's play around with some JS to edit the Dates. Warning, I'm about to get super nerdy with this, but I'll try to talk through the steps. 

First create an array with the months that we want in their correct order. Then, we need to loop through each date, convert it to the format MM/DD/YYYY (javascript needs this format) , then convert that into a UTC Date. Then we pull out the month number and match it to the number in our Months Array.  Vanilla JS should look like this:

Add this to your Page Settings » Advanced » Code Injection area. 

<script>
let months = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
    dates = document.querySelectorAll('.blog-date');
dates.forEach(date => {
   let text = date.innerHTML.split("/"),
       newDate = new Date(text[1] +'/'+ text[0]+'/'+ text[2]);
   date.innerHTML = months[newDate.getMonth()];
})
</script>

Let me know if this does it!

Hey there, my name is Will and I help Squarespace designers and developers with my plugins, tutorials, and my Code Curious Membership
  
I would be happy to answer any questions you have about Javascript, CSS, or the meaning of life  - I'm an expert in 2 of these. 

Youtube | Website

Link to comment

Thanks @WillMyers!! The rearrange worked perfectly!

For the code injection, when I go to Page Settings » Advanced » Code Injection area, I only see boxes to inject code for the Header, Footer, Order Confirmation and Lock page. I tried injecting it into the "Post Blog Item Code Injection" space, but that didn't seem to work. Any ideas?

 

Thanks again for your advice!

 

Mark

Screen Shot 2021-03-25 at 9.57.11 AM (2).png

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.