Izual
April 9, 2025, 9:05am
1
Hi,
I haven’t found any easy solution for this because I think Ghost forces a line break after images. So for example, a simple HTML code like this:
<p style="font-size:0.8em"><img src="https://www.temalesjeux.fr/content/images/2025/04/ic-ne-small-bsky.jpg" width="40" height="40"></img>Suivre sur Bluesky | <img src="https://www.temalesjeux.fr/content/images/2025/04/ic-ne-small-discord.jpg" width="40" height="40"></img>Commenter sur Discord | <img src="https://www.temalesjeux.fr/content/images/2025/04/ic-ne-small-insta.jpg" width="40" height="40"></img>Téma sur Instagram</p>
Gives this:
Which isn’t ideal, as I would love to have everything displayed on the same line.
Has anyone found a workaround for this?
images in paragraphs are not actually valid HTML.
You’re going to want something like:
<div style="display: flex; flex-direction: row; flex-wrap: wrap;"> put your images and links here </div>
Put that in an HTML card. (You’ll probably want to actually link your images and text, too.)
1 Like
Izual
April 9, 2025, 11:25am
3
Cathy, thanks so much for your help.
I’m trying your code out, and including the pictures:
<div style="display: flex; flex-direction: row; flex-wrap: wrap;"><p style="font-size:0.8em"><img src="https://www.temalesjeux.fr/content/images/2025/04/ic-ne-small-bsky.jpg" width="40" height="40"></img>Suivre sur Bluesky | <img src="https://www.temalesjeux.fr/content/images/2025/04/ic-ne-small-discord.jpg" width="40" height="40"></img>Commenter sur Discord | <img src="https://www.temalesjeux.fr/content/images/2025/04/ic-ne-small-insta.jpg" width="40" height="40"></img>Téma sur Instagram</p></div>
However here’s the result. Am I doing something wrong?
Yes. Take the p out entirely.
p.s. if you want it to be functional, you need to wrap each image in <a ...> tags. This is the sort of thing that you could ask a chatbot for help with if needed :)
Izual
April 9, 2025, 2:44pm
6
Ok, thanks! I’ll try to figure it out.
