Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#12615 closed New Feature (invalid)

Responsive width of images

Reported by: Piotr Jasiun Owned by: Artur Delura
Priority: Normal Milestone:
Component: General Version:
Keywords: Cc:

Description (last modified by Piotr Jasiun)

Images should have maximum width 100%.

This ticket is more about investigation than coding: is it work with different editors, widgets, image2 and is it make sense at all.

The idea of such feature appeared when we where looking for solution how to handle big images people upload. Such images may break the content and it is difficult to handle them.

The final solution will be more complex, most probably.

Change History (15)

comment:1 Changed 4 years ago by Piotr Jasiun

Status: newconfirmed

comment:2 Changed 4 years ago by Danil

They will if you set it via content css. This does not seem to be a CKEditor feature, right?

comment:3 Changed 4 years ago by Piotr Jasiun

Yes, this is not a big feature. We just consider putting this in the default content css.

comment:4 Changed 4 years ago by Piotr Jasiun

Description: modified (diff)

comment:5 Changed 4 years ago by Artur Delura

Owner: set to Artur Delura
Status: confirmedassigned

comment:6 Changed 4 years ago by Artur Delura

In inline mode doesn't not affect because content.css is not applied. I checked it also with image2 plugin, and everything works fine and nice. If no default width is set it takes only available space but not whole image size.

If we resize image using image2 plugin and image has only one dimension set. Then second one is added as well. So if there is only width, then height is added as well.

Last edited 4 years ago by Artur Delura (previous) (diff)

comment:7 Changed 4 years ago by Artur Delura

Status: assignedreview

Little changes in branch:t/12615.

comment:8 Changed 4 years ago by Piotr Jasiun

Status: reviewreview_failed

Scenario 1:

  • open image2 sample,
  • resize the image to the maximum width (using black square in the corner),
  • resize more then maxinum width.

Result: only height changes, what breaks proportions.

  • resize image back to the small size,

Result: image still have broken proportions.

Scenario 2:

  • open image2 sample,
  • maximize editor,
  • resize the image to the maximum width,
  • turn off maximize mode,

Result: image changes only its width.

Scenario 3:

  • open sample with image plugin,
  • set the width of the image bigger than editors width and proportional height.

Result: only width changes.

Images should not change its proportion because of this feature.

Last edited 4 years ago by Piotr Jasiun (previous) (diff)

comment:9 Changed 4 years ago by Piotrek Koszuliński

Isn't it true that if image2 wasn't setting the height attribute everything will be perfectly fine? It leads me to #12126, because if we'd make the width/height presetting configurable separately plus if we'd fix the image2 resize feature so it does change only the width if only width is set, then everything would be fine.

comment:10 Changed 4 years ago by Piotrek Koszuliński

Isn't it true that if image2 wasn't setting the height attribute everything will be perfectly fine? It leads me to #12126, because if we'd make the width/height presetting configurable separately plus if we'd fix the image2 resize feature so it does change only the width if only width is set, then everything would be fine.

All this would actually also fix issue (there's a ticket somewhere) that image resizing should be constrained by the editor size.

Of course, it would be still possible to set width and height in the dialog and have broken proportions, but the default behaviour of insert+resize would work great.

comment:11 Changed 4 years ago by Piotrek Koszuliński

Quote from PJ's removed comment:

Not exactly. As I wrote the idea of such feature appeared when we where looking for solution how to handle big images people upload. If we resize only the width of the big uploaded image the image will look broken.

It's not entirely true. If the img tag has no height attribute, then setting max-width:100% will keep its proportions. We could also set height:auto but that disabled the height attribute effect at all.

I also asked Fred and Olek about their opinions and according to Fred if someone wants to have responsive images, then there should be no width and height inputs in the dialog. This can be easily done using disallowedContent: 'img[width,height]' and that disables also the resizer.

However, in this case user is not able to control the size of images. There are cases when the user should be able to limit the size - e.g. when wanting to float it or simply because the image is very high. The solution here is using widget styles, but it's not that obvious for other developers. The funny thing is that I actually already thought about that, because I was planning to write an guide about that and I simply forgot :D.

comment:12 in reply to:  11 Changed 4 years ago by Piotr Jasiun

Replying to Reinmar:

Quote from PJ's removed comment:

Not exactly. As I wrote the idea of such feature appeared when we where looking for solution how to handle big images people upload. If we resize only the width of the big uploaded image the image will look broken.

It's not entirely true. If the img tag has no height attribute, then setting max-width:100% will keep its proportions. We could also set height:auto but that disabled the height attribute effect at all.

That is true, but both image and image2 set automatically width and height of the pasted image. This should be changed, for both.

comment:13 Changed 4 years ago by Piotr Jasiun

I mean, using #12126 we can disable it, but then image_emptyDimensionsOnLoad and image2_emptyDimensionsOnLoad should be true by default.

comment:14 Changed 4 years ago by Piotrek Koszuliński

Milestone: CKEditor 4.5.0
Resolution: invalid
Status: review_failedclosed

After more discussions with Fred and Olek we decided that we can only tell developers how to configure the image2 feature to use it for responsive images. I reported a ticket for such article: https://github.com/ckeditor/ckeditor-docs/issues/51

We will not be able to add { max-width: 100%; height: auto } style to the contents.css by default for the reasons explained in comment:8, so I'm closing this ticket.

I will later create a ticket for a config option to disable the image resizer.

comment:15 Changed 4 years ago by Piotrek Koszuliński

I will later create a ticket for a config option to disable the image resizer.

Reported #12746.

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