Details
-
Bug
-
Resolution: Won't Fix
-
High
-
5.1, 5.2
Description
If you add an inline image in a line and do not set any alignment or align it at center, no css style will be set to the image what will break the line in two.
Steps to Reproduce
Preparation Steps
- Create a new article and past the line below in the body
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rhoncus mollis orci et hendrerit. Phasellus.
- Click and the line, in the space between "elit. Etiam" and insert an image at that position
- Chose in the images dialogue (see "embed-inline-001.png"):
- View: embed-inline
- Size: Tiny 30x30
Case 1: Image not aligned
- Along with the steps in Preparation Steps, in the images dialogue choose: Align: None
- Click OK in the dialogue and publish the article
Case 2: Image aligned at center
- Along with the steps in Preparation Steps, in the images dialogue choose Align: Center
- Click OK in the dialogue and publish the article
Case 3: Image aligned not aligned and with inline option checked
- Along with the steps in Preparation Steps, check the inline checkbox choose Inline: Checked
- With inline checked, you won't have in the images dialogue the option to align at center. So choose Align: None
- Click OK in the dialogue and publish the article
Final
- For each case, in the end, onfirm in the frontend that the line is broken, split in two by the image (see "embed-inline-003.png").
If you align the image at center or do not align at all, the image DIV container won't have any class (as you can see in the code below). Because of that I assume the image is rendered as block, not inline.
It's really important that centered and not aligned inline images are treated as inline elements. That's the bug.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <div class=""> <img style="width: 30px; height: 23px;" src="/var/ezdemo_site/storage/images/media/images/mount-ventoux/546-1-eng-GB/mount-Ventoux_tiny.jpg" alt=""> </div> <p>Etiam rhoncus mollis orci et hendrerit. Phasellus.</p>