Table with images

Themes
1

Hi everyone,

I’d like to add a table with hyperlinked images to a post. I figured out the HTML, but it requires that I hardcode all the URLs, both the <a> and the image src. I tried getting various AI chatbots to insert my URLs for me, but they hallucinated too much.

I would love to write or pay for a theme that allows me to drop images into cells, or, better yet, product cards, but is that even possible on Ghost?

One theme developer wrote me the following:

The tables you’re asking about aren’t supported by Ghost, and the theme only provides basic support for tables generated with markdown card. You can’t use images or product cards there; they only handle text

Is that true? It’s not even possible to develop a product grid card?

Thanks!

Ghost table
Ghost table1596×1134 92 KB

2

‘Grid’ is a better option for your needs. You’ll need to inject a bit of code to display the product cards in a grid structure.

3

Thank you so much! Do you mean:

  1. creating a grid card within a theme or finding a theme that supports grids
  2. using markup to create a grid
  3. using an HTML card to create a grid rather than a table (I created the above with a table)

Thanks again!

4

Themes don’t have any ability to change what cards exist in the editor. (Yes, this is different from WP.)

It looks to me like what you’re trying to accomplish is basically product cards (minus titles & descriptions), in a gridded layout. You might have a look at this page, that discusses how to get something similar to happen in Ghost:

5

Thank you so much for that clarification about themes, and thank you for the blog post. I got the class to work when I hard coded all the inner elements into an HTML card, but it didn’t work as two separate code snippets that come before and after cards. I tried both product cards and image cards.

Where did I go wrong? This is what I did:

  • HTML card: <div class=“three-box”>
  • Product card
  • Product card
  • Product card
  • HTML card: </div>

I added the style classes into my theme’s code injection. I tried the code injection for the post alone also. Neither made a difference when it came to getting an email to look right. I just got 3 stacked product cards or image cards in a column and not in a row.

Thanks again!

6

Your idea is right, but it needs some CSS styling. For the first HMTL card, replace with the following code, it will generate a wide grid, if you prefer narrow, delete kg-card kg-width-wide.
I haven’t add media queries for the code, so the product card grid won’t work good on mobile or ipad, you can try use AI to adjust.

<style>
  .product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 48px
  }
</style>
<div class="product-grid kg-card kg-width-wide">
7

Email is hard. The parser does a bunch of conversion to tables, no JavaScript runs, and no code injection. You can try Raki’s suggestion, but I wouldn’t bet on that working cross-platform.

8

Thank you so much! I played with this idea of adding HTML between product cards, and a table basically worked (!). I really appreciate all your insights! This has been illuminating, thank you!

9

That is so helpful! I ended up using the approach that you shared in the article: I created code snippets that wrap Ghost cards into a table. Thank you for the tip about email converting things to tables – maybe that’s why a table worked and a grid did not. Now I need to refine the styling, and I am the most hopeful I’ve ever been about making this work. THANK YOU!!

1 Like