Oversharing & Under Caring

Link posts are really popular, and a great tool to help link to others out that you enjoy. Daring Fireball made them famous, but loads and load of blogs do them now. It a bit of a task to get the set up on WordPress, but manageable - however since moving to Ghost I’ve been stuck on how to manage them.

Luckily I have come across a pretty good way of posting these properly using the custom meta data ‘canonical url’.

This feature launched in March 2019, has enabled Ghost users to point to another url rather than their post. Even better is its pretty easy to pull out this data. Consider this rough information as each theme will vary but they won’t look too dissimilar.

Preparation

In preparation for doing this work, I have tagged all posts Link Post and added in the page the blockquote came from into the canonical url. You will find this option in your posts meta data settings.

Index Page

Depending on the look you want to go for, this part will vary in complexity. I simply wanted to edit my index to highlight link posts and leave everything else as is.

In my index.hbs file, it calls a partial, default-article.hbs for displaying information from the loop. However if you display all of your post content on the page you may want to also edit the title - for this see the next part. For ease of fault finding and so I didn’t break anything straight away, I duplicated my partial and called in link-article.hbs.

In index.hbs I then edited the regular loop with an if statement to identify link posts.

{{#foreach posts}}
	{{#has tag="Link Posts"}}
		{{> loop/link-article}}
	{{else}}
		{{> loop/default-article}}
	{{/has}}
{{/foreach}}

In simple terms this displays link-article.hbs for link posts and default-article.hbs for everything else.  As said, on my index I simply wanted to highlight the link posts with a simple symbol so I found the title and change it to this.
<h1 class="title main-title gradient-effect"><a href="{{url}}">&#128279; {{{title}}}</a></h1>

This just adds a link unicode in decimal to the start of the title. Yours will more than likely look very different. I could have easily done this in the default partial, but if I wanted to edit how a link post is displayed later, this way made it easier.

Post Page

In my posts page all information displayed is controlled by post.hbs so the edits here where easy. Find where it displays your post title and add simple if statement. Look for <h1>  and  {{title}}.

This will split the way the title is displayed and link to the canonical url only on posts tagged correctly.

{{#has tag="Link Posts"}}
	<a href="{{canonical_url}}" target="_blank"><h1 class="title main-title gradient-effect">{{title}} &#8594;</h1></a>
{{else}}
	<h1 class="title main-title gradient-effect">{{title}}</h1>
{{/has}}

I’ve added in a right arrow to the end of the title simply for consistency with my old design.  You might want to do this on index.hbs if you want to link to the canonical straight away.

For further information there are pretty good documents directly from Ghost on learning how to design your theme.

You've successfully subscribed to Greg Morris
Welcome back! You've successfully signed in.
Great! You've successfully signed up.
Your link has expired
Success! Your account is fully activated, you now have access to all content.