--- title: "Frontend Rendering" manual: "RTE CKEditor Image" version: "main" permalink: "https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:integration-configuration-frontend-rendering@main" source: "Integration/Frontend-Rendering.rst" rendered: "2026-10-01T01:27:51+00:00" --- # Frontend Rendering {#integration-configuration-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)** > > 1. Go to **WEB > Template** module. > 1. Select your root page. > 1. Edit the template. > 1. 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** > > ```typoscript > @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`) — resolves `t3://` URLs and validates protocols. > - Figure rendering hooks (`lib.parseFunc_RTE.externalBlocks.figure`). > - 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](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:typoscript-configuration@main) - [Manual TypoScript Inclusion](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:manual-typoscript-inclusion@main) - [TypoScript Reference](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:typoscript-reference-1@main) - [Related Documentation](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:related-documentation@main) ## TypoScript Configuration {#typoscript-configuration} ### Frontend Rendering Setup {#frontend-rendering-setup} The extension provides default configuration. You can customize it: The legacy ImageRenderingController and ImageLinkRenderingController were replaced with unified ImageRenderingAdapter using the new service architecture. See Services API for details. **Frontend rendering configuration** ```typoscript 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->renderInlineLink } 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 (ImageRenderingAdapter.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 {#default-css-class} Add default class to all RTE images: **Default CSS class configuration** ```typoscript lib.parseFunc_RTE { nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib.class { default = img-fluid responsive-image } } ``` ### Lazyload Configuration {#lazyload-configuration} Enable native browser lazy loading: **Template constants for lazy loading** ```typoscript styles.content.image.lazyLoading = lazy # Options: lazy, eager, auto ``` ### Lightbox/Popup Integration {#lightbox-popup-integration} 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+)** > > 1. Go to **Site Management > Sites** module. > 1. Edit your site. > 1. In **Sets** tab, add: **CKEditor Image Support**. > 1. Save. > > **Option 2: Via config.yaml** > > Edit `config/sites//config.yaml`: > > **Site configuration with extension dependency** > > ```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: > > 1. Go to **WEB > Template** module. > 1. Select your root page. > 1. Edit the template. > 1. 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** ```typoscript lib.contentElement.settings.media.popup { # Opens in popup window (800x600 max) bodyTag = wrap = | 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** ```typoscript 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** ```typoscript styles.content.textmedia.linkWrap.lightboxEnabled = 1 ``` ## Manual TypoScript Inclusion {#manual-typoscript-inclusion} 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:** 1. Go to **WEB > Template** module 1. Select your root page 1. In **Includes** tab, add: **CKEditor Image Support** **Or import directly in your site package:** **Direct import in site package TypoScript** ```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 {#typoscript-reference} ### Complete TypoScript Configuration Options {#complete-typoscript-configuration-options} #### Image Rendering {#image-rendering} **Image tag processing** ```typoscript lib.parseFunc_RTE { tags.img = TEXT tags.img { current = 1 preUserFunc = Netresearch\RteCKEditorImage\Controller\ImageRenderingAdapter->renderImageAttributes } } ``` #### Link Rendering {#link-rendering} **Link tag processing for linked images** ```typoscript lib.parseFunc_RTE { tags.a = TEXT tags.a { current = 1 preUserFunc = Netresearch\RteCKEditorImage\Controller\ImageRenderingAdapter->renderInlineLink } } ``` #### HTML Parser Configuration {#html-parser-configuration} **HTMLparser attribute cleanup** ```typoscript 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 (ImageRenderingAdapter.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-css-classes} **Default and allowed CSS classes** ```typoscript lib.parseFunc_RTE.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib.class { default = img-fluid list = img-fluid,img-thumbnail,rounded } ``` #### Lazy Loading {#lazy-loading} **Native browser lazy loading** ```typoscript # Template Constants styles.content.image.lazyLoading = lazy # Options: lazy, eager, auto ``` #### Lightbox Configuration {#lightbox-configuration} **Lightbox template constants** ```typoscript # 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-processing} **Image dimension processing** ```typoscript lib.parseFunc_RTE.nonTypoTagStdWrap.HTMLparser.tags.img { width = height = # Allows TYPO3 to process dimensions } ``` #### Encapsulation Configuration {#encapsulation-configuration} **Image encapsulation in paragraphs** ```typoscript lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines { encapsTagList := addToList(img) remapTag.img = p } ``` #### Backend Preview Styling {#backend-preview-styling} The extension automatically registers an image-aware preview renderer for all CTypes with RTE-enabled bodytext (e.g. text, textmedia, textpic). This ensures images are visible in the Page module preview. By default, preview images render at their original size. To limit image dimensions in the backend Page module, add a custom backend stylesheet: **EXT:your_sitepackage/Resources/Public/Css/backend.css** ```css /* Limit RTE image preview size in Page module */ .t3-page-ce-body img { max-width: 200px; max-height: 150px; } ``` Register the stylesheet in your site package: **EXT:your_sitepackage/ext_localconf.php** ```php $GLOBALS['TYPO3_CONF_VARS']['BE']['stylesheets']['your_sitepackage'] = 'EXT:your_sitepackage/Resources/Public/Css/backend.css'; ``` > [!NOTE] > **See also** > > [TYPO3 Changelog: Load additional stylesheets in backend](https://docs.typo3.org/c/typo3/cms-core/main/en-us/Changelog/12.3/Feature-100232-LoadAdditionalStylesheetsInTYPO3Backend.html) ## Related Documentation {#related-documentation} ### Configuration Topics {#configuration-topics} - [RTE Setup](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:integration-configuration-rte-setup@main) \- RTE configuration and basic setup - [Page TSConfig Setup](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:integration-configuration-tsconfig@main) \- Page TSConfig settings and upload configuration - [Advanced Configuration](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:integration-configuration-advanced@main) \- Advanced configuration, styles, and best practices ### General Documentation {#general-documentation} - [Integration & Configuration](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:integration@main) \- Main configuration guide overview - [Quick Start](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:quick-start@main) \- Quick start guide - [Troubleshooting & Support](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:troubleshooting-index@main) \- Troubleshooting guide