Centering multiple images in one row in WordPress is badly broken and has been for a while

[archon810]

I've been meaning to start a ticket like this for a while, and it's finally time to do it.

Using multiple images in a single paragraph/row in WordPress is a relatively common occurrence on our blog (androidpolice.com), but doing it in TinyMCE is a big pain.

Problem 1: Aligncenter image class gets applied to the image itself, not to the containing p tag, thus multiple centered images occupy full rows, one image each. To the writer, it's even more confusing because they can't press backspace from the beginning of the 2nd image to join it with the first - nothing happens. Aligncenter is a really evil class IMO, as it takes over the whole line.

Problem 2: Selecting multiple images and clicking Center, applies the class only to one of them at best, which is completely counter-intuitive. Unless an image is explicitly selected, this should instead apply the center to the whole containing paragraph. In fact, this should happen as long as the cursor is not on an image, no matter if the row is selected and highlighted or not. See Windows Live Writer for doing it the right way.

There are countless threads confused by this implementation, attempting to fix it or get around it, but the only thing people have figured out so far is creating a line above the images, putting some text into it, center aligning, then dropping the images into the pre-centered paragraph. This is basically an ugly hack in my opinion and requires coaching of every writer.

I believe TinyMCE can get this resolved properly and benefit everyone using Wordpress. What do you think, guys?

Just go play around with centering images, and you'll see how frustrating and unpredictable it is.

[archon810]

Some references to this on the web:

• ​http://stackoverflow.com/questions/24264465/changing-how-tinymce-aligns-images-center
• ​https://wordpress.org/support/topic/how-could-i-center-multiple-images-on-the-same-line
• ​https://wordpress.org/support/topic/tinymce-images-not-aligning
• ​http://www.ocmodshop.com/how-to-center-two-inline-images-in-wordpress/
• ​https://wordpress.org/support/topic/center-images-with-tinymce-via-p-style-text-align
• etc

[azaozz]

I believe this is a result from a tradeoff. The choices are either to align center multiple images or maintain center alignment when image caption is added. Since captions are more common, that got priority.

Don't think we can change this for all images without breaking the current behaviour for captions, or the current styling in many themes that expect img.aligncenter.

It seems possible to look at the selection when processing the click on the "Align center" button and add inline style when there are more than one images selected. If this is added, will need to determine what the best behaviour would be when caption is added to one of these images.

For now the easiest workaround is to click in the p in the element path (at the bottom of the editor, shown when the toolbar is expanded) and then click the "Align center" button.

[azaozz]

This is (perhaps) a good idea for a block: "Images Row" or "Row of Images". Would be an alternate way to display images.

This seems superseded by the block editor. Best to fix/handle it there imho. Please open an issue/feature request on GH: ​https://github.com/WordPress/gutenberg, or even better: make the block if possible and release it as a plugin.

Closing as maybelater as this seems like a good idea for another block for the block editor.