Frontend Rendering

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

Important

Zero-Configuration Installation (v13.0.0+)

The extension automatically loads TypoScript for frontend rendering via ext_localconf.php:

composer require netresearch/rte-ckeditor-image

No manual static template inclusion needed! The extension automatically loads:

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

This section is for advanced users who need to customize the default frontend rendering behavior.

Table of Contents

TypoScript Configuration

Frontend Rendering Setup

The extension provides default configuration. You can customize it:

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

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

    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:

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

Lazyload Configuration

Enable native browser lazy loading:

Template Constants

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 works out-of-the-box with zero configuration, including click-to-enlarge functionality.

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:

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? While not required, TYPO3 v13 site sets provide proper dependency ordering with fluid_styled_content, ensuring TypoScript loads in the correct sequence.

Everything works without site set/static template! The extension automatically configures:

✅ Basic image insertion and rendering
✅ Click-to-enlarge popup functionality
✅ Image processing and lazy loading

Site sets are optional and only recommended for TYPO3 v13+ sites using fluid_styled_content.

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 (automatically loaded via ext_localconf.php):

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:

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

styles.content.textmedia.linkWrap.lightboxEnabled = 1

Automatic TypoScript Loading

New in version 13.0.0

TypoScript is now loaded automatically via ext_localconf.php. Manual static template inclusion is no longer required.

The extension automatically loads frontend rendering configuration:

ExtensionManagementUtility::addTypoScript(
    'rte_ckeditor_image',
    'setup',
    '@import "EXT:rte_ckeditor_image/Configuration/TypoScript/ImageRendering/setup.typoscript"'
);

Note

The static template CKEditor Image Support is still available for backward compatibility, but is optional with automatic loading enabled.

TypoScript Reference

Complete TypoScript Configuration Options

Image Rendering

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

Link Rendering

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

HTML Parser Configuration

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

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

Lazy Loading

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

Lightbox Configuration

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

Image Processing

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

Encapsulation Configuration

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