Frontend Rendering

TypoScript configuration for frontend image rendering, CSS classes, lazy loading, and lightbox integration.

Important

TypoScript Required for Frontend Rendering

After installing the extension, you must include the TypoScript for frontend image rendering.

Option 1: Static Template (Recommended)

Go to WEB > Template module.
Select your root page.
Edit the template.
In Includes tab, add: CKEditor Image Support (rte_ckeditor_image).

Option 2: Direct Import

Add to your site package TypoScript:

Import in your site package

@import 'EXT:rte_ckeditor_image/Configuration/TypoScript/ImageRendering/setup.typoscript'

This loads:

Image rendering hooks (lib.parseFunc_RTE.tags.img).
Link rendering hooks (lib.parseFunc_RTE.tags.a).
HTMLparser configuration for data attribute cleanup.

Using direct import gives you full control over the TypoScript load order, allowing you to override settings (like lightbox configuration) after the import.

Table of Contents

TypoScript Configuration

Frontend Rendering Setup

The extension provides default configuration. You can customize it:

Changed in version 13.1.5

The legacy ImageRenderingController and ImageLinkRenderingController were replaced with unified ImageRenderingAdapter using the new service architecture. See Services API for details.

Frontend rendering configuration

lib.parseFunc_RTE {
    tags.img = TEXT
    tags.img {
        current = 1
        preUserFunc = Netresearch\RteCKEditorImage\Controller\ImageRenderingAdapter->renderImageAttributes
    }

    tags.a = TEXT
    tags.a {
        current = 1
        preUserFunc = Netresearch\RteCKEditorImage\Controller\ImageRenderingAdapter->renderLinkedImageAttributes
    }

    nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
        # Remove internal data attributes from frontend
        allparams.unset = 1
        data-htmlarea-file-uid.unset = 1
        data-htmlarea-file-table.unset = 1
        # Keep zoom attributes for popup/lightbox rendering (ImageRenderingController.php)
        # data-htmlarea-zoom.unset = 1
        # data-htmlarea-clickenlarge.unset = 1
        data-title-override.unset = 1
        data-alt-override.unset = 1
    }
}

lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.encapsTagList := addToList(img)

Default CSS Class

Add default class to all RTE images:

Default CSS class configuration

lib.parseFunc_RTE {
    nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib.class {
        default = img-fluid responsive-image
    }
}

Lazyload Configuration

Enable native browser lazy loading:

Template constants for lazy loading

styles.content.image.lazyLoading = lazy
# Options: lazy, eager, auto

Lightbox/Popup Integration

New in version 13.1.0

Default popup configuration is now provided by the extension.

Note

Optional Site Set Configuration (TYPO3 v13+)

The extension provides click-to-enlarge functionality once TypoScript is included.

However, for TYPO3 v13+ best practices, you can optionally include the extension's site set to ensure proper loading order with fluid_styled_content if you use it:

Option 1: Via Backend (Recommended for TYPO3 v13+)

Go to Site Management > Sites module.
Edit your site.
In Sets tab, add: CKEditor Image Support.
Save.

Option 2: Via config.yaml

Edit config/sites/<your-site>/config.yaml:

Site configuration with extension dependency

base: 'https://example.com/'
rootPageId: 1
dependencies:
  - netresearch/rte-ckeditor-image

Option 3: Static Template (Legacy, TYPO3 v12)

For TYPO3 v12, you can include the static template:

Go to WEB > Template module.
Select your root page.
Edit the template.
In Includes tab, add: CKEditor Image Support (rte_ckeditor_image).

Why use site sets? TYPO3 v13 site sets provide proper dependency ordering with fluid_styled_content, ensuring TypoScript loads in the correct sequence.

The extension provides lib.contentElement.settings.media.popup configuration with sensible defaults for click-to-enlarge functionality. When editors enable Enlarge on Click in the image dialog, images will open in a JavaScript popup window.

