Frontend Rendering

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

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
        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 Integration

With fluid_styled_content:

Template Constants

styles.content.textmedia.linkWrap.lightboxEnabled = 1

Static Template

Include the static template for default TypoScript:

Go to Template → Info/Modify
Edit whole template record
Go to Includes tab
Add CKEditor Image Support in Include static (from extensions)
⚠️ Add it before Fluid Styled Content

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
        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
}