Blog collection page - move metadata to bottom + reformat date (7.1)

On 3/21/2023 at 10:24 PM, johnpaulstuthridge said:

https://www.manfortoday.com/

Password: mft1996

Which code did you add? Can you take a screenshot of your Code Injection?

On 3/25/2023 at 7:56 AM, tuanphan said:

Which code did you add? Can you take a screenshot of your Code Injection?

You can see where I've injected the code and changed the date format accordingly, but the meta data date format on the blog collection page still won't change.

Great solution, many thanks to StevenLevithan code snippet!

Hey everyone,

I've repurposed a blog into a job board and want to know if instead of just the date appearing, it can be prefaced with 'Applications Close'. When I publish the blog post/job opportunity, the publish date would be in the future, so together it would read 'Applications Close [DATE]. 

Thanks!

On 4/17/2023 at 10:03 PM, sharine said:

Hey everyone,

I've repurposed a blog into a job board and want to know if instead of just the date appearing, it can be prefaced with 'Applications Close'. When I publish the blog post/job opportunity, the publish date would be in the future, so together it would read 'Applications Close [DATE]. 

 

Thanks!

Can you share link to a blog? I guess we can use CSS pseudo to add a text before the date

@tuanphan I was able to figure it out, thanks so much!

@Beyondspace Did you ever manage to work out a solution to the date offset issue? I've got a site here: https://www.isscr.org/isscr-news/the-power-of-partnership which seems to be 1 day off on some posts - apart from that everything's working perfectly! 

In case anyone is looking for the solution to this, I was able to fix the 'one day off' issue by changing the variable from (removing the split on the 'T') :
 

d = new Date(document.querySelector('[itemprop="datePublished"]').getAttribute("content").split("T")[0]);

to:

d = new Date(document.querySelector('[itemprop="datePublished"]').getAttribute("content"));

Nit: The script you are using has been upgraded, check

The script will get the exact date value from timestamp and convert it into your website's timezone so it seems to be working now

Hey guys, 

code for re-formatting date works wonderfully. 

I have run into the issue of the date on my blog collection grid being different from the actual publish date. See attached. 

Any work-arounds for this? 

Thanks!

On 3/25/2021 at 10:01 AM, Beyondspace said:

🌍 [16-May-2023] Update

The scirpt has been updated to fix some known issues, the details can be found in the post below

Live editor also available on Beyondspace.studio

〰️ 〰️ 〰️ 〰️ 〰️ 〰️ 〰️ 〰️ 〰️ 〰️ 〰️ 〰️

Update the placement using css

.blog-basic-grid--text {
    display: flex;
    flex-wrap: wrap;
}
.blog-basic-grid--text .blog-more-link {
  width: 100%;
}
.blog-basic-grid--text .blog-meta-section {
  order: 9;
}

Update the dateformat using custom code

Please add this snippet into Settings->Advanced->Code Injection to format the date the way you like it

<!-- Fix inconsistent blog date format on Squarespace 7.1 template -->
<!-- Squarespace Forum 03-08-2021 -->
<script src="https://stevenlevithan.com/assets/misc/date.format.js"></script>
<script>
	document.addEventListener('DOMContentLoaded', function() {
      var dateformat = "mm-dd-yyyy";
      var pubdate = document.querySelectorAll("time[datetime], time[pubdate], time.blog-meta-item--date");
      for (var i = 0; i < pubdate.length; i++) {
          var d = new Date(pubdate[i].getAttribute("datetime") || pubdate[i].innerText);
          if ( pubdate[i].classList.contains('blog-meta-item--date') ) {
              d = new Date(document.querySelector('[itemprop="datePublished"]').getAttribute("content").split("T")[0]);
          }
          pubdate[i].innerHTML = d.format(dateformat); 
      }
  });


</script>

 

The variable dateformat currently set with "mm-dd-yyyy", but you can change to different format (reference here)

These are some more format that supported:

"mm-dd-yyyy" --> 02-25-2021

"dd-mm-yyyy" --> 25-02-2021

"mm/dd/yyyy" --> 02/25/2021

"mmm dd yyyy" --> Feb/25/2021

Hello..

I tried using this code but it didn't work. Maybe because I have a code injection of:

<style>

.blog-meta-item--tags {
  display: none;
}

  </style>

I tried putting it on the top and inside of <style> and</style> but it didn't work so I just deleted it. 

Is there any workaround for that?

Website Post Sample: https://perhapsmybe.com/post/drowning

 

UPDATE: Solution found here: