Image wrap, float & outset

Images in Redactor can break out of the plain vertical flow in two ways:

• Wrap (float) — text flows beside the image (left or right), or the image is centered in the column.
• Outset — the image extends outside the text column — to the left, right, or both sides — for magazine-style layouts.

Both features add CSS classes to the image wrapper (<figure> or your image.tag). Sizes and offsets are controlled with CSS variables.

Wrap — text around the image#

Wrap controls how the image sits relative to surrounding paragraphs.

Select an image and open Wrap in the image dropdown or context bar.

Why use float wrap

Float wrap is useful for editorial layouts: a photo beside the opening paragraph, an avatar next to a bio, or a chart with explanatory text alongside. The image stays in the document flow while text wraps around it.

Default CSS

Classes are scoped under .rx-content:

/* center */
.rx-content .wrap-center {
    text-align: center;
}

.rx-content .wrap-center img {
    margin-left: auto;
    margin-right: auto;
}

/* float */
.rx-content .float-left {
    float: left;
    margin-right: var(--rx-float-margin);
    margin-bottom: var(--rx-float-margin);
    max-width: var(--rx-float-width);
}

.rx-content .float-right {
    float: right;
    margin-left: var(--rx-float-margin);
    margin-bottom: var(--rx-float-margin);
    max-width: var(--rx-float-width);
}

Exported HTML keeps the class on the wrapper:

<figure class="float-left">
    <img src="/uploads/photo.jpg" alt="">
    <figcaption>Caption</figcaption>
</figure>
<p>Text wraps beside the image…</p>

On your published page, ship the same rules (you can drop the .rx-content prefix if you do not use that class):

.float-left {
    float: left;
    margin-right: var(--rx-float-margin, 1em);
    margin-bottom: var(--rx-float-margin, 1em);
    max-width: var(--rx-float-width, 200px);
}

CSS variables — float

Override globally or per editor:

.rx-content {
    --rx-float-width: 280px;
    --rx-float-margin: 1.5em;
}

Or change only floated images:

.rx-content .float-left,
.rx-content .float-right {
    max-width: 320px;
    margin-bottom: 1.25em;
}

Wrap settings

Default option map (wrap):

{
    none: 'none',
    left: 'float-left',
    center: 'wrap-center',
    right: 'float-right'
}

Hide the Wrap control:

const app = Redactor('#entry', {
    wrap: false
});

Use your own class names (add matching CSS):

const app = Redactor('#entry', {
    wrap: {
        none: 'none',
        left: 'img-pull-left',
        center: 'img-center',
        right: 'img-pull-right'
    }
});

Inline styles instead of classes — wrapWithStyle

When wrapWithStyle is enabled, float left/right use inline styles on the wrapper instead of float-left / float-right classes. Useful if you cannot add content CSS.

const app = Redactor('#entry', {
    wrapWithStyle: true
});

Or override defaults:

wrapWithStyle: {
    margin: '1.5em',
    marginBottom: '0.75em',
    maxWidth: '240px'
}

Center and none still use alignment classes / clearing logic as in the default path.

See Image settings — wrap.

Outset — image outside the column#

Outset shifts the image beyond the normal content width — partially into the margin or past the column edge. Use it for hero images, wide photos, or layouts where the text column is narrow but images should feel larger.

Select an image and open Outset in the image dropdown or context bar.

Default CSS

.rx-content .outset-right {
    position: relative;
    width: calc(100% + var(--rx-outset));
    max-width: calc(100% + var(--rx-outset));
    transform: translateX(var(--rx-outset)) translate3d(0, 0, 0);
    left: calc(var(--rx-outset) * -1);
}

.rx-content .outset-left {
    width: calc(100% + var(--rx-outset));
    max-width: calc(100% + var(--rx-outset));
    transform: translateX(calc(var(--rx-outset) * -1)) translate3d(0, 0, 0);
}

.rx-content .outset-both {
    position: relative;
    width: calc(100% + var(--rx-outset) + var(--rx-outset));
    max-width: calc(100% + var(--rx-outset) + var(--rx-outset));
    transform: translateX(-50%) translate3d(0, 0, 0);
    left: 50%;
}

The shift distance comes from --rx-outset (default 26px). Increase it for a stronger breakout:

.rx-content {
    --rx-outset: 48px;
}

On a published page:

:root {
    --rx-outset: 40px;
}

.outset-both {
    /* same wrap/outset rules as in the editor styles */
}

Outset works best when the editor or article container has a defined max-width — the extra width is calculated relative to that column.

Outset settings

Default option map (outset):

{
    none: 'none',
    left: 'outset-left',
    both: 'outset-both',
    right: 'outset-right'
}

Hide the Outset control:

const app = Redactor('#entry', {
    outset: false
});

Custom classes:

const app = Redactor('#entry', {
    outset: {
        none: 'none',
        left: 'bleed-left',
        both: 'bleed-wide',
        right: 'bleed-right'
    }
});

See Image settings — outset.

Wrap and outset together#

Wrap (float) and outset solve different problems:

You normally use one or the other. Applying both can produce overlapping layout; test in your template if you combine them.

Editor vs published page#

In the editor, floated images get a slightly higher z-index so the image block stays clickable above wrapped text.

On save, classes are stored on the image wrapper in HTML. Your site theme must include:

1. The same wrap/outset class rules used in the editor (or your own equivalents).
2. CSS variables --rx-float-width, --rx-float-margin, --rx-outset if you rely on defaults.

If the editor uses classname: 'article' instead of rx-content, scope overrides under .article:

.article {
    --rx-outset: 40px;
    --rx-float-width: 260px;
}

.article .float-left { /* … */ }
.article .outset-both { /* … */ }

See Change CSS styles.