A fictional field manual includes a close-up of a connector beside its replacement instructions. At full column width, the photograph pushes the instructions too far down. The author wants a half-width image in this manual while preserving the original photograph for other uses.
Enable resize support in the existing editor
In the application's current CKEditor 5 installation, import ImageResize from ckeditor5 and add it to the existing plugin list. Keep the image features, upload or insertion route, other plugins, and valid license configuration already used by the application.
Configure explicit choices inside its existing image settings:
const manualImageSettings = {
image: {
resizeUnit: '%',
resizeOptions: [
{
name: 'resizeImage:original',
label: 'Original',
value: null
},
{
name: 'resizeImage:50',
label: '50%',
value: '50'
},
{
name: 'resizeImage:75',
label: '75%',
value: '75'
}
],
toolbar: ['resizeImage']
}
};
Merge these properties into the real configuration rather than replacing unrelated image options. The fragment configures the resize choices; it does not create the editor or upload the photograph. Retain any image toolbar controls authors need for captions or alternative text.
“Original” clears the explicit resized width. Its resulting appearance still depends on the image's intrinsic size and the content stylesheet. It does not mean “fit exactly to the current column” under every layout.
Apply a width to the selected image
After selecting the connector photograph in an initialized editor, a custom application control can run:
editor.execute('resizeImage', { width: '50%' });
The command targets the selected image supported by the installed image features. Confirm that the photograph is selected before invoking an external control. A resize command should not silently act on a different image because a toolbar moved focus or the application restored the wrong selection.
Use percent when the desired size follows the content container. For example, a 50% image is 300 pixels wide in a 600-pixel container and 150 pixels wide in a 300-pixel container, before other layout constraints apply. If that makes the connector detail unreadable, choose a larger presentation or a separate close-up. Keeping the column narrow does not make a small technical detail legible.
The feature also supports pixel units through resizeUnit: 'px'. Choose that policy deliberately and test it against the reader layout. A fixed pixel choice still needs suitable responsive CSS when the available width is smaller.
Preserve the resized representation on save
Capture editor.getData() through the application's normal save route. Inspect the image markup and the resized width, then reopen the same manual record. Check both the restored editor and the reader renderer.
The documented block-image output uses a resized figure with a width style. If the application strips that wrapper, class, or style during cleanup, the displayed image can return to a different size. Include the required image content styles in the reader rather than relying only on the editor interface stylesheet.
Insertion and resizing have separate failure paths. The CKEditor upload guide deals with obtaining a stable media URL. If the same large image URL remains after resize, that is expected display behavior; reducing transfer size requires an image processing or responsive-source workflow.
Read the detail at its final width
In a development copy, set the connector photo to 50%, save, and reopen. Confirm that the source still points to the intended photograph, the display width survives, and the adjacent replacement instruction remains clear. Reset to Original and check that the explicit width is removed as intended.
Review the actual reader layout at a narrow width. The image aspect-ratio guide explains preserving proportions, but the manual also needs a readable connector detail. Finish with a size that lets the reader identify the correct connection without magnifying an indistinct thumbnail.