Image Caption for Feature Image

Hi,

I’m currently building a theme, where I want to use feature images for posts and pages. Doing this I noticed that there is no way to store a caption for a given feature image. I’d like to caption them to directly associate image credits with the feature image. Also for alt text this could be relevant.

I assume it would make sense to either edit the caption with an additional input feature image dialogue or put both as part of a separate context menu like “Meta Data”.

Would be happy if this would be implemented <3

Kind regards,
Christoph

While the feature image doesn’t directly have a caption field, you could still use one of the existing meta fields to populate it. You could even use code injection to add it dynamically with a bit of JavaScript :sparkles:

Hello David,

I had some JavaScript written for me (I don’t know JS) that does what you mention. I’ve got this code loading up via a small .js file called from my default.hbs file:

if($("#main-fig-caption")) { $("#main-figure-caption").html($("#main-fig-caption").html()); $("#main-fig-caption").remove();}

This in the <figure> section of the file that calls the feature image:

<figcaption><span id="main-figure-caption"></span></figcaption>

And then I include the following in an HTML card at the bottom of each post that I want to have a caption for the feature image:

<div id="main-fig-caption">CAPTION GOES HERE (photo by <a href="___" target="_blank">___</a>)</div>

Works somewhat fine, although the feature image caption only appears on the actual post itself, not on the home page or any other index pages. (Also, the caption unfortunately appears as regular text at the bottom of the content on RSS feeds, which is of course better than placing the latter <div> in an HTML card at the top portion of the post since that makes the caption appear as regular text at the top part of the post on index pages.)

You say that “you could still use one of the existing meta fields to populate it”. I take it you don’t mean the Meta Data fields since those are for “Extra content for search engines”. Does that mean you’re suggesting to use the Excerpt field? Because the docs unfortunately say that "{{excerpt}} outputs content but strips all HTML", meaning no good for giving credit with a link to photographers from Flickr or Unsplash or what have you. Is there another option you’re suggesting of which I’m missing?

Cheers

1 Like

Yea that appears to be kind of like what I was thinking of. However you could use the code injection block to set it and not have it floating around in the post content. Something like this:

// Theme code JavaScript
const feature = document.querySelector('.post-full-image');

const featureHTML = featureCaption => `
	<figcaption>
		<span id="main-figure-caption">${featureCaption}</span>
	</figcaption>
`;

if (featureCaption) {
	feature.innerHTML = feature.innerHTML + featureHTML(featureCaption);
};

… and then in the post:

<!-- Code injection block in post -->
<script>
	featureCaption = `This is my caption, <a href="#">links and all</a>`;
</script>

I’ve created a demo on CodePen for reference: https://codepen.io/daviddarnes/pen/VwZJwoN

2 Likes

Hi,

I really appreciate your efforts on finding an immediate fix to my problem. I will probably go with this solution until this or a similar feature finds its way to ghost.

To be honest I still think that it is useful to add an additional meta data field for feature image caption. Abusing other meta data fields doesn’t make sense and also is not applicable in my case.

The mentioned workaround IMO has two issues:

  • added Logic via JavaScript - Bad for accessibility, performance, etc
  • From a semantic point of view it just does not make Sense (it’s unexpected) to extend the article section with meta data. This leads to issues with RSS readers, and users of the content api (fetching my posts)

Also I assume it’s a relatively quick win. Adding such a field should not add too much complexity to the code base.

2 Likes

Totally understand your points. I just wanted to provide some kind of help that you could run with right now :slightly_smiling_face: