How to add gallery alt text to images?

@Kevin another bump from a newcomer to Ghost. I work across multiple different commercial news blogs with a focus on SEO-rich images. I want to move away from Wordpress and all sorts of issues the WP framework brings, but Ghost keeps making very basic things difficult.

We should be able to control our embedded images better — the image title can’t be edited right now, and since we don’t have a media library, you won’t realize if the image has a rubbish title until way too late. And of course, the lack of alt text or individual captions in galleries is incredibly frustrating – this is basic functionality in Wordpress and most WYSIWYG text editors.

Can we get an ETA on supporting gallery alt text and resolving this issue?

Hello! Just to say I’m also encountering this issue, where the workaround where dragging an image out of a gallery, adding alt text, then place it back doesn’t keep the alt text at all. As everyone else has mentioned, this is a key feature for SEO, so hopefully support is in the works.

I can confirm that, alt text is present when you write it on a single image and drag inside the gallery. “BUT”, if you drag that image outside of gallery, you lose alt text and caption text. Maybe that’s the case for you @mattreyn

That didn’t work for me when I dragged images out, added, then back in again - unless you mean you have to create a blank gallery, create fresh individual images with alt text first, then drag them into the gallery one by one for them to stick?

I solved this with a custom approach, because Ghost’s native Gallery card only supports one caption for the whole gallery.

I kept my custom lightbox and switched to an HTML card gallery where each image has its own metadata.

What works

  1. Add an HTML card in the post/page editor (/html).

  2. Build the gallery with Ghost-compatible classes (kg-gallery-card, kg-gallery-row, kg-gallery-image).

  3. Add per-image text on each using:

    • alt (good for accessibility/SEO)

    • data-caption (used by the lightbox as per-image caption)

  4. Keep optional outer as the overall gallery caption.

Example (5 images)

<figure class="kg-card kg-gallery-card kg-width-wide">
<div class="kg-gallery-container">
<div class="kg-gallery-row">
<div class="kg-gallery-image" style="flex:1 1 0%">
<img src="IMAGE_1_URL" alt="Caption for image 1" data-caption="Caption for image 1" />
</div>
<div class="kg-gallery-image" style="flex:1 1 0%">
<img src="IMAGE_2_URL" alt="Caption for image 2" data-caption="Caption for image 2" />
</div>
<div class="kg-gallery-image" style="flex:1 1 0%">
<img src="IMAGE_3_URL" alt="Caption for image 3" data-caption="Caption for image 3" />
</div>
</div>

<div class="kg-gallery-row">
<div class="kg-gallery-image" style="flex:1 1 0%">
<img src="IMAGE_4_URL" alt="Caption for image 4" data-caption="Caption for image 4" />
</div>
<div class="kg-gallery-image" style="flex:1 1 0%">
<img src="IMAGE_5_URL" alt="Caption for image 5" data-caption="Caption for image 5" />
</div>
</div>
</div>

<figcaption>Optional overall gallery caption</figcaption>
</figure>

Result

  • Per-image captions show correctly in the lightbox.

  • Each image has real alt text.

  • Layout stays gallery-style on desktop (and stacks on mobile by theme responsive CSS).

    —————
    Only as a sample — I haven’t deployed it to the live theme; it’s only running in my local environment. The “solution” does work, though it requires a bit of a workaround with the images: you need to add the correct links for each one and edit the snippet each time. But it works.

    The caption is readable in the lightbox for each image.

    I’m posting this only as input in case someone might find it useful.

I think this “hack” is not reliable enough as a valid workaround. I hope we’ll have a proper caption and alt text solution for images in gallery soon. I would like to work on that as a PR, but since it needs some UI design decisions, I think Ghost team really needs to have that a look.

Also want to bump this thread - I have created this as a feature request in Ideas.