How do I add the blog year to the Skye template?

We are trying to and need to have the year after the date in a blog post. We are using the Skye Template. For example, the date just shows "Oct 2" how do we get it to display "Oct 2, 2019"?

This can be done with some Javascript. Read the datetime attribute, extract the year and append it to the date displayed in the date-callout. You'll need to find all matching elements if you want to do this on the blog list page, or just once if you only need it when the full blog article is being shown.

People in the community generally need a working link to the site to be able to provide a working solution.

I know this post is a little old, but since I just spent the time doing it, here's some code you can inject into the page header to add the year to the date output on Skye's blog listings. You'll want to add it to the "Page Header Code Injection" area (for the blog listing page, not on an individual blog post).

<style type="text/css">
.day:after {
  content: ',';
}
</style>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
window.onload = init;
  
function init() {
    var $year = $('.dt-published').map(function() {
  return $(this).attr('datetime').substr(0,4);
}).get();

    $( '.date-wrapper' ).each( function ( i ) {
        $( this ).append( '<span class="year">' + $year[i] + '</span>');
    });
}
</script>

Hopefully others get some benefit from it!

19 minutes ago, kristi-lynn said:

<script src="//code.jquery.com/jquery-2.2.1.min.js"></script>

@kristi-lynnIf your code requires jQuery, I recommend you swap for the latest production release (3.4.1 at the time of writing).

The older version you've posted has two medium-severity security vulnerabilities. 

good catch @paul2009

The bigger problem is it only works onload, so it doesn't work for entries that are loaded with infinite scroll.. gotta rework it a bit anyways..

Unfortunately, this does not work. All it does it put a "," after the month/day, then displays plain-text Javascript at the top of the page.

I figured out why.. you need to add an opening <script> tag before window.onload. So it should look like this:
 

<style type="text/css">
.day:after {
  content: ',';
}
</style>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script>
window.onload = init;
  
function init() {
    var $year = $('.dt-published').map(function() {
  return $(this).attr('datetime').substr(0,4);
}).get();

    $( '.date-wrapper' ).each( function ( i ) {
        $( this ).append( '<span class="year">' + $year[i] + '</span>');
    });
}
</script>

(Who makes a blog template that doesn't display the year anyway?!)

Ugh, it displays all years as the current year, not the year the blog was written. 😞

Hi everyone, I've gone through the steps above and I'm running into a weird little glitch. I'd like to run a script that will have the year included on all blog posts via the Page Header.

I have the script above pasted into the Page Header Code Injection with the latest version of JQuery (3.6.0). I have infinite scroll off as the glitch appears to start at exactly the location where "load more" shows up. It was doing this with infinite scroll on or off, I just didn't realize that it was exactly that break until I turned infinite scroll off.

http://samraj.ca/latest

I've been able to get the date and year to show up on the header, however, at the "load more" section (after about 20 posts), the year stops showing up.

Any suggestions on this would be greatly appreciated!

Kris.

That’s because it only triggers once on page load. It needs to be rewritten to use a mutation observer that looks for additions to the page (new dates added) and then modified the new dates too. 

14 hours ago, krissamraj said:

Hi everyone, I've gone through the steps above and I'm running into a weird little glitch. I'd like to run a script that will have the year included on all blog posts via the Page Header.

I have the script above pasted into the Page Header Code Injection with the latest version of JQuery (3.6.0). I have infinite scroll off as the glitch appears to start at exactly the location where "load more" shows up. It was doing this with infinite scroll on or off, I just didn't realize that it was exactly that break until I turned infinite scroll off.

http://samraj.ca/latest

I've been able to get the date and year to show up on the header, however, at the "load more" section (after about 20 posts), the year stops showing up.

Any suggestions on this would be greatly appreciated!

Kris.

You can use ready plugin ryanmorr/ready: Detect element availability on the initial page load and those dynamically appended to the DOM (github.com)

ready('.dt-published.date-callout', (element) => {
    /* Blog year handling code here */
});

Hello,

Anyone have the latest news or forum discussion link on the missing publish year in the date display on blog posts? I am using the Nolan template.

I'd prefer not to use code as it has to work across all browsers and viewports and I'd prefer not to test for ALL that. I would hope that SqSp would have this on their radar if indeed it's a bug and not something I've failed to troubleshoot.

Thanks,

Hally

6 minutes ago, HallyB said:

Anyone have the latest news or forum discussion link on the missing publish year in the date display on blog posts? I would hope that SqSp would have this on their radar if indeed it's a bug

This was a design choice made by the designer of that feature. It is not a bug. There are no plans to override this format choice so you'll need to use custom code if you wish to do so.

  If this post has helped you, please click a 'Like' or 'Thanks' icon below  ⬇️

Hi Paul, do you reckon it would be possible to list some other info in that circle and not the date ... eg tags or a phone number? 

1 hour ago, cameronoutridge said:

do you reckon it would be possible to list some other info in that circle and not the date ... eg tags or a phone number?

Yes, if that information is available in the page markup, although it’s probably easier to create a new but similarly styled element