Journal theme - How can I display featured images?

I’ve just come across Atom v Bits, I notice they’re using Journal theme like I am. I’m building my own on top of Journal, but have been wondering how to show featured images on index as they have done. Is it just a case of adding in the class, or further?

Hi @benravetta

To add featured images on Ghost do these 2 steps.

  1. Open/ create a new post

  1. At the top click on “add feature image”

Hi @Tiago,

I meant inside the theme itself. I have set featured image inside the post, it doesn’t show on index page just the titles.

You’ll have to update the theme files to include the feature image.

There are two files you’d need to edit :point_down:

  1. index.hbs
  2. loop.hbs

In those files, you’ll need to include an image tag that uses feature_image. Check out the Casper theme for reference.

1 Like

That’s outside my knowledge levels atm haha
Fortunately, @TheRoyalFig have helped you already

Thanks, buddy. That documentation really helped. Managed to get it done just the way I wanted.

1 Like

I tried this, but the cover images look small and not right. Any thoughts?

index.hbs

{{!< default}}

<main id="gh-main" class="gh-main gh-outer">
    <div class="gh-inner">
        {{^is "paged"}}
            {{#get "posts" limit="1"}}
                {{#foreach posts}}
		    {{#if feature_image}}
    <a class="post-card-image-link" href="{{url}}">
        {{!-- 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="post-card-image"
            srcset="{{img_url feature_image size="s"}} 300w,
                    {{img_url feature_image size="m"}} 600w,
                    {{img_url feature_image size="l"}} 1000w,
                    {{img_url feature_image size="xl"}} 2000w"
            sizes="(max-width: 1000px) 400px, 800px"
            src="{{img_url feature_image size="m"}}"
            alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
            loading="lazy"
        />
    </a>
    {{/if}}
                    <article class="gh-latest gh-card {{post_class}}">
                        <a class="gh-card-link" href="{{url}}">
                            <header class="gh-card-header">
                                <div class="gh-article-meta">
                                    <span class="gh-card-date">Latest — <time datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time></span>
                                </div>

                                <h2 class="gh-article-title gh-card-title">{{title}}</h2>
                            </header>

                            <p class="gh-article-excerpt">{{excerpt}}</p>

                            <footer class="gh-card-meta">
                                <span class="gh-card-meta-wrapper">
                                    <span class="gh-card-duration">{{reading_time}}</span>

                                    {{^has visibility="public"}}
                                        {{> icons/star}}
                                    {{/has}}
                                </span>
                            </footer>
                        </a>
                    </article>
                {{/foreach}}
            {{/get}}
        {{/is}}

        <div class="gh-wrapper">
            <section class="gh-section">
                <h2 class="gh-section-title">More issues</h2>

                <div class="gh-feed">
                    {{^is "paged"}}
                        {{#foreach posts from="2"}}
                            {{> loop}}
                        {{/foreach}}
                    {{else}}
                        {{#foreach posts}}
                            {{> loop}}
                        {{/foreach}}
                    {{/is}}
                </div>

                {{#match posts.length "=" 1}}
                    Additional issues will be published soon.
                {{/match}}

                <button class="gh-loadmore gh-btn">Load more issues</button>
            </section>

            <aside class="gh-sidebar">
                <section class="gh-section">
                    <h2 class="gh-section-title">About</h2>

                    <div class="gh-about">
                        {{#if @site.icon}}
                            <img class="gh-about-icon" src="{{@site.icon}}" alt="{{@site.title}}">
                        {{/if}}

                        <section class="gh-about-wrapper">
                            <h3 class="gh-about-title">{{@site.title}}</h3>

                            {{#if @site.description}}
                                <p class="gh-about-description">{{@site.description}}</p>
                            {{/if}}
                        </section>
                    </div>

                    {{^if @member.paid}}
                        <div class="gh-signup">
                            {{^if @member}}
                                <p class="gh-signup-description">Sign up now to get access to the library of members-only issues.</p>

                                <a class="gh-subscribe-input" href="#/portal/signup" data-portal="signup">
                                    <div class="gh-subscribe-input-text">
                                        {{> icons/email}}
                                        jamie@example.com
                                    </div>
                                    <div class="gh-subscribe-input-btn">Subscribe</div>
                                </a>
                            {{else}}
                                <p class="gh-signup-description">Upgrade to a paid account to get full access.</p>
                                <a class="gh-signup-btn gh-btn gh-primary-btn" href="#/portal/account/plans" data-portal="account/plans">Upgrade now</a>
                            {{/if}}
                        </div>
                    {{/if}}
                </section>

                {{#get "posts" filter="featured:true" limit="all" as |featured|}}
                    {{#if featured}}
                        <section class="gh-section">
                            <h3 class="gh-section-title">Featured</h3>

                            <div class="gh-featured gh-feed">
                                {{#foreach featured}}
                                    {{> loop}}
                                {{/foreach}}
                            </div>
                        </section>
                    {{/if}}
                {{/get}}

                {{#get "tags" include="count.posts" limit="all" as |topic|}}
                    <section class="gh-section">
                        <h3 class="gh-section-title">Topics</h3>

                        <div class="gh-topic">
                            {{#foreach topic}}
                                <a class="gh-topic-item" href="{{url}}">
                                    <h3 class="gh-topic-name">{{name}}</h3>
                                    <span class="gh-topic-count">
                                        {{plural count.posts empty="0 issues" singular="% issue" plural="% issues"}}
                                    </span>
                                </a>
                            {{/foreach}}
                        </div>
                    </section>
                {{/get}}
            </aside>
        </div>
    </div>
</main>

loop.hbs

<article class="gh-card {{post_class}}">
    <a class="gh-card-link" href="{{url}}">
        {{#if feature_image}}
    <a class="post-card-image-link" href="{{url}}">
        {{!-- 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="post-card-image"
            srcset="{{img_url feature_image size="s"}} 300w,
                    {{img_url feature_image size="m"}} 600w,
                    {{img_url feature_image size="l"}} 1000w,
                    {{img_url feature_image size="xl"}} 2000w"
            sizes="(max-width: 1000px) 400px, 800px"
            src="{{img_url feature_image size="m"}}"
            alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
            loading="lazy"
        />
    </a>
    {{/if}}
        <header class="gh-card-header">
            <h2 class="gh-card-title">{{title}}</h2>
        </header>

        <div class="gh-card-excerpt">{{excerpt}}</div>

        <footer class="gh-card-meta">
            <time class="gh-card-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
            —
            <span class="gh-card-meta-wrapper">
                <span class="gh-card-duration">{{reading_time}}</span>

                {{^has visibility="public"}}
                    {{> icons/star}}
                {{/has}}
            </span>
        </footer>
    </a>
</article>