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

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


dvgdvgdvg
Go to solution Solved by bangank36,

Question

Site URL: https://cyan-teal-3zmw.squarespace.com/blog-posts

I'm looking to achieve a couple of things on my blog collection page:

1) Move the metadata to below the other post content. (This is easily doable on summary pages via the "Design" panel but doesn't appear to be an option on collection pages.)

2) Change the date format from MM/DD/YY to Mon Day, Year.

Any help would be hugely appreciated!

Site password: governance

blog-metadata-layout-r2.jpg

Link to post
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

updated correct code

Thank you so much, @bangank36! To show the date with Month Date, Year (e.g. April 15, 2021), you can edit the script as follows: var dateformat = "mm-dd-yyyy"; to   v

Site URL: https://cyan-teal-3zmw.squarespace.com/blog-posts I'm looking to achieve a couple of things on my blog collection page: 1) Move the metadata to below the other post content. (This is

Posted Images

8 answers to this question

Recommended Posts

  • 2
Posted (edited)
On 3/25/2021 at 5:18 AM, dvgdvgdvg said:

Site URL: https://cyan-teal-3zmw.squarespace.com/blog-posts

I'm looking to achieve a couple of things on my blog collection page:

1) Move the metadata to below the other post content. (This is easily doable on summary pages via the "Design" panel but doesn't appear to be an option on collection pages.)

2) Change the date format from MM/DD/YY to Mon Day, Year.

Any help would be hugely appreciated!

Site password: governance

blog-metadata-layout-r2.jpg

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

image.png.b4c48c3129f85d74e8a7b01013d54c47.png

Edited by bangank36

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
12 hours ago, bangank36 said:

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]).getAttribute("content"));
          }
          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

The CSS to move the metadata to the bottom worked perfectly, thank you so much! 🙏  The script to change the date isn't working though, for some reason.

Link to post
  • 0
On 3/25/2021 at 9:43 PM, dvgdvgdvg said:

The CSS to move the metadata to the bottom worked perfectly, thank you so much! 🙏  The script to change the date isn't working though, for some reason.

updated correct code

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0

Thanks! This solves one of my problems. Is i it possible to complement the snippet with some code to change the names of the months to another language? 
I'm moving from 7.0 where I have such a script, but it does not work in 7.1.

Edited by nilsohman
Link to post
  • 0
On 3/31/2021 at 1:51 PM, bangank36 said:

updated correct code

Hi,

I have tried the same code injection into my site, it seems to only affect the first blog in my list?

https://platinum-corn-2h4b.squarespace.com/journal

Could you please help me get the code to work across all the posts. 

Thanks,

Claudia

image.thumb.png.91de2bb27d2465f756d508714f414db8.png

Link to post
  • 0

@claudnicolson Have you solved it yet?

Also, do you need fix these?

Site URL: https://platinum-corn-2h4b.squarespace.com/

1. (Mobile-Homepage) Button overlap text

platinum-corn-2h4b.squarespace.com-01-mi

2. (Tablet-Footer) Footer links overlap together

platinum-corn-2h4b.squarespace.com-02-mi

3. (Tablet-Footer) Newsletter input overflow

platinum-corn-2h4b.squarespace.com-03-mi

4. (Tablet/Mobile-Overlay Menu) Change logo color on overlay menu?

platinum-corn-2h4b.squarespace.com-04-mi

5. (Mobile-Blog posts) Replace pagination title with Prev/Next?

platinum-corn-2h4b.squarespace.com-05-mi

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