Responsive width of images

[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.

[Danil]

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

[Piotr Jasiun]

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

[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.

[Artur Delura]

Little changes in ​branch:t/12615.

[Piotr Jasiun]

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.

[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.

[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.

[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.

[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.

[Piotr Jasiun]

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

[Piotrek Koszuliński]

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.

[Piotrek Koszuliński]

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

Reported #12746.