From f0d1055237506afe20a0be559f207452955041b3 Mon Sep 17 00:00:00 2001 From: godai78 Date: Tue, 19 Sep 2023 08:44:13 +0200 Subject: [PATCH 1/2] Docs: adding width and height info. [short flow] --- .../ckeditor5-image/docs/features/images-overview.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/ckeditor5-image/docs/features/images-overview.md b/packages/ckeditor5-image/docs/features/images-overview.md index 4ba726250cb..8679f509c4f 100644 --- a/packages/ckeditor5-image/docs/features/images-overview.md +++ b/packages/ckeditor5-image/docs/features/images-overview.md @@ -22,7 +22,6 @@ To see all the image features in action, check out the demo below. To learn more This demo only presents a limited set of features. Visit the {@link examples/builds/full-featured-editor feature-rich editor example} to see more in action. - ## Base image feature The base image feature does not support any user interface for inserting or managing images. Its sole purpose is to lay ground for other plugins (listed below) to build the target user experience. This pattern (composition of atomic features) is common for CKEditor 5 and allows the developers to build their own customized experience by implementing specific subfeatures differently. @@ -205,6 +204,16 @@ Refer to the {@link features/images-installation image installation} guide for m See the common API of image-related features such as {@link module:image/imagestyle~ImageStyle}, {@link module:image/imageresize~ImageResize}, and {@link module:link/linkimage~LinkImage} to learn more about available image toolbar buttons. +## Image `width` and `height` attributes + +Starting with v40.0.0, the image's `width` and `height` attributes are retained by the editor when it is loaded. Upon {@link features/image-upload uploading an image file} or {@link features/images-inserting inserting it} into the editor content, the CKEditor 5 image feature fetches these dimensions from the file. It will also happen on any interaction with the image if the content is preloaded. The editor then adds these properties to the markup, just like the {@link features/images-text-alternative text alternative tag}. This is done to ensure that the image dimensions ratio is properly kept when it is styled or aligned and that the image always looks like it should, rather than forcing the image size within the content. + +``` +image markup here? +``` + +These image properties can be further controlled via CSS styles. If you need to crop, resize, or mirror flip your images, you can use the {@link features/ckbox CKBox asset manager} to achieve that. + ## Typing around images To type before or after an image easily, select the image, then press the Arrow key (← or →) once, depending on where you want to add content – before or after respectively. The image becomes no longer selected and whatever text you type will appear in the desired position. From f60f93022d665fe0f3f199c6080d42296c7a4b03 Mon Sep 17 00:00:00 2001 From: godai78 Date: Wed, 20 Sep 2023 07:33:11 +0200 Subject: [PATCH 2/2] Docs: expanding information. [short flow] --- packages/ckeditor5-ckbox/docs/features/ckbox.md | 2 +- packages/ckeditor5-image/docs/features/images-overview.md | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/ckeditor5-ckbox/docs/features/ckbox.md b/packages/ckeditor5-ckbox/docs/features/ckbox.md index 492c881ab53..260357e57ff 100644 --- a/packages/ckeditor5-ckbox/docs/features/ckbox.md +++ b/packages/ckeditor5-ckbox/docs/features/ckbox.md @@ -37,7 +37,7 @@ As a full-fledged file manager, CKBox also replaces the basic CKEditor 5 im With CKBox you no longer need to write server-side code to upload and scale images or manage uploaded files. -To find out more about CKBox, the brand-new file manager, visit the [CKBox website](https://ckeditor.com/ckbox/) and read the dedicated [CKBox documentation page](https://ckeditor.com/docs/ckbox/latest/guides/index.html). +To find out more about CKBox, the brand-new file manager and image editor, visit the [CKBox website](https://ckeditor.com/ckbox/) and read the dedicated [CKBox documentation page](https://ckeditor.com/docs/ckbox/latest/guides/index.html). ## Demo diff --git a/packages/ckeditor5-image/docs/features/images-overview.md b/packages/ckeditor5-image/docs/features/images-overview.md index 8679f509c4f..3a23b222001 100644 --- a/packages/ckeditor5-image/docs/features/images-overview.md +++ b/packages/ckeditor5-image/docs/features/images-overview.md @@ -206,11 +206,11 @@ See the common API of image-related features such as {@link module:image/imagest ## Image `width` and `height` attributes -Starting with v40.0.0, the image's `width` and `height` attributes are retained by the editor when it is loaded. Upon {@link features/image-upload uploading an image file} or {@link features/images-inserting inserting it} into the editor content, the CKEditor 5 image feature fetches these dimensions from the file. It will also happen on any interaction with the image if the content is preloaded. The editor then adds these properties to the markup, just like the {@link features/images-text-alternative text alternative tag}. This is done to ensure that the image dimensions ratio is properly kept when it is styled or aligned and that the image always looks like it should, rather than forcing the image size within the content. +Starting with v40.0.0, the image's `width` and `height` attributes are retained by the editor when it is loaded. Upon {@link features/image-upload uploading an image file} or {@link features/images-inserting inserting it} into the editor content, the CKEditor 5 image feature fetches these dimensions from the file. It will also happen on any interaction with the image if the content is preloaded. The editor then adds these properties to the markup, just like the {@link features/images-text-alternative text alternative tag}. -``` -image markup here? -``` +However, if the user uses an upload adapter and the server sends back the uploaded image with the `width` or `height` parameters already set, these existing values are not overwritten. + +Adding the image's `width` and `height` attributes is done to ensure that the image dimensions ratio is properly kept when it is styled or aligned and that the image always looks like it should, rather than forcing the image size within the content. These image properties can be further controlled via CSS styles. If you need to crop, resize, or mirror flip your images, you can use the {@link features/ckbox CKBox asset manager} to achieve that.