Recommendations for image gallery options so I can show a caption under every image?

[Permission]

I’m trying to create an image gallery as a portfolio of work i’ve done, so i’m hoping to be able to add a caption to every image, but that’s not possible in Ghost. I’ve seen other posts about this limitation, but i’ve not found anything telling of a workaround or some other host/provider I could use and then embed a gallery instead.

Any ideas?

[RyanF]

Here’s one approach.

1. Create a HTML card and enter:

<div class="kg-width-wide" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;">

This creates a grid with CSS.
2. Then, add images in the editor as you normally would.
3. After the images, add another HTML card with:

</div>

This closes up the grid you created earlier.

Two things:

• This will work best with images that have similar aspect ratios.
• This will also work with other cards, not just images, so you could potentially make a grid of Product cards, for example

[Permission]

This works perfectly! Thanks so much Ryan.

[JasonBuzzy]

I also found this very useful, thank you! At the moment, it meets my needs a bit better than the gallery cards with their 9 image limit.

I have some technical questions that I’d appreciate anyone’s help with:

1. The images align unpredictably (always the first item, sometimes others) unless I have a caption beneath them. Any thoughts on why? I know your grid solution is best suited to images with consistent aspect ratios, but I’d like to understand why mixed aspect ratios only work in certain circumstances

   Without captions:

With captions:

2. Is there a CSS code injection solution for adding borders to these images, instead of using the editor in each image card? This would be faster, and also, I notice that saving the border makes it a permanent part of the thumbnail, which can be overwritten but not undone. I’d like to avoid editing and updating each image.

   Or, more broadly, how do I go about discovering selectors for elements so I can modify them with CSS via code injection? I’m (clearly) new to all this, and I don’t know how to formulate the right search terms, etc.

[Cathy_Sarisky]

Code Injection 101

There’s a bit of a tutorial.

The alignment weirdness is the result of non-first images having some extra padding or margin. It’ll probably be pretty clear when you get it open in dev tools.

[Stromfeldt]

@JasonBuzzy

Is there a CSS code injection solution for adding borders to these images, instead of using the editor in each image card?

If you’d like to add a border to every image you use, add this to your code injection:

<style>
figure img {
    border: 2px solid black;
}
</style>

If, on the other hand, you’d like to add borders selectively (either to individual images or to all images in a specific gallery), start off by adding this to your code injection:

<style>
.image-border figure img {
    border: 2px solid black;
}
</style>

Having done that, wrap any images or galleries you want to have borders with HTML cards. Place the following code in an HTML card preceding the image/gallery:

<div class="image-border">

And place the following code in an HTML card proceeding the image/gallery:

</div>

If you want to make the latter process a bit easier, you can create snippets out of the two HTML cards.

[JasonBuzzy]

Thank you so much for taking the time to respond! This is just what I needed.