Text flow around image possible?

SeDi

I'd like to have a combination of image and text where the image is several lines high and the text flows around the image like this:

IMGIMGIMGIMG     This text is floating around 
IMGIMGIMGIMG     its image, perhaps it's e-
IMGIMGIMGIMG     ven wrappable. Then, when
IMGIMGIMGIMG     the bottom of the image has
                 finally been reached, the text
shall continue beneath it in full available width
and tell the whole story. Ideally, resizing the 
element would dynamically re-flow the text.

I have not found anything about such a (dtp-like) feature in the docs or in the Text example.

is that possible out "of the box"?
if not: what would be a good way to achieve this?

J.Hilk

@SeDi not that I ever did it myself, but I think you can archive that with A FLOW item in qml:
https://doc.qt.io/qt-5/qml-qtquick-flow.html

SeDi

Thank you, @J-Hilk! I've tried to do that, but I only achieve this:

IMGIMGIMGIMG    This text is not floating around its image, 
IMGIMGIMGIMG    
IMGIMGIMGIMG    
IMGIMGIMGIMG    
    
unfortunately it's continuing beneath the image. It should, though,
continue on the image's side, until the bottom of the image has finally 
been reached. Also, of course, there's no word wrap implemented. At 
least, resizing the  element dynamically re-flows the text. But it's not 
usable for me :-(.

Heres my (test) code for TextFlow.qml:

Rectangle {
    property string text: "<IMG>qrc:/icon_calendar.png This text is not floating around its image, unfortunately it's continuing beneath the image. It should, though, continue on the image's side, until the bottom of the image has finally been reached. Also, of course, there's no word wrap implemented. At least, resizing the  element dynamically re-flows the text. But it's not usable for me :-(."

    property variant stringList: text.split(' ')

    Flow {
        anchors.fill: parent
        Repeater{
            id: flowRepeater
            model: stringList.length



            Loader {
                id: flowLoader
                property string current: stringList[index]
                sourceComponent: stringList[index].substring(0,5) === "<IMG>" ? imageComponent : textComponent

                Component {
                    id:  textComponent
                    Text {
                        height: contentHeight
                        width: contentWidth
                        text: index === 0 ? stringList[index] : " "+stringList[index]
                    }
                }
                Component {
                    id:  imageComponent
                    Image {
                        id: image
                        height: 240
                        width: 140
                        source: stringList[index].substring(5,500)
                    }
                }
            }
        }
    }
}

Is it possible to connect / concatenate two or more Flow items? I can't seem to find that possibility in the docs. Also, I am missing a possibility to know if everything fits into the Flow's boundaries - or better a List of all the Items that don't fit in, so that we could use that as a repeater model for a second flow. Without such an API I have no idea. This use case, though, doesn't seem that far off to me...

J.Hilk

@SeDi You're right, this is not what I expected.

Other approach suggestion:

Since Text component in QML accepts rich/html text, have you tried it that way ?

IIRC there are "easy" ways to make text flow around an image in html

it html support is limited, so I might not be possible, just a suggestion

Markkyboy

This has already been posted/solved elsewhere in the forum; https://forum.qt.io/topic/101610/how-to-wrap-text-around-box-square/2

GrecKo

You can do that by modifying the line object sent in the lineLaidOut signal. I may have written an example somewhere.

EDIT: thanks @Markkyboy for finding it :P

Markkyboy

@GrecKo said in Text flow around image possible?:

You can do that by modifying the line object sent in the lineLaidOut signal. I may have written an example somewhere.

Lol, yes!, it was your answer I've just posted! :D

SeDi

@GrecKo Wow. Great idea. Thanks - that's brilliant!

SeDi

@Markkyboy Thanks so much for digging that out - works perfectly.

SeDi

@J-Hilk For now, I'll go for Grecko's straightforward alternative, because it does the job I am needing it for. But the idea of using html (if subset allows) is enticing! I will keep it in mind for more complicated situations. Thank you!