Solved

Floating images in articles?

  • 4 September 2020
  • 9 replies
  • 169 views

I’m looking for a way to float an image right or left in an article so that the texts  wraps around the image. Can that be done with HTML or is there an easier way to do it?

icon

Best answer by bjoern_schulze 22 January 2021, 10:56

View original

9 replies

Anyone know how to word wrap around image you upload in an article? I’ve tried a couple codes but after I enter them in HTML mode, they just disappear. Anyone know a way around this?

I've been thinking about the same thing for quite some time now, and the only workaround I've found so far is to use Tables, which is not really optimal. So more tips are welcome! :)

Userlevel 2
Badge +3

Sorry for being a bit late to the party, @tmo_mike_c, it must have slipped my attention…

At the moment there is no elegant solution to do this I am afraid. As far as I know this feature is not available currently mostly as it is challenging to properly reflect this on all the different viewports we support. Our platform is fully responsive, which means that the view dynamically changes depending on the device / size of the browser window. This results in challenges offering floating images.

Having said that, we are well aware of the demand of such a feature, as far as I can see there are two improvements we are currently investigating (and hopefully be able to offer soon):

  • One is a native feature within the editor to float an element to the left / right. This will be the most straightforward solution to your challenge.
  • Another will be an HTML-mode, where you can enter certain styling etc. in a dedicated HTML view. Currently, we strip HTML from the editor once content is being published (mostly for security).

I am not sure if I can already communicate an ETA for one or both of these features, I will check with my colleagues and get back to you once I know more.

 

There is one simple trick which I sometimes use to achieve floating, however it is not a good workaround as it will not give the best experience e.g. on mobile. If you simply upload the image with some white space on the left / right, you will force the image to be located on the side you want it to be. Again, not an elegant solution, as you cannot add text in that space, but it will locate the image on the side.

 

 

I've been thinking about the same thing for quite some time now, and the only workaround I've found so far is to use Tables, which is not really optimal. So more tips are welcome! :)

I’ve tried tables as well, and you’re right, not the most elegant as I haven’t found a way to shift it to the center of the article. I’m usually left with a large blank space on the right of the table. Not sure if you’ve had the same thing happen or not @ErikT .

I've been thinking about the same thing for quite some time now, and the only workaround I've found so far is to use Tables, which is not really optimal. So more tips are welcome! :)

I’ve tried tables as well, and you’re right, not the most elegant as I haven’t found a way to shift it to the center of the article. I’m usually left with a large blank space on the right of the table. Not sure if you’ve had the same thing happen or not @ErikT .

Yepp, I recognize the problem, which is why I no longer use this method. It would be really great to be able to write your own HTML, like @Julian  mentions above. 

Userlevel 2
Badge +3

Just FYI: this morning I again heard that this is a planned improvement for the editor. If everything goes alright (squeezing thumbs there is no delay) you will be able to see it in a couple of weeks. I will make sure to update you here once it is possible.

Userlevel 5
Badge +4

@Julian do you know if this has been added yet? 

Badge

@Julian do you know if this has been added yet? 

Yes, it was:

In Control, you can now resize images and change the floating / alignment after uploading.

Userlevel 2
Badge +3

Yes, happy to confirm this has been added a few weeks ago, thanks for raising it here, we can mark this as solved now. :)

Reply