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.
- Open/ create a new post
- 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 
In those files, you’ll need to include an image tag that uses feature_image. Check out the Casper theme for reference.
1 Like
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>
I don’t know CSS/HTML. Is there a noob guide on how I can add small blocks of feature images next to posts? Just like the Edition and Headline themes.
This is a noob guide. Follow the above, it’s really simple once you look at it…
Hey @kenndanielso , welcome to the forum!
The code posted by boycottseattle.xyz looks like it was pretty close. Did you try it? If so, could you paste the link the site and if the images are “not right” in some way, perhaps an explanation of what’s wrong? Folks on the forum can probably help you debug it.
Or, if you’re uncomfortable editing HTML/CSS and not interested in trying it, you may want to consult the Ghost experts directory or post over in the marketplace area to see if someone can help.
p.s. If you’re hosting on Ghost Pro, note that the ‘starter’ package doesn’t let you edit the theme, so the solution above isn’t an option. You’d need the ‘creator’ package for that.