Lightbox für die Typo3 News Extension aktivieren

Die News Extension von Georg Ringer hat in der Version 8.5 im Setup zwar eine Lightbox integriert. Steuerelemente, wie beim Bootstrap Package habe ich jedoch vermisst, nach Klick auf das Bild öffnete sich lediglich das Bild in einem neuen Browserfenster.

Damit die Lightbox, wie gewünscht als Overlay mit Steuerelementen und der korrekten Bildgröße erscheint, müssen folgende Codeblöcke verwendet werden:

1. Im TypoScript Setup:

typo3conf/ext/news/Configuration/Typoscript/setup.txt

#### tx_news lightbox mit bootstrap
                    lightbox {
                        enabled = 1
                        class = {$plugin.bootstrap_package_contentelements.lightbox.cssClass}
                        width = {$plugin.bootstrap_package_contentelements.lightbox.image.maxWidth}
                        height = {$plugin.bootstrap_package_contentelements.lightbox.image.maxHeight}
                        rel = {$plugin.bootstrap_package_contentelements.lightbox.prefix}
                    }

2. Die Bild-Datei

typo3conf/ext/news/Resources/Private/Partials/Detail/MediaImage.html

<a 
    href="{f:uri.image(image:mediaElement, maxWidth:'{settings.detail.media.image.lightbox.width}', maxHeight:'{settings.detail.media.image.lightbox.height}')}" 
    title="{mediaElement.title}" class="{settings.detail.media.image.lightbox.class}" 
	
    data-lightbox-caption="{mediaElement.description}" 
    class="{settings.detail.media.image.lightbox.class}" 
    data-lightbox-width="{bk2k:lastImageInfo(property: 'width')}" 
    data-lightbox-height="{bk2k:lastImageInfo(property: 'height')}" 
    rel="{settings.detail.media.image.lightbox.rel}">
>
    <f:image image="{mediaElement}" title="{mediaElement.title}" alt="{mediaElement.alternative}" maxWidth="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.detail.media.image.maxWidth)}" maxHeight="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.detail.media.image.maxHeight)}" />
</a>

Danke Benjamin Kott für seine Unterstützung