Image alignment in HtmlArea

Is there a suggested best practise on how to align images in an HtmlArea?

Aligning the image with the align function of the HTML editor (Format > Alignment) only aligns (floats) the <img /> tag and not the full <figure /> tag. This can certainly be handled by server side JS in the controller, but it might give a wrong impression of the final output on the page, as the caption (in the HtmlArea editor view) then not is placed directly below the image anymore.

Helge, we haven’t had time to tune the image-part of the editor too much yet, but in general we want to make things as responsive as possible, reducing errors made by editors and handing styling control over to the developer.

As such, we aim to “avoid” alignment of images, rather just place it somewhere in the text - the developers could then handle the images at will.

left/right aligned images are becoming more and more rare.

If you’ve seen any good solutions to this, or have examples of what you desire to do - please let us know.

And one more thing - we’ll improve how the editor handles dragging image etc so the figure element is dragged along with the image :slight_smile:

Just a side note from one other CMS out there - won’t mention any names - they “flag” their images and other html coming out of TinyMCE with set class names. They then have a list in their docs on which these classes are, like alignleft, alignright, alignjustify, etc. So each App would then add these as XP-specific styles in CSS.

Sounds good to me! :slight_smile: Thanks!