Jump to content

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

Go to solution Solved by Beyondspace,

Recommended Posts

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 comment
  • Solution
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 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, Keyword Highlighter
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 comment
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 comment
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 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, Keyword Highlighter
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 comment
  • 3 weeks later...
  • 1 month later...
  • 1 month later...
On 4/15/2021 at 11:44 PM, nilsohman said:

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.

We should use moment js for this, but which code did you used on the old site

Greeting, it's 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, Keyword Highlighter
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 comment
On 5/24/2021 at 11:28 PM, claudnicolson said:

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

Saw you revert to the default display, did you manage to solve it

Greeting, it's 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, Keyword Highlighter
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 comment
  • 2 months later...
On 7/16/2021 at 10:45 AM, bangank36 said:

Saw you revert to the default display, did you manage to solve it

Is there anyway to change MM/DD/YY to YY/MM/DD? Thank you!

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
5 hours ago, tuanphan said:

Is there anyway to change MM/DD/YY to YY/MM/DD? Thank you!

 

10 minutes ago, dvgdvgdvg said:

Just change this part in the code:

var dateformat = "mm-dd-yyyy";

To this:

var dateformat = "yy-mm-dd";

Thanks to @dvgdvgdvg , have you try "yy/mm/dd"

Greeting, it's 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, Keyword Highlighter
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 comment

@dvgdvgdvg @bangank36 Thank you. It works on individual posts only.

 The list page doesn't have an attribute "datetime" so the code can't run?

List page

<span class="blog-meta-secondary">
      <span class="blog-author">Adrienne Chan</span>
    
    <time class="blog-date" pubdate="" data-animation-role="date">1/10/21</time>
  </span>

Individual posts

<div class="blog-item-author-date-wrapper" data-animation-role="date">
            <time class="dt-published blog-meta-item blog-meta-item--date" datetime="17 Sep" pubdate="" data-content-field="published-on">2001-09-17</time>
            <div class="blog-meta-item blog-meta-item--author p-author author" data-content-field="author">Written By <a href="/provocations" class="blog-author-name">Nick Hutton</a></div>
          </div>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
2 minutes ago, tuanphan said:

@dvgdvgdvg @bangank36 Thank you. It works on individual posts only.

 The list page doesn't have an attribute "datetime" so the code can't run?

List page

<span class="blog-meta-secondary">
      <span class="blog-author">Adrienne Chan</span>
    
    <time class="blog-date" pubdate="" data-animation-role="date">1/10/21</time>
  </span>

Individual posts

<div class="blog-item-author-date-wrapper" data-animation-role="date">
            <time class="dt-published blog-meta-item blog-meta-item--date" datetime="17 Sep" pubdate="" data-content-field="published-on">2001-09-17</time>
            <div class="blog-meta-item blog-meta-item--author p-author author" data-content-field="author">Written By <a href="/provocations" class="blog-author-name">Nick Hutton</a></div>
          </div>

 

I cover that case, either pubdate attribute or text content, if you have some idea to refactor the code, I am happy to hear, will update it over time to cover all odd cases

image.png.190db83e4ccf6f321873cdae7a4b42aa.png

@dvgdvgdvg would you mind to confirm if it work on this page

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

Greeting, it's 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, Keyword Highlighter
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 comment
  • 1 month later...

I've updated a general new solution for this requirement in the following post:

It can set a unique format date on all pages.

If you have any issue when implementing it, do not hesitate to reply on my threat

Edited by bangank36

Greeting, it's 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, Keyword Highlighter
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 comment
  • 10 months later...
On 3/25/2021 at 2:01 AM, 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;
}

@bangank36 I have tried customising this myself but having no luck. Could you let me know how I'd move the meta to above the 'read more' link ('more info' button in my case), please? 7.1 basic grid blog.
 

Screenshot 2022-09-29 at 14.49.07.png

Link to comment
4 minutes ago, sarahcreates said:

@bangank36 I have tried customising this myself but having no luck. Could you let me know how I'd move the meta to above the 'read more' link ('more info' button in my case), please? 7.1 basic grid blog.
 

Screenshot 2022-09-29 at 14.49.07.png

Can you share your site so I can check it?

Greeting, it's 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, Keyword Highlighter
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 comment

For anyone coming looking for the answer to my query, @bangank36 has solved it. Thank you!

To move the meta below the excerpt, but above the 'read more' link. Insert (and enter your own ID) this to your css:

section[data-section-id="xxx"] .blog-basic-grid--text {
  display: flex;
  flex-direction: column;
}
section[data-section-id="xxx"] .blog-meta-section {
  order: 1;
}

section[data-section-id="xxx"] .blog-more-link {
  order: 2 ;
}

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.