Lightbox für die Typo3 News Extension aktivieren

Um die Lightbox für die News Extension einzurichten, sind nur ein paar kleine Codeänderungen notwendig...

Typo3 Tipps

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