dvgdvgdvg Posted March 24, 2021 Share Posted March 24, 2021 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 Beyondspace 1 Link to comment
Solution Beyondspace Posted March 25, 2021 Solution Share Posted March 25, 2021 (edited) 🌍 [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 〰️ 〰️ 〰️ 〰️ 〰️ 〰️ 〰️ 〰️ 〰️ 〰️ 〰️ 〰️ 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 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 Edited May 16 by Beyondspace ericka 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
dvgdvgdvg Posted March 25, 2021 Author Share Posted March 25, 2021 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
Beyondspace Posted March 31, 2021 Share Posted March 31, 2021 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 claudnicolson and dvgdvgdvg 1 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
dvgdvgdvg Posted March 31, 2021 Author Share Posted March 31, 2021 1 hour ago, bangank36 said: updated correct code Works perfectly now! Thanks so much! Beyondspace 1 Link to comment
nilsohman Posted April 15, 2021 Share Posted April 15, 2021 (edited) 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 April 15, 2021 by nilsohman Beyondspace 1 Link to comment
ericka Posted April 15, 2021 Share Posted April 15, 2021 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 var dateformat = "mmm dd, yyyy"; I did this on my blog and it worked perfectly. Thank you again! nilsohman and Beyondspace 2 Link to comment
claudnicolson Posted May 24, 2021 Share Posted May 24, 2021 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 Beyondspace 1 Link to comment
Beyondspace Posted July 16, 2021 Share Posted July 16, 2021 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 tuanphan 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Beyondspace Posted July 16, 2021 Share Posted July 16, 2021 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 Saw you revert to the default display, did you manage to solve it BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
tuanphan Posted October 3, 2021 Share Posted October 3, 2021 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
dvgdvgdvg Posted October 3, 2021 Author Share Posted October 3, 2021 (edited) 5 hours ago, tuanphan said: Is there anyway to change MM/DD/YY to YY/MM/DD? Thank you! Just change this part in the code: var dateformat = "mm-dd-yyyy"; To this: var dateformat = "yy-mm-dd"; Edited October 3, 2021 by dvgdvgdvg Beyondspace 1 Link to comment
Beyondspace Posted October 3, 2021 Share Posted October 3, 2021 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" BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
tuanphan Posted October 3, 2021 Share Posted October 3, 2021 @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
Beyondspace Posted October 3, 2021 Share Posted October 3, 2021 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 @dvgdvgdvg would you mind to confirm if it work on this page https://cyan-teal-3zmw.squarespace.com/blog BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Beyondspace Posted November 22, 2021 Share Posted November 22, 2021 (edited) 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 November 22, 2021 by bangank36 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
sarahcreates Posted September 29, 2022 Share Posted September 29, 2022 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. Link to comment
Beyondspace Posted September 29, 2022 Share Posted September 29, 2022 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. Can you share your site so I can check it? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
sarahcreates Posted September 29, 2022 Share Posted September 29, 2022 5 minutes ago, bangank36 said: Can you share your site so I can check it? Sent you a DM Beyondspace 1 Link to comment
sarahcreates Posted September 29, 2022 Share Posted September 29, 2022 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 ; } Beyondspace 1 Link to comment
johnpaulstuthridge Posted March 17 Share Posted March 17 On 3/25/2021 at 2:01 AM, Beyondspace 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]); } 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 This code doesn't work on my on my site, it shows a syntax error on the first line of the code Link to comment
tuanphan Posted March 19 Share Posted March 19 On 3/17/2023 at 7:04 PM, johnpaulstuthridge said: This code doesn't work on my on my site, it shows a syntax error on the first line of the code <script> code, you need to add it to Settings > Advanced > Code Injection > Footer 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
johnpaulstuthridge Posted March 19 Share Posted March 19 45 minutes ago, tuanphan said: <script> code, you need to add it to Settings > Advanced > Code Injection > Footer Didn't work. Though, all I want on my blog collection grid page is for the dates to change the format: from 11/11/11 > November 11, 2015 Any ideas? Link to comment
tuanphan Posted March 21 Share Posted March 21 On 3/19/2023 at 4:33 PM, johnpaulstuthridge said: Didn't work. Though, all I want on my blog collection grid page is for the dates to change the format: from 11/11/11 > November 11, 2015 Any ideas? Can you share link to your site? 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
johnpaulstuthridge Posted March 21 Share Posted March 21 11 hours ago, tuanphan said: Can you share link to your site? https://www.manfortoday.com/ Password: mft1996 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment