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    

img_url

{{img_url}} Helper - output the URL for an image property

Usage: {{img_url imageToOutput}}

Watch the spelling!

The name of this helper is {{img_url}} with the same spelling as the HTML <img> helper... this is because we're planning to add an {{img}} helper to output HTML later.

If you use {{image_url}} your theme may throw 500 errors.

Type
Parameters
Attributes

image to output (path to the image property, no default)

  • absolute (boolean)

Description

The img url helper outputs the correctly calculated URL for the provided image property.

You must tell the {{img_url}} helper which image you would like to output.

E.g. if you want to output a url for a post's feature image inside of post.hbs you might use {{img_url feature_image}}.

You can force the image helper to output an absolute url by using the absolute option, E.g. {{img_url profile_image absolute="true"}}. This is almost never needed.

Example code

Below is a set of examples of how you might output various images that belong to posts, authors or tags:

{{#post}}

  <!-- Outputs post's feature image if there is one -->
  {{#if feature_image}}
	<img src="{{img_url feature_image}}">
  {{/if}}

  <!-- Output post author's profile image as an absolute URL -->
	<img src="{{img_url author.profile_image absolute="true"}}"> 

  <!-- Open author context instead of providing full path -->
  {{#author}} 
 	   <img src="{{img_url profile_image}}">
  {{/author}}

  <!-- Loop over tags, and outputs each tag's feature image -->
  {{#foreach tags}}
     <img src="{{img_url feature_image}}" /> 
  {{/foreach}}

  <!-- Check for a primary tag, use a full path to output its feature image -->
  {{#if primary_tag}}
    <img src="{{image_url primary_tag.feature_image}}">
  {{/if}}

  <!-- Open primary_tag context, instead of using full path -->
  {{#primary_tag}}
    <img src="{{image_url feature_image}}">
		
		<!-- Go back one level in context, output the POST feature image as well -->
		<img src="{{img_url ../feature_image}}">
  {{/primary_tag}} 

{{/post}}

Notice how the second argument passed to {{img_url}} is a path to a property and is relative to the context. You can move between contexts in different ways, so you can get from a post to it's primary tag using primary_tag.x and you can move back from a tag to the parent post using ../x. Same works for authors.

Here's a more complex example, taken from Casper's post.hbs, using a complex path and the img_url helper together to look like: {{img_url ../primary_tag.feature_image}}.

{{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
  {{#if related_posts}}
    <article class="read-next-card"
    {{#if ../primary_tag.feature_image}} 
       style="background-image: url({{img_url ../primary_tag.feature_image}})"
    {{else}}
        ... do something else ...
    {{/if}}
  {{/if}}
{{/get}}

We fetch a list of "related" posts that have the same tag as the current post's primary tag (see the {{get}} helper for more information on how this works).

If we have some results ({{#if related_posts}}), then we want to output the feature image from the original post's primary tag. So we go back one level from our get helper, to the original post using ../ then reference the primary tag's using primary_tag, and finally use a dot to reference the feature_image property of the primary tag: ../primary_tag.feature_image.

img_url

{{img_url}} Helper - output the URL for an image property