April 18, 2015

Template Error Page for Ghost(Pro)

error

This post will show you hove to create a template for an error.hbs file for your template to replace the built-in error messages from Ghost.org and Ghost(Pro) by your own.

Creating your own handle for error messages in Ghost is straightforward and very simple. All you need to do is create your own error.hbs file, fill it with some HTML code, including it into the root of your template file and uploading the zipped template file to Ghost(Pro) or including it into the theme folder on your ghost.org installation.

The folks over at Ghost are explaining this in their documentation.

Ghostforbeginners has further explanations in their article “Custom Error Page“.

But none of these pages is actually showing a better-looking example. I created my own error.hbs, which includes the standard template’s header and footer.

I’m posting the code of this page below. You can make a simple copy&paste into your own error.hbs and include it into your template’s root folder.

Please note line 5:

<header class="main-header" style="background-image: url({{asset "img/crash.jpg"}})">

I hardcoded an own header image into this page (the car accident picture) and I saved this picture into assets/img/, ‘img’ being a newly created folder.

The ghost picture used further down the error page, is the standard ghost “error-picture”. Unless you want to change that picture too, there is no need to provide it with your template on Ghost(Pro), as the system will provide it automatically.

For your convenience I’m attaching the pictures at the end of this article.

  {{!< default}}
  {{! The tag above means - insert everything in this file into the {body} of the default.hbs template }}

  {{! The big featured header }}
  <header class="main-header" style="background-image: url({{asset "img/crash.jpg"}})">
      <nav class="main-nav overlay clearfix">
          {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
          {{#if @blog.navigation}}
              <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
          {{/if}}
      </nav>
      <div class="vertical">
          <div class="main-header-content inner">
              <h1 class="page-title">Houston we have a problem!</h1>
              <h2 class="page-description">No one was killed in this accident</h2>
          </div>
      </div>
      <a class="scroll-down icon-arrow-left" href="#content" data-offset="-45"><span class="hidden">Scroll Down</span></a>
  </header>

  {{! The main content area on the homepage }}
  <body class="{{bodyClass}}">
    <main role="main" id="main">
      <div id="container" align="center">
        <section class="error-content error-404 js-error-container">
          <section class="error-details">
            <figure class="error-image">
              <img
                class="error-ghost"
                src="{{asset "img/404-ghost@2x.png" ghost="true"}}"
                srcset="{{asset "img/404-ghost.png" ghost="true"}} 1x, {{asset "img/404-ghost@2x.png" ghost="true"}} 2x"/>
            </figure>
            <section class="error-message">
              <h1 class="error-code">{{code}}</h1>
              <h2 class="error-description">{{message}}</h2>
              Go back to <a class="error-link" href="{{@blog.url}}">{{@blog.title}} →</a>
            </section>
          </section>
        </section>
        {{#if stack}}
          <section class="error-stack">
            <h3>Stack Trace</h3>
            <p><strong>{{message}}</strong></p>
            <ul class="error-stack-list">
              {{#each stack}}
                <li>
                  at
                  {{#if function}}<em class="error-stack-function">{{function}}</em>{{/if}}
                  <span class="error-stack-file">({{at}})</span>
                </li>
              {{/each}}
            </ul>
          </section>
        {{/if}}
      </div>
    </main>
  </body>
  </main>
 
Pictures for free download:
404-ghost
404-ghost-2x
crash

Jeannot Muller

Entrepreneur, developer, author.

Click Here to Leave a Comment Below

Leave a Reply: