issue with inline images

[vinnciane]

Hello,

I'm reaching out to you because I'm having difficulty working with Hugo and Hextra. I am not an expert in building website and sometimes I find myself really struggling to understand where the issues I have come from : Hugo, or the theme or just something I'm not doing right with markdown.

I have a bunch of Docsify md files to migrate to Hugo. I have migrated my .md files and added the configuration needed to integrate it to my Hugo project. I thought it would be enough to get my basic site going. However, things that I expected to be working fine are not, like inline images.
I have an issue with inline images (typically icons) not displaying inline with the text but in its own paragraph. I thought this was a basic usage of markdown, any flavour. Why is it not behaving like one could expect ?

in my .md file:

Select an existing category and click the ![](../../media/images/er_icons/edit.png) **Edit** button to modify its code or name. Modifications are automatically and immediately taken into account.

Select an existing category and click the ![](../../media/images/er_icons/delete.png) **Delete** button to remove it.

It is displayed like this in the local build:

The builded page source code is okay though and I don't know why it displays like this.

<p>Select an existing category and click the <img src="../../media/images/er_icons/edit.png" alt="" loading="lazy" /> <strong>Edit</strong> button to modify its code or name. Modifications are automatically and immediately taken into account.</p>
<p>Select an existing category and click the <img src="../../media/images/er_icons/delete.png" alt="" loading="lazy" /> <strong>Delete</strong> button to remove it.</p>

(This is the repository: https://github.com/vinnciane/api-kp)

I've looked everywhere on the internet and found other people having the issue. Some answers pointed at being an issue with markdown usage. I've found this discussion describing the behaviour I expected.
gohugoio/hugo#6748 (comment)

I've looked into the hextra sample site, other sites from the showcase to find a similar situation but found none.
I wonder if you can tell me if the issue is one due to the template that does override the basic markdown behaviour or if it's an issue with goldmark options, or else ? Do you see an obvious reason for what I might be doing wrong ?

[imfing]

Hi @vinnciane
can you try override the default CSS style for the <img> tag with the custom CSS rules documented here: https://imfing.github.io/hextra/docs/advanced/customization/#custom-css

img {
    display: inline-block;
}

.content :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 0;
    margin-bottom: 0;
}

The most important part is to change the img to be inline-block so they will be displayed next to your texts.

[vinnciane]

Thank you so much for your help !