Has anyone figured out how to wrap text around an image element?

[philnauta]

Like this:

[lantzgould]

Hi @philnauta,

I don’t know of any built in way of doing this… However if your project doesn’t require users to enter the text and images, you could do this manually and have the option of grouping the elements together as so that they stay together. Insert an image and two text boxes, then highlight the three components and select ‘Group these elements into a group’, then check the box for ‘Make this element fixed-width’ on your groups settings. Hope this helps?

[philnauta]

Thanks for the idea @lantzgould, but the issue is that this is not responsive, so as soon as the screen gets narrow, that top text group ends up being much taller in height than the image, leaving a big white space below the image… i.e. it doesn’t “wrap” around the image.

[jason.hilton]

Maybe not ideal, but would using an HTML element solve this? You could then apply align attributes to the image.

[lantzgould]

@philnauta

I tested the HTML idea…

Add a ‘Data Type’ named pictures(or whatever you want) > Add an image field to the Data Type.

Insert a test image into your database.

On your page, add an HTML element using this simple code below:

This should populate the image you have stored. Worked for me, and is responsive on page resize. Let me know if this works…

*Dynamic data should be 'Do a Search For Pictures:firstitem" (or whatever you named your data type)
*You can adjust the height and width of the photo, make the font bold, italic, etc. by adding it to the html code.

If not… I tried… lol

[philnauta]

Thanks @jason.hilton and @lantzgould, I think this may be the answer in the end. Once I get around to implementing it fully, I’ll post a full demo for others. Cheers, Phil