Default Configuration (included in the static template):

Default popup configuration

lib.contentElement.settings.media.popup {
    # Opens in popup window (800x600 max)
    bodyTag = <body style="margin:0; background:#fff;">
    wrap = <a href="javascript:close();"> | </a>
    width = 800m
    height = 600m
    JSwindow = 1
    JSwindow.newWindow = 1
    directImageLink = 0
}

Using with Lightbox Libraries (PhotoSwipe, GLightbox, etc.):

Override the default configuration to use direct image links with custom CSS classes:

Lightbox library configuration

lib.contentElement.settings.media.popup {
    # Direct link to image for lightbox libraries
    directImageLink = 1

    # Add lightbox-specific classes and attributes
    linkParams.ATagParams.dataWrap = class="lightbox" rel="lightbox-gallery"
}

Legacy fluid_styled_content Integration:

If using fluid_styled_content constants, enable lightbox mode:

Template constants for lightbox

styles.content.textmedia.linkWrap.lightboxEnabled = 1

Manual TypoScript Inclusion

Changed in version 13.4.0

TypoScript is no longer automatically loaded. Manual inclusion is required. See Frontend Rendering for inclusion options.

The extension requires manual TypoScript inclusion, giving you full control over load order and the ability to override settings in your site package.

Include via Static Template:

Go to WEB > Template module
Select your root page
In Includes tab, add: CKEditor Image Support

Or import directly in your site package:

Direct import in site package TypoScript

@import 'EXT:rte_ckeditor_image/Configuration/TypoScript/ImageRendering/setup.typoscript'

# Now you can override settings:
lib.contentElement.settings.media.popup {
    directImageLink = 1
    linkParams.ATagParams.dataWrap = class="lightbox"
}

TypoScript Reference

Complete TypoScript Configuration Options

Image Rendering

Image tag processing

lib.parseFunc_RTE {
    tags.img = TEXT
    tags.img {
        current = 1
        preUserFunc = Netresearch\RteCKEditorImage\Controller\ImageRenderingAdapter->renderImageAttributes
    }
}

Link Rendering

Link tag processing for linked images

lib.parseFunc_RTE {
    tags.a = TEXT
    tags.a {
        current = 1
        preUserFunc = Netresearch\RteCKEditorImage\Controller\ImageRenderingAdapter->renderLinkedImageAttributes
    }
}

HTML Parser Configuration

HTMLparser attribute cleanup

lib.parseFunc_RTE.nonTypoTagStdWrap.HTMLparser.tags.img {
    fixAttrib {
        # Remove internal data attributes
        data-htmlarea-file-uid.unset = 1
        data-htmlarea-file-table.unset = 1
        # Keep zoom attributes for popup/lightbox rendering (ImageRenderingController.php)
        # data-htmlarea-zoom.unset = 1
        # data-htmlarea-clickenlarge.unset = 1
        data-title-override.unset = 1
        data-alt-override.unset = 1
    }
}

Default CSS Classes

Default and allowed CSS classes

lib.parseFunc_RTE.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib.class {
    default = img-fluid
    list = img-fluid,img-thumbnail,rounded
}

Lazy Loading

Native browser lazy loading

# Template Constants
styles.content.image.lazyLoading = lazy
# Options: lazy, eager, auto

Lightbox Configuration

Lightbox template constants

# Template Constants
styles.content.textmedia.linkWrap.lightboxEnabled = 1
styles.content.textmedia.linkWrap.lightboxCssClass = lightbox
styles.content.textmedia.linkWrap.lightboxRelAttribute = lightbox[{field:uid}]

Image Processing

Image dimension processing

lib.parseFunc_RTE.nonTypoTagStdWrap.HTMLparser.tags.img {
    width =
    height =
    # Allows TYPO3 to process dimensions
}

Encapsulation Configuration

Image encapsulation in paragraphs

lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines {
    encapsTagList := addToList(img)
    remapTag.img = p
}