Feature of the month - Images in CKEditor 5

# The brief history of online images

Even though the internet was primarily envisioned as a text-based entity, the images arrived into the amazing realm of the world wide web quite early. It was only in February 1993, when Marc Andreessen, a student also working at the National Center for Supercomputing Applications at the University of Illinois, wrote on a mailing list the suggestion to add the <img> tag to the then rather humble pool of around twenty existing HTML tags. The proposal caused some stir among the early developer community, concerning the syntax, application, and the bizarre shortened form. Even Tim Berners-Lee, the father of WWW, was dubious about it. This, however, meant very little to Andreessen, as he had already — hand in hand with Eric Bina, an NCSA developer — implemented the new tag in the NCSA Mosaic web browser that soon revolutionized the web.

Released in April of 1993, Mosaic was widely successful and gained a large market share as the first modern, rich web browser. It was later developed into a program known as Netscape Navigator and was one of the main opposing forces in the first Browser Wars, proudly supported by yours truly. It was still 1993 however and Mosaic was only starting to get widely and insanely popular. Upon seeing the sheer amount of love images get online, the new tag was later finally admitted into the 1995 specification of HTML 2.0. Whatever Andreessen and Bina did — basically forcing a new implementation and making the market accept it universally — was a successful approach and was later used much by other browser development teams. Those were the ways of the early days, well over a quarter of a century ago but nowadays we could not imagine the online world without images.

Here at CKEditor 5 we avoid forcing standards on users and developers, instead, we rely on winning their hearts with well-designed, rich features that offer unmatching editing capabilities. Considering a multitude of applications our WYSIWYG editor is tried at — from text documents, through slides to websites — we did put special effort into the image feature, treating graphics with care, both as content and design elements.

# Inserting images into the content

Each journey starts with the first step. In the case of an image, it would typically be its creation, but CKEditor 5 is not a graphics editor. It is an advanced, semantic framework for content creation, so our journey will start with the image being inserted into the content — it being uploaded and stored. There is more than one way to do it. In fact, there are many ways to do it and all of them are good and suit specific needs, be it portability, storage requirements, or speed and efficiency.

In CKEditor 5, you can upload an image through a file system dialog. You can use the simple adapter, but there are also dedicated solutions like the Easy Image uploader, which is a SaaS product and a part of your Cloud Services offer. There is also CKFinder, a dedicated image management system.

The users can drag an image from their file system and drop it straight into the editor. You can also paste the URL of an image (into a system dialog or the content) or simply paste an image from the clipboard.

These upload adapters are not shipped with predefined builds but can be easily added during the installation process.

# Inline vs block

Images in CKEditor 5 are delivered in two possible, semantically different forms. They can be either block elements or inline elements. The difference between those two is rather simple. A block element is a separating instance, it always starts a new line and takes up the whole available width. It can also have a top and bottom margin. Common block elements, other than images, would be for example paragraphs, headings, block quotes, tables, or horizontal rules. Block images would typically be large and act as if they were separate paragraphs, dividing the content body. They can also only be inserted between other block elements. Such images can be accompanied by their own captions, just like tables.

Inline elements, on the other hand, are almost completely opposite. They do not start a new line, they do not need top or bottom margins, they can also take any width. Such elements would mainly include various forms of text formatting, like bold and italic, abbreviations, inline code, or citations. In the case of images, they would typically be smaller, they can be aligned to one side of the content, they can act as icons, etc. They can be inserted inside a paragraph, mid-sentence, or inside a link.

Mixing these two types of content allows adjusting the images to almost any editing needs. Any more advanced ones can also be controlled with image style, which we will examine later. By default, CKEditor 5 supports both inline and block types of images, thanks to a pair of plugins: ImageInline and ImageBlock contained within a glue plugin Image. These are delivered with all predefined editor builds. It is, however, possible to prepare a custom build that would only provide one of these plugins, if it would be desirable for some reason.

# Arranging the images — the difference between the block and inline elements behavior

Upon pasting or uploading the image, based on the context and placement, CKEditor 5 will decide automatically whether the image should be a block or an inline element. Aided with advanced heuristics, making this assumption is very convenient for the user and most of the time it will be the correct choice. The user may, however, decide to change the editor’s choice as they please and need. The image contextual toolbar was designed to control the images within the content. It is a fully customizable tool with several options to choose from that can be adjusted to the users’ needs during the installation.

Block images will act like paragraphs, they take up all the space they need and there is no room left for justification. To be able to center, align left or right, the image type must be switched to inline. It can be easily done — the image can be aligned with a single click of the contextual toolbar and the type will be automatically adjusted.

The way the inline and block images behave when aligned can be predefined during the installation of CKEditor 5. Semantical styles are used to control this behavior.

# Semantical and presentational styles

Styling affects the HTML representation of the image and determines its type: whether it is a block element or an inline one. CKEditor 5 provides several basic styles, but the integrators of the software are free to define their own during the installation process. These are called the semantical styles and they are defined on the low level. The writers and editors can only apply them but not change, as it was shown in the screencast above where the available options are: a block image, an inline image, and a side image. The semantical styles are more about the role of the picture and its place within the content than anything else.

