Ticket #8938 (closed New Feature: fixed)

Opened 2 years ago

Last modified 6 months ago

Introduce center alignment option for images

Reported by: fredck Owned by:
Priority: Normal Milestone:
Component: General Version: 3.0
Keywords: Cc:

Description

There should be an easy way to center images through the image dialog or by simply clicking the "Align Center" button in the toolbar.

While HTML doesn't specify a way to have images aligned to center, our users may be disappointed for not being able to do so.

The proposed solution is enabling "Align Center" if a selected image is the one an only element inside a block (spaces trimmed). When used, the entire block gets center aligned, not the image directly.

Change History

comment:1 Changed 2 years ago by j.swiderski

  • Status changed from new to confirmed
  • Version set to 3.0

The result of #7430 discussion.

comment:2 Changed 2 years ago by rsiqueira

If the image is not the only element inside a block, then the center option could create a block style="text-align: center" around the image, like this:

<div style="text-align: center">

<img src="...">

</div>

This centered image alignment solution could be in the Alignment option (Image Properties) and also in the "JustifyCenter" (from the toolbar). Is this a possible solution?

comment:3 Changed 20 months ago by j.swiderski

#10054 was marked as duplicate

comment:4 Changed 20 months ago by j.swiderski

NOTE: there is also an issue about alignment being lost in BR mode - #8983

comment:5 Changed 20 months ago by Ciantic

Images are exception (they shouldn't) I tried to set the config.justifyClasses but they didn't work for images.

These classes should work on all if one defines them, tables, images etc.

comment:6 Changed 18 months ago by fbingha

We would also like to see the center command active when an image is selected in the editor. Our users miss this feature from 3.6.2.

Using css upon the image to left/right align was a controversial approach. You are not aligning images to the left or the right now. They are being float:left and float:right now which is totally different behavior than what happens if you click next to the image and then press align left/right. If you want to "float" objects then add a float button. Align and float are not the same thing.

I would like an config option to set the behavior back to what it was in 3.6.2 with a container and text-align being used.

Last edited 18 months ago by fbingha (previous) (diff)

comment:7 Changed 18 months ago by fbingha

This distinction makes no sense;

{{{ left alignment will apply on image element as style="float: left",

while when it get applied on table element, align="left" is used instead. }}}

You can float a table just as you can an image but you now treat these two objects differently when using the ALIGN button, note it isn't called the FLOAT button.

comment:8 Changed 17 months ago by jpj109

Our users have been very affected by this as well, its one of the most complaints/questions we get now. While I understand the technical reasons why centering images is an issue, our end users do not, nor should they. Frankly, if you can center an image by selecting either side of it and clicking center button, why not wire up that functionality when the image is selected?

Desirable option 1): restore image centering in dialog and toolbar, but implemented with same best practices used when selecting either side of image, like with wrapper div, etc.

Desirable option 2): provide plugin or workaround, to do the above, that can be added manually to a configuration

comment:9 Changed 13 months ago by Reinmar

  • Status changed from confirmed to closed
  • Resolution set to fixed

Introduced by #10659 (in CKEditor 4.3). Centering image is possible in our new image2 plugin which uses Widgets system (#9764).

comment:10 Changed 6 months ago by TomNM

Does this mean you're done with the current image dialog? In the current plugin, if someone wants a centered image, just set the image to "display:block; margin:0 auto;". Done.

The whole discussion is about a wysiwyg experience rather than proper HTML5. I'd wager that most people using this editor are NOT html coders. They want to achieve a result.

If the enhanced plugin can do this, why not allow the current one to do it?

comment:11 Changed 6 months ago by Reinmar

It is not correct from editing POV to set display:block to an image and keeping it in the paragraph (which cannot contain block elements). It is correct in normal HTML of course, but during editing such abnormalities lead to erroneous situations.

The new image plugin solves these problems, but it's a totaly new solution which we don't plan porting to old image plugin, because it would require too much work.

comment:12 Changed 6 months ago by Reinmar

BTW. I said that we're not planning to implement this feature in the old image plugin. But it doesn't mean that such feature cannot be implemented. Image dialog can be extended by another plugin or as a last resort, its code can be modified (nevertheless, CKEditor is open source). We'll never implement every feature which one can need, that's why we design CKEditor's API in a way which makes it possible to customise its features.

comment:13 Changed 6 months ago by TomNM

Understood. Thanks.

Note: See TracTickets for help on using tickets.
© 2003 – 2012 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy