Uploaded image for project: 'eZ Publish / Platform'
  1. eZ Publish / Platform
  2. EZP-22512

Embed-inline breaks formatting if aligned at center or not aligned at all

    XMLWordPrintable

Details

    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

      1. 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.

      2. Click and the line, in the space between "elit. Etiam" and insert an image at that position
      3. Chose in the images dialogue (see "embed-inline-001.png"):
        • View: embed-inline
        • Size: Tiny 30x30

      Case 1: Image not aligned

      1. Along with the steps in Preparation Steps, in the images dialogue choose: Align: None
      2. Click OK in the dialogue and publish the article

      Case 2: Image aligned at center

      1. Along with the steps in Preparation Steps, in the images dialogue choose Align: Center
      2. Click OK in the dialogue and publish the article

      Case 3: Image aligned not aligned and with inline option checked

      1. Along with the steps in Preparation Steps, check the inline checkbox choose Inline: Checked
      2. With inline checked, you won't have in the images dialogue the option to align at center. So choose Align: None
      3. Click OK in the dialogue and publish the article

      Final

      1. 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>
      

      Attachments

        Activity

          People

            Unassigned Unassigned
            eduardo.fernandes-obsolete@ez.no Eduardo Fernandes (Inactive)
            Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved: