Skip to content

Enable Bootstrap Package Lightbox in EXT:News

Jump to bottom Edit New page
Andrea Moroni edited this page Feb 16, 2022 · 1 revision

Working solution with TYPO3 10.4.24, Bootstrap Package 12.0.4, News 9.2.0

Settings for Bootstrap Package Lightbox:

plugin.tx_news.settings.detail {
media.image {
                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}
                }
}

Create /typo3conf/ext/XXX_sitepackage/Resources/Private/Partials/News/Detail/MediaImage.html to overwrite the original news template

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      xmlns:n="http://typo3.org/ns/GeorgRinger/News/ViewHelpers"
      xmlns:bk2k="http://typo3.org/ns/BK2K/BootstrapPackage/ViewHelpers"
      data-namespace-typo3-fluid="true">

<div class="mediaelement mediaelement-image">
    <f:variable name="src"><f:uri.image image="{mediaElement}" /></f:variable>
    <f:if condition="{mediaElement.link}">
        <f:then>
            <f:link.typolink parameter="{mediaElement.link}" target="{n:targetLink(link:mediaElement.link)}">
				<f:image image="{mediaElement}" title="{mediaElement.title}" alt="{mediaElement.alternative}" loading="{settings.detail.media.image.lazyLoading}" 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)}" additionalAttributes="{itemprop:'image'}" />
            </f:link.typolink>
        </f:then>
        <f:else>
            <f:if condition="{settings.detail.media.image.lightbox.enabled}">
                <f:then>
                    <a
                        href="{f:uri.image(image:mediaElement, maxWidth:'{settings.detail.media.image.lightbox.width}', maxHeight:'{settings.detail.media.image.lightbox.height}')}"
                        title="{mediaElement.title}"
                        data-lightbox-caption="{mediaElement.description}"
                        class="{settings.detail.media.image.lightbox.class}"
                        data-lightbox-width="{bk2k:data.imageInfo(src: src,property: 'width')}"
                        data-lightbox-height="{bk2k:data.imageInfo(src: src,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>
                </f:then>
                <f:else>
		       <f:image image="{mediaElement}" title="{mediaElement.title}" alt="{mediaElement.alternative}" loading="{settings.detail.media.image.lazyLoading}" 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)}" additionalAttributes="{itemprop:'image'}" />
                </f:else>
            </f:if>
        </f:else>
    </f:if>
</div>
<f:if condition="{mediaElement.description}">
    <p class="news-img-caption">
        {mediaElement.description}
    </p>
</f:if>
</html>
Add a custom footer
Add a custom sidebar
Clone this wiki locally