In this blog post, I will collect the tips and tricks I found while working with Ghost Pro as a blogging platform. Consider this a living document in which entries will be added over time.

Last update: 14 August 2018

Table of contents

Full articles on this blog:

1. Open link in a new window

Updated for Ghost v1.0+

Adding links to a Ghost page is easy and uses the following syntax: [Link Text](link url), for example [Coen Goedegebure's blog](https://www.coengoedegebure.com). By default, the link target is set to _self, which will make the link opn. This is quite annoying when reading articles, since the browser will navigate away from the original article. The Ghost link syntax does not facilitate setting a different target, but with a small tweak, this can be fixed. Since Ghost v1.0 this tweak no longer works, see the paragraph below for a solution for this version.

Add the following text to the link url to make the reference open in a new window or tab (note the quotes):

" target="_blank

In full:

[Link Text](link url" target="_blank)

Ghost v1.0+

Since Ghost v1.0 the above tweak no longer works. However, adding a script to the blog footer will have make this work for version 1.0 and won't require any manual modifications of the links:

var links = document.querySelectorAll('.post-full-content a');  
for (var i = 0, length = links.length; i < length; i++) 
{  
   if (links[i].hostname != window.location.hostname) 
   {
      links[i].target = '_blank';
      links[i].rel = 'noopener';
   }
}

The script modifies all hyperlinks in the document that refer to a location outside the page's domain and set their target to _blank. Note that only the links inside the class 'post-full-content' are modified, which in my theme is the name of the class that wraps a post's content. In your theme this may be a different class name.

Performance and security improvements with rel = "noopener"

With target="_blank", the new page will open in the same process as your page. If the new page is executing expensive JavaScript, your page's performance may also suffer.
Moreover, it is a security risk since the new page has access to your window object via window.opener, and it can navigate your page to a different URL using window.opener.location = newURL. This is why I added the links[i].rel = 'noopener' to the script as well. For more information check out this page.

In case you're migrating to Ghost v1.0+ from the " target="_blank fix, you will be required to remove the additional target-text from your links' urls.

to top

2. Adjust image sizes

Updated for Ghost v1.0

The syntax for adding images on a Ghost blog page is ![alternative text](image url). Typing ![] will immediately display a placeholder in the page that allows dragging-and-dropping an image onto it. Awesome!
The resulting text could be ![small](/content/images/2017/07/ghost_small.png), which results in the image below

small

However, the syntax does not allow setting additional attributes. Sometimes it can be useful to adjust the size of an image to make it blend in better. Add the following text to the image's alternative text to fix this:

" width="500

or 

" height="200

In full ![small](url) becomes:

![small" width="500](url)

The image will scale the set width / height with respect to its aspect ratio and even percentages are possible.

For example, setting the width of the ghost picture to 50 pixels, has the following result:

" width="50

Note that setting a percentage, will scale the image relative to the container it is in. In the following example, the width is set to 30%, which will be 30% of the width of its container's width:

" width="30%

Take into account that setting a percentage for the width will also be the width-percentage on mobile environments, possibly making the image harder to see.

How I use it on my blog, is setting the width to a fixed value (if it needs to be rescaled) and using css to limit the width to 100% of the container:

img {
   max-width: 100%
}

This will prevent larger images scaling beyond the screen width on mobile devices.
Note that the CSS styling may conflict with the hard-coded width settings, so make sure you check your CSS out when troubleshooting.

to top

3. Using and offsetting anchors

When building a table of contents for an article, like the one in the page you're viewing at the moment, it is very useful to use anchor tags. These allow the user to jump directly to a certain chapter.

  • Place an anchor somewhere on the page <a id="anchorname"></a>
  • Then create a link to it by adding the text [navigate](#anchorname)

It's as easy as that. Make sure that the id of your custom anchor is unique. By default the headers (h1, h2, h3) on your page will get a unique id based on their text. For example "Using and offsetting anchors" will get the id "usingandoffsettinganchors". If you would create a link to that id, it would navigate to the header instead of your custom anchor. This might not be a problem unless you want to offset its position like described in the next section:

Offsetting anchors

If you have a navigation bar like me, you might want to offset the anchor's position to compensate for the height of the bar. This can be done by adding a class to your anchor and using CSS to offset it. Like this:

a.anchor {
    display: block;
    position: relative;
    top: 40px;
    visibility: hidden;
}

Making the anchor a block element and relatively positioning it, will offset the anchor higher (negative values) or lower (positive values). Now you can add the 'anchor'-class to an anchor to adjust its offset:

<a class="anchor" id="anchorname"></a>

to top