Linked photo alignment and word wrap

1st Official Post
    Affected App
    WoltLab Suite Core

    Here is an example of an attachment, with a right side alignment, but with the text correctly wrapping around it


    For whatever reason this fails when hotlinking. In fact, not only does it fail to wrap around, it is impossible to type text next to the image as it will forever be bumped down in the editor. See video



    External Content youtu.be
    Content embedded from external sources will not be displayed without your consent.
    Through the activation of external content, you agree that personal data may be transferred to third party platforms. We have provided more information on this in our privacy policy.

    This problem doesn't happen in all cases. If you simply add the image and just select the wrapping after it or if you add the image and clicking on edit and close the popup, the issue won't occur. Sure, it seems to be a small glitch, but nothing that really makes hotlinking images impossible ;)


    External Content youtu.be
    Content embedded from external sources will not be displayed without your consent.
    Through the activation of external content, you agree that personal data may be transferred to third party platforms. We have provided more information on this in our privacy policy.

    Quote from rafix73

    This problem doesn't happen in all cases. If you simply add the image and just select the wrapping after it or if you add the image and clicking on edit and close the popup, the issue won't occur. Sure, it seems to be a small glitch, but nothing that really makes hotlinking images impossible

    Never said it was "impossible" to hotlink, only impossible to add text next to it by normal means (select photo, select alignment, start typing).


    Not sure how you succeeded... Except that you click on yours twice. Something your average person will not do (and not intended to be required by design).


    Still a bug ;)

    Quote from Aslan

    Never said it was "impossible" to hotlink, only impossible to add text next to it.


    Not sure how you succeeded... Except that you click on yours twice. Something your average person will not do.


    Still a bug

    Yeah, I was typing fast, I meant that's not impossible to wrap text around the image. I tried many times the way I showed in the video and it always worked. I succeeded at the first try because instinctively I clicked on the image after I added it. A very small bug, I'm sure it'll be an easy fix ;)

    • Official Post

    That's not a bug but rather how HTML works. Floating will start with the line the image was placed, therefore if you keep adding content before it (just as you did in your video @Aslan) you'll push down the floating item.


    If you want to avoid this, you need to set the cursor after the image and then type, while the text now appears right next to the image, you're actually (in terms of the underlying HTML) writing below it. You can observe this by editing the image again and disable floating/alignment, in that case it will reveal it's real location in the document.


    The bottom line is: This is not fixable, because there is nothing broken, in fact it is perfectly working.

    Quote from Alexander Ebert

    That's not a bug but rather how HTML works. Floating will start with the line the image was placed, therefore if you keep adding content before it (just as you did in your video @Aslan) you'll push down the floating item.


    If you want to avoid this, you need to set the cursor after the image and then type, while the text now appears right next to the image, you're actually (in terms of the underlying HTML) writing below it. You can observe this by editing the image again and disable floating/alignment, in that case it will reveal it's real location in the document.


    The bottom line is: This is not fixable, because there is nothing broken, in fact it is perfectly working.

    BUG. Doesn't happen in IP.Board. Doesn't happen in xenforo.


    The expectation of the end user is this should work just as easy as it would in their favorite document editor. That is the whole point of a wysiwyg style editor.


    For the end users, this is a bug.

    Edited once, last by Aslan ().

    • Official Post
    Quote from Aslan

    BUG. Doesn't happen in IP.Board. Doesn't happen in xenforo.

    Neither of them even support floating of images, they only offer to align images. Tested on invisionpower.com and xenforo.com.


    Alignment != Floating, because alignment will just cause the image to align to one side but it will still work as an inline-block-element. This means that you can write one line next to them, but are unable to write multiple lines right next to them. In fact images behave similar to smileys which are also just images residing inside the normal text flow.


    Floating on the other hand is a completely different thing, it means that the element should stay relative to it's original top position, but will no longer take up the entire vertical space. Instead they allow flow content (such as text) to wrap around it, similar to illustration images seen in magazines or newspapers.


    One more thing on the float behavior: Floating starts at the top position of the line it is placed into, which means if you add content before that line you'll push down all lines below including the floating image. If you want to add text next to the image it has to be (logically) written afterwards because it will then not affect the relative top position of the image's origin.

    You're wrong. See screenshot.

    Quote from Alexander Ebert

    Neither of them even support floating of images, they only offer to align images. Tested on invisionpower.com and xenforo.com.


    Alignment != Floating, because alignment will just cause the image to align to one side but it will still work as an inline-block-element. This means that you can write one line next to them, but are unable to write multiple lines right next to them. In fact images behave similar to smileys which are also just images residing inside the normal text flow

    You can argue technology all you want. The end user doesn't care how you get it to work, only that it does work. It works in IP.Board and it works in XenForo. It doesn't work in WoltLab.


    For the end user, you have bug in the commonality of how things work.


    • Official Post


    So this is my fancy avatar -->


    Awesome, right?


    My statement remains true, floating does work but depending on the image location, the text must come at a different position to align next to it. That's how HTML/CSS works and is nothing that anyone of us invented. I can understand that this is sometimes a bit confusing and trust me, floats are as much annoying for developers as it is for users, simply because they're rather hard to understand. Oh and take these two floating images just to make things extra pretty ;)


    By the way, one handy trick to get this done is by adding text first and then inserting the image and letting it float. This way the WYSIWYG will position the image so that it turns out exactly as you wish for, makes your life easier ;)

    I never said I did not understand the technology... I just said it is irreverent how it works. For the end user, the ends justify the means. Does it work? That is the only question that matters from the end user. If no, it is flawed in that it works for everything and everywhere else.


    You can do the same thing in IP.Board. See screenshot

    Edited 3 times, last by Aslan ().

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!

Register Yourself Login