RTE CKEditor Image - Feature Showcase

Image Alignments

Five built-in alignment classes control image positioning within rich text content.

css .image-left — Float left with text wrapping

The image floats to the left and surrounding text wraps around it. This is the most common layout for editorial content where an image illustrates a point while the narrative continues alongside it. The float is cleared automatically via the ::after pseudo-element to prevent layout collisions with subsequent content. On screens narrower than 768px, the float is removed and the image becomes a centered block element for better readability on mobile devices.

css .image-right — Float right with text wrapping

The image floats to the right. This is useful for pull-quotes, secondary illustrations, or sidebar content that accompanies the main text flow. Like .image-left, the float clears automatically and becomes a centered block on narrow viewports. The margin is applied on the left side to create space between the image and the text.

css .image-center — Centered block element

Content before the centered image.

Content after the centered image. The image is displayed as a block element with automatic left and right margins. Text does not wrap around it — it creates a visual break in the content flow, ideal for hero images or key illustrations.

css .image-inline — Inline with text flow

Inline images sit within the text flow, like this icon or this larger badge. They are vertically aligned to the middle of the text baseline. Useful for icons, emoji-like images, or small decorative elements within a paragraph.

css .image-block — Full-width block element

Content before the block image.

Content after. The image stretches to 100% of the container width, creating a strong visual break. Ideal for banner images, section dividers, or full-bleed photography.

Captions & Figures

Images with captions are wrapped in <figure> with <figcaption>. Caption alignment follows the figure alignment class.

template WithCaption.html — Centered figure with caption

Mountain landscape — A centered caption below a landscape image

The figure is centered via .image-center and constrained to the image width via max-width. The caption text is centered within the figure.

template WithCaption.html — Left-aligned figure with caption

Sunset — Left-aligned caption stays within image width

When a figure uses .image-left, the caption aligns left and text wraps around both the image and its caption. The max-width on the figure ensures the caption never extends beyond the image boundary, keeping the layout clean even with longer caption text. This is the fix introduced in issue #667.

template WithCaption.html — Right-aligned figure with caption

City skyline — Right-aligned with text wrapping around both image and caption

A right-aligned figure with caption demonstrates the same width constraint behavior. The caption text is left-aligned (matching left/right float convention) and contained within the image width. The wrapping text fills the space to the left of the floated figure.

template WithCaption.html — Full-width block figure with caption

Full-width block with caption — A block-level figure with caption. The CSS sets width: 100% but max-width constrains it to the image width, preventing the figure from stretching beyond 400px.

With .image-block, the figure uses width: 100% but the inline max-width caps it at the image width. This prevents the caption from spanning the full container while keeping the block display behavior.

Caption Width Constraint

Fix for #667: figcaptions are now constrained to the image width via max-width. Long words break via overflow-wrap: break-word.

fix Before vs. After — Small image (75 × 100) with long caption

✗ Before (no max-width)

Small red placeholder — This caption overflows far beyond the image boundary because the figure has no width constraint applied

The figcaption expands the figure width beyond the image, breaking the layout.

✓ After (max-width: 75px)

Small green placeholder — This caption wraps neatly within the image width boundary

With max-width: 75px, the caption wraps within the image width.

fix Long unbreakable word / URL in caption — overflow-wrap: break-word

✗ Without overflow-wrap

Demo — https://example.com/very/long/path/that/cannot/break/naturally

✓ With overflow-wrap

fix Multiple image sizes — captions always constrained to image width

Medium image with a caption that demonstrates proper wrapping behavior

fix UTF-8 captions — German umlauts, accented characters (#662)

UTF-8 test — Prüfung der Umlaute: Äpfel, Österreich, Übung, Straße, café, naïve, façade

Links & Click-to-Enlarge

Images can be wrapped in links for navigation or popup/zoom functionality. The extension resolves t3:// URLs and validates protocols.

template Link.html — Image with regular link

Image wrapped in an <a> tag. Hover to see opacity transition.

template Popup.html — Image with click-to-enlarge (zoom)

Zoom badge appears at top-right. Adds data-popup="true" and rel="lightbox-group-rte" for lightbox integration.

template LinkWithCaption.html — Linked image inside figure with caption

Linked with caption — A linked image with a descriptive caption below

template PopupWithCaption.html — Zoom image with caption

Zoomable with caption — Click to enlarge this image in a lightbox overlay

Template Combinations

The extension selects one of six Fluid templates based on the image configuration. Priority: Popup > Link > Caption > Standalone.

1 Standalone.html

Plain <img> tag only

2 WithCaption.html

<figure><img><figcaption>

3 Link.html

<a><img></a>

4 LinkWithCaption.html

<figure><a><img></a><figcaption>

5 Popup.html

<a data-popup><img></a>

6 PopupWithCaption.html

<figure><a data-popup><img></a><figcaption>

Responsive Behavior

On screens narrower than 768px, floated images become centered blocks. The max-width constraint ensures figures never exceed their image width while allowing them to shrink on small screens.

css @media (max-width: 768px) — Resize your browser to see the effect

Responsive demo — This floated figure becomes centered on mobile

On wide screens, this image floats left with text wrapping around it. Resize your browser window below 768px to see it switch to a centered block layout. The max-width property is responsive by design — it allows the figure to shrink on narrow screens but never exceed the image width. This works with all alignment modes.

The combination of max-width on the figure and the responsive media query means images and their captions always look correct regardless of viewport size.

attr Lazy Loading — loading="lazy" attribute

Images support loading="lazy|eager|auto" for native browser lazy loading and decoding="async" for non-blocking decode.