How to make the post title appear below the featured image

Using Ghost
1

Hi, I’d like to reformat my post so that the post title appears below the featured image instead of above it. I’m using the Headline theme. If you know, would you share? Thanks. Nik

2

are you able to edit the theme, or do you need a code injection solution?

3

Hi Cathy,

By selecting the a different template within the post editor I can get the headline to appear on the featured image but not below it. So maybe a code-injection solution would be best.

Is there a way to modify the template so the changes are site-wide and I don’t have to code inject individually into each post?

Thanks!

4

It’s an easy change in Headline, but that assumes you can load a custom theme. Can you load a custom theme? If you can’t load a custom theme, then you’d need some code injection that rearranges those elements. (And to be clear, it’s going to look ‘wrong’ in the editor, but right on the page, for either solution.)

5

Thanks. Yes, I plan on switching to the Creator plan where I can upload custom themes.

6

So you need to edit the theme file (in content/themes/headline/) that’s responsible for displaying posts, which is post.hbs

This file is basically html, with some {{handlebars stuff}}.

The line you want is:
<h1 class="gh-article-title">{{title}}</h1>
That’s the post title.

The featured image (picture at the top of the post) is this bit:

                {{#if feature_image}}
                    <figure class="gh-article-image">
                        <img
                            srcset="{{img_url feature_image size="s"}} 300w,
                                    {{img_url feature_image size="m"}} 720w,
                                    {{img_url feature_image size="l"}} 960w,
                                    {{img_url feature_image size="xl"}} 1200w,
                                    {{img_url feature_image size="xxl"}} 2000w"
                            sizes="(max-width: 1200px) 100vw, 1200px"
                            src="{{img_url feature_image size="xl"}}"
                            alt="{{title}}"
                        >
                        {{#if feature_image_caption}}
                            <figcaption>{{feature_image_caption}}</figcaption>
                        {{/if}}
                    </figure>
                {{/if}}

So basically, if you rearrange those sections, you should be able to accomplish what you’re going for. Be sure to look at the other parts. Headline also displays post authors and excerpts, so you’ll need to decide where you want those, too.

I’m going to link below a tutorial on how to create a custom page, because it talks about editing a theme in a fairly newbie-friendly way. How to build a custom homepage for your Ghost theme . You can ignore the part about creating a new home.hbs file, but the parts about how to get the theme and edit it and zip it are all on point.

1 Like
7

Cathy! Thank you so much! I appreciate your explanation and the link to the custom homepage tutorial. That feels super helpful. Thanks again! :D

1 Like
8

Bonus question. How can I disable the feature image from the post page completely but it will still show as a feature/preview image otherwise at homepage?

EDIT: found the solution

9

If you’re editing the headline theme @Reseal4115 , you can just remove the whole section from {{#if featured_image}} to {{/if}} on only the post.hbs page, and leave the index.hbs alone.

1 Like
10

Thanks. I would like to control this for specific posts, not for the whole theme. I will write it here once I figure it out and test it.

11

So you could use a tag to mark the posts that should (or shouldn’t) show the image, and check if the posts have the tag.

Alternately, you could use code injection on the specific posts that you want to not show the image and set display: none on the figure container.

1 Like