How to have a page look like the home page

Themes
1

My home page is displaying its background from the very top of the screen and down a certain amount. This is fine.

Now I want a page to look similarly (but with a different background). Since my home page is displaying how I want my new page (storage with slug ‘storage’) to appear I copied home.hbs to page-:storage.hbs (and restarted Ghost) but this doesn’t do anything when I reload my page in the browser. The page’s image is shown separately with whitespace around it.

One difference between Home and pages is that, in the UI, for the former you can feed a background in a seemingly special way (“publication cover”) whereas a page gets it in a different way (“upload page image”).

I feel if I can get this question answered I will learn a lot about how Ghost works.

2

The template filename should probably be: page-storage.hbs

When the docs say page-:slug.hbs they want you to change all of :slug to your page slug - i.e. the : is there to remind you that slug is not a literal.

3

also, given what you are trying to do, you should probably:

  1. start with a copy of page.hbs rather than home.hbs
  2. carefully incorporate the styling changes that you want from home.hbs

The home.hbs is designed to show you an index which contains details of many posts.

The page.hbs is designed to show you a single page.

4

Okay.

This is the contents of home.hbs (actually copied from index.hbs; there was no home.hbs originally):

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

<div class="site-header-content">
    {{#if @site.cover_image}}
        {{!-- This is a responsive image, it loads different sizes depending on device
        https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
        <img class="site-header-cover"
            srcset="{{img_url @site.cover_image size="s"}} 300w,
                    {{img_url @site.cover_image size="m"}} 600w,
                    {{img_url @site.cover_image size="l"}} 1000w,
                    {{img_url @site.cover_image size="xl"}} 2000w"
            sizes="100vw"
            src="{{img_url @site.cover_image size="xl"}}"
            alt=""
        />  
    {{/if}}     
    <h1 class="site-title">
        {{#if @site.logo}}
            <img class="site-logo" src="{{img_url @site.logo size="m"}}" alt="{{@site.title}}" />
        {{else}}
            {{@site.title}}
        {{/if}} 
    </h1>   
    <p>{{@site.description}}</p>
</div>  
    
{{!-- The main content area --}}
<main id="site-main" class="site-main outer">
    <div class="inner posts">
        
        <div class="post-feed">
            {{#foreach posts}}

                {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
                {{> "post-card"}}

            {{/foreach}}
        </div>

    </div>
</main>

The portion that can possibly influence the top “background” image is (minus the comment):

    {{#if @site.cover_image}}
        <img class="site-header-cover"
            srcset="{{img_url @site.cover_image size="s"}} 300w,
                    {{img_url @site.cover_image size="m"}} 600w,
                    {{img_url @site.cover_image size="l"}} 1000w,
                    {{img_url @site.cover_image size="xl"}} 2000w"
            sizes="100vw"
            src="{{img_url @site.cover_image size="xl"}}"
            alt=""
        />

It seems to say: if @site.cover_image is present then display it using a “class” of site-header-cover.

Where is the documentation for img_url? How does one know what values can be used? This page is incomplete. Notably, it does not mention @site.cover_image. I did eventually find this page that does mention @site.cover_image and says it represents “the site cover image from general settings”. So this does not help me.

Where are image “classes” documented (e.g. the site-header-cover above)?

What “property” represents the (upload) “page image” for a page?

Or must I hardcode a path to an image? Where is that method documented?