Improvement: Display images inline by default in project listings

[veracioux]

The current behavior is that images are displayed on separate lines, using both the markdown syntax and html.

Markdown:

![](https://img.shields.io/github/workflow/status/flameshot-org/flameshot/Packaging(Linux)?label=gnu%2Flinux)
![](https://img.shields.io/github/workflow/status/flameshot-org/flameshot/Packaging(Linux)?label=gnu%2Flinux)

HTML:

<img src="https://img.shields.io/github/workflow/status/flameshot-org/flameshot/Packaging(Linux)?label=gnu%2Flinux"/>
<img src="https://img.shields.io/github/workflow/status/flameshot-org/flameshot/Packaging(Linux)?label=gnu%2Flinux"/>

Here's what it looks like:

What I want it to look like:

I can get the images to display inline if I add style="display:inline;" to the image elements, but they get displayed without any padding. The current solution I am using to display the images the way I want to is to put them inside a single-row <table> element, each image surrounded by a <td> element.

It would be much better if the images were displayed inline by default, like they are in GitHub READMEs. This would make it easier to directly copy the badges from a GitHub README into a project .mdx file.

[abhijeet007rocks8]

May I try to resolve this issue?

[hola-soy-milk]

Thanks @abhijeet007rocks8, please feel free to go for it!

I'm not sure how to resolve this, as it shouldn't interfere with how other images are rendered, but curious to see what solution comes up!

[veracioux]

I'm not sure how to resolve this, as it shouldn't interfere with how other images are rendered, but curious to see what solution comes up!

Just an idea, but maybe the best way to make sure of this is to manually update the .mdx file for each project that uses images. The following script does not return too many projects (29):

#!/usr/bin/env sh

{
    rg '!\[.*' -l projects/
    rg '<img' -l projects/
} | sort | uniq

Even so, most of them:

• do not place right after another, or
• if they do it's usually badges, which I can bet ya, they probably wanted to appear inline but didn't want to bother to make it so, or
• use only a single image in their project listing