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.
2 Likes
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>
3 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):
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
Barring a MASSIVE feature push involving digital asset management, the easiest way to achieve this in the editor is creating reusable snippets.
Snippets aren’t going to get you a reusable feature image. (That would work fine for images in the body of the post, however!)
You can:
- create the post using the Admin API (I know, not an easy option for most users - I’ve got it on my hit list for new features in Phantom Admin, but have been busy with other work)
- duplicate a post with the correct feature image (right click from the list of posts in the editor), then edit it to have the new content, slug, etc.
Yes, those are both somewhat poor workarounds.
2 Likes
The easiest way is to create a template article with only the feature image. Right click on it and duplicate that article whenever you are publishing new content with the same feature image.
2 Likes