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>
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