The Ghost Themes Developer Hub

Welcome to the Ghost Themes developer hub. You'll find comprehensive guides and documentation to help you start working with Ghost Themes as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

asset

{{asset}} Helper - Safely add assets to your theme

Usage: {{asset "asset-path"}}

Type
Parameters
Attributes

asset path (string)

n/a

Description

The {{asset}} helper exists to take the pain out of asset management. Firstly, it ensures that the relative path to an asset is always correct, regardless of how Ghost is installed. So if Ghost is installed in a subdirectory, the paths to the files are still correct, without having to use absolute URLs.

Secondly, it allows assets to be cached. All assets are served with a ?v=####### query string which currently changes when Ghost is restarted and ensures that assets can be cache busted when necessary.

Thirdly, it provides stability for theme developers so that as Ghost's asset handling and management evolves and matures, theme developers should not need to make further adjustments to their themes as long as they are using the asset helper.

Finally, it imposes a little bit of structure on themes by requiring an assets folder, meaning that Ghost knows where the assets are, and theme installing, switching live reloading will be easier in future.

Examples

To use the {{asset}} helper to output the path for an asset, simply provide it with the path for the asset you want to load, relative to the assets folder.

For css:

<link rel="stylesheet" type="text/css" href="{{asset "css/style.css"}}" />
<link rel="stylesheet" type="text/css" href="/path/to/blog/assets/css/style.css?v=1234567" />

For js:

<script type="text/javascript" src="{{asset "js/index.js"}}"></script>
<script type="text/javascript" src="/path/to/blog/assets/js/index.js?v=1234567"></script>

For theme images:

<img src="{{asset "images/my-image.jpg"}}" />
<img src="/path/to/blog/assets/images/my-image.jpg?v=1234567" />

Note: There's no need to switch between double and single quotes when writing HTML with handlebars. Double quotes can be used for both because the handlebars is executed first.

asset

{{asset}} Helper - Safely add assets to your theme