When creating help center articles, you may sometimes want to add inline images. However, when added, the images appear to break the text lines instead of rendering as 'inline-images.'
However, when the draft is previewed as a published article, the images break the text lines instead of showing as 'inline images,' as seen in the screenshot below.
This article shares the process of resolving this issue.
display: inline-block CSS style needs to be added to the image tags to display them as 'inline images.' Since this tag does not add a line-break, it is commonly used to list items horizontally (instead of vertically).
- Log into your Kayako instance.
- Open an article in the edit mode.
- Paste the images in the article as needed.
- Click on the Code View button.
- Edit the image tags to include the
display: inline-blockCSS style, as seen in the screenshot below.
- Exit the source code view and save your article.
The images appear as 'inline images,' as seen in an example screenshot below.