Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Moving Metada positioning and date format on Article List page


marktwhaley

Question

  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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-

Posted Images

2 answers to this question

Recommended Posts

  • 1

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-o, my name is Will and I help Squarespace designers and developers with technical things.

I would be happy to answer any questions you have about Javascript, CSS, or the meaning of life  - although I'm only an expert in 2 of these. 

Check out my plugin store or sign up for my newsletter

Link to post
  • 0

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 post

Create an account or sign in to comment

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


×
×
  • Create New...