Is there a way to reuse feature image from different posts?

Hello everyone,
I’m looking for a way to reuse the same feature image across different posts instead of reuploading the same image for every post. Is there a way to do this?
Many thanks in advance.

From my experience you have to reupload it each time. I wish there was a way to pick from already uploaded images.

1 Like

In the API, yes. In the Ghost editor, no.

1 Like

Hello @konayachi welcome in!

I use two different methods for automatically collecting and displaying all of the feature images on my Ghost sites. This way, on one long page, I can browse through all of the feature images I’ve previously uploaded and right-click on the image I want to reuse to copy-and-paste the image URL.

It’s not a media manager, but if you don’t want to keep re-uploading the same images over and over, it’ll enable reusing the same images.

For each of these methods I use a different Custom Post Template.

My Site Images Archive looks like this, and displays the three differently auto-resized versions of each feature image, ordered by the date of the post…

The contents of my custom-image-archive.hbs template...
{{!-- template: custom-image-archive | 2023.07.20 --}}

{{!< default}}

{{#post}}
<section class="section">
    <div class="container">
        <h1 class="title has-text-centered is-clearface"><i class="iconfont icon-archive"></i> {{title}}</h1>     
    </div>
</section>
<section class="section is-paddingless-top is-mobile-paddingless">
    <div class="columns">
        <div class="column is-hidden-touch is-1-desktop is-1-widescreen is-2-fullhd"></div>
        <div class="column is-12-tablet is-10-desktop is-10-widescreen is-8-fullhd">
            <article class="single-article">
                <div class="box is-paddingless is-shadowless is-full-mobile is-centered is-clipped">
                    <section class="post-wrap is-vpadding-15">
                        <div class="spacing-15 is-hidden-mobile"></div>
                        <div class="post-content">
                            {{#get "posts"}}
                                {{t "There are {total} posts with feature images" total=pagination.total}}
                            {{/get}}
                            <ul class="post-archive">
                                {{#get "posts" limit="all" include="authors" order="published_at desc"}}
                                    {{#foreach posts}}
                                                {{#if feature_image}}
                                                    <a href='{{url}}'><span class="img-archive"><img src="{{img_url feature_image size="100"}}" alt="{{title}}" /></span></a>
                                                    <span class="img-archive"><img src="{{img_url feature_image size="200"}}" alt="{{title}}" /></span>
                                                    <span class="img-archive"><img src="{{img_url feature_image size="300"}}" alt="{{title}}" /></span>
                                                {{/if}}         
                                    <li class='post-archive-item' year="{{date format=(t 'YYYY')}}" month="{{date format=(t 'MMMM')}}">
                                            <div class="date">
                                                <time class="button is-static is-size-7">{{date published_at format=(t "MMM DD")}}</time>
                                            </div>
                                            <div class="subtitle">
                                                <a href='{{url}}'>
                                                    {{title}}
                                                </a>
                                                {{#if featured}}
                                                    <span style="color:var(--main-color)" title="{{t "Featured"}}"><i class="iconfont icon-star"></i></span>
                                                {{/if}}
                                                <span class="authors"> - {{#authors}} {{name}} {{/authors}} </span>
                                            </div>
                                    </li>
                                    {{/foreach}}
                                {{/get}}
                            </ul>
                        </div>
                    </section>
                </div>
            </article>
        </div>
        <div class="column is-hidden-touch"></div>
    </div>
</section>
{{/post}}


The other implementation is a masonry grid of all the feature images in full size (but scaled down to appear as thumbnails for compact display)…

The contents of my custom-image-grid.hbs template...
{{!-- template: custom-image-grid | 2023.07.20 --}}

{{!< default}}

<style>
.grid-item { width: 10rem; }
.grid-item--width2 { width: 20rem; }
</style>

{{#post}}
<div style="text-align: center; width: auto; margin: 0 auto; padding: 1rem; border-bottom: 1px solid #ddd; font-size: 2rem">{{title}}</div>
{{#get "posts" limit="all" order="published_at desc"}}
<div style="padding: 2rem">
<div class="grid">
{{#foreach posts}}
{{#if feature_image}}
<div class="grid-item"><img src="{{img_url feature_image}}" alt="{{title}}" /></div>
{{/if}}
{{/foreach}}
</div>
</div>
{{/get}}
{{/post}}

<script src="https://unpkg.com/packery@2/dist/packery.pkgd.min.js"></script>
<script>
var elem = document.querySelector('.grid');
var pckry = new Packery( elem, {
// options
itemSelector: '.grid-item',
columnWidth: 25,
gutter: 20
});
</script>

2 Likes

Thank you everyone for the input!

@denvergeeks it looks like a neat solution! However, in the feature image it’s not possible to paste a link to an uploaded feature image. It only opens a file picker window (or unsplash image picker):
image

Is there a way to paste the image URL on the feature image field?

@konayachi you could replace the feature image with the first image you insert into the content area. Images inserted into the content area can use an image URL…

2 Likes