The other available approach involves presentational styles, which are responsible for the visual appearance of the images they are applied to. These allow for control over the alignment, text wrapping around the images, margins, and other CSS-originated aspects of the image’s look. This can be achieved either by changing one of the preexisting styles or defining your own ones. The customization would also include the ability to add and change contextual toolbar icons to represent the available styles.

For presentational styles to work properly, they also need the image resizing feature. Otherwise, some changes like alignment may not be clearly visible, as the image retains its original 100% size. Semantical styles are needed to control the image size if this option is not implemented.

# Resizing images

Out of all the ready-to-use predefined builds, the document build offers an additional capability not available in others. It is the implementation of the ImageResize plugin, which allows for easy and convenient resizing of images right inside the editor window. This is additional functionality enabling the user to fully control the images so that they fit predefined dimensions, often in the content intended for print.

The plugin supports several approaches to scaling the images. Two of these are predefined — the resize dropdown and resize buttons — and one is freehand — the resize handles. The latter gives the user the most control over the resizing process, basically allowing them to scale the image to any desired size. It is very convenient if used in documents that need flexibility and total control over the content.

Resize dropdown and resize buttons are very similar in the basic, technical approach. They offer a set of predefined sizes the image can be scaled to. This is great if you work on content that follows stricter rules concerning the alignment, looks, etc. Predefining the available sizes makes it also easier for the user to apply the transformation. In practical terms, the dropdown takes up less space in the toolbar, which is important if you need more contextual options available. The buttons, taking up more space, are faster and easier to access and hence affect productivity in a positive way.

Additionally, if the Easy Image plugin is used, it provides support for responsive images, meaning the pictures will scale accordingly, based on the screen size of the device the document is displayed on.

This option is not really a user option per se, as this does not allow for a controlled input. Instead, it is an accessibility option, allowing users on different devices to achieve the same experience.

# Accessibility and usability

One of the notions we cherish greatly when working on CKEditor 5 is the idea that both the WYSIWYG editor and the content it produces are accessible to everyone. Responsiveness of images is just one part of it. Along the lines of the a11y project, the HTML image tag offers the alternative text option. It is a written description of the image’s content which is intended to be used by screen readers. This kind of solution is most often utilized by users with sight impairments. A proper description can be then read out loud and give the person who cannot see the image an idea of what it presents and what the role of the graphic is. In the olden days of early image tag implementation, this was often used improperly, to title or caption the picture. Sometimes the webmaster would even use the alt attribute to place a call to action. Nowadays it is more often used as intended, providing an alternative way to access the graphic content for everyone. And it is also a great tool to boost the searchability and indexability of the image, which could otherwise go unnoticed by the search engines. Alternative text edition is easily available from the image toolbar — this bad boy can fit so many buttons and dropdowns in it!

You will notice that the toolbar holds more than only the text alternative option. In the previous sections of this blog post, we have already discussed the alignment options, which can be easily configured. It may also provide access to another useful tool, which is the image caption.

A caption would act as a title or an external description of the image. Unlike the text alternative, which should ideally concentrate on describing what the picture shows, the caption serves a more supporting role. It may be a title, an explanation of what is shown on the picture (like we most often do here), it may also contain a call to action or even some additional information out of the main body of the text. It also serves a very important role for readers scanning the document and searching for specific information that would often be put in subheadings, infoboxes, block quotes, or the captions of images, tables, and similar elements.

They may be used with block images with the good, trustworthy image toolbar invoked on click. You can turn the caption on and off and edit it by simply clicking the caption box.

Both the text alternative and the caption are available in all predefined editor builds.

Images have also served another purpose since the earliest days of their career on the world wide web. Serving as headers, icons, or pointers they worked as anchors. An additional LinkImage plugin provides support for linking images in CKEditor 5. In the early twenties when heavy graphic design and image-based navigation are somewhat a thing of the past, there are still applications for this type of functionality, like linking high-resolution images from the content, presenting thumbnails (e.g. to other articles of further chapters), and even using cross-page banners.

The link attached to the image can be, of course, controlled via a button in the contextual toolbar and would be indicated by a link icon in the top right corner of the image.

# Application and further reading

Images are an invaluable addition to all kinds of documents. Firstly, they show what cannot be described or only with difficulty. After all, a picture is worth a thousand words. They may be the main hero of the content or just an additional ornament that plays only a minor, esthetic role. They may also serve utilitarian purposes acting as page navigation elements, anchors, markers, or graphic indicators for some other elements.

Whatever the documents you work on and the effecting needs, the image subsystem of the CKEditor 5 Framework is a versatile, highly developed set of features offering great flexibility and usability in almost all possible contexts and facing the direst challenges.

The predefined builds already offer fine functionality but further expansion during integration and the possibility to fully customize most of the available options is also of great value for system administrators.

Be sure to find more interesting details about images in CKEditor 5 in our documentation, depicting all aspects of implementation and configuration of the numerous options.