TYPO3

TYPO3 has a built-in click-enlarge feature: when an editor ticks Enlarge on click for the images of a content element, every image is wrapped in a link to a larger version. A few TypoScript constants add a CSS class and a rel attribute to those links — the two hooks SimpleLightbox needs.

The setup below works with the fluid_styled_content extension and a site package of your own. It takes three steps and no PHP.

Put the stylesheet and the script into the Resources/Public folder of your site package and include them in the TypoScript setup:

page {
    includeCSS {
        simplelightbox = EXT:site_package/Resources/Public/Css/simple-lightbox.min.css
    }
    includeJSFooter {
        simplelightbox = EXT:site_package/Resources/Public/JavaScript/simple-lightbox.min.js
    }
    jsFooterInline {
        100 = TEXT
        100.value = new SimpleLightbox('a.lightbox');
    }
}

Replace site_package with the extension key of your site package. Files from includeJSFooter are rendered at the end of the page and the inline code follows them, so the lightbox finds the links when it starts.

Set these constants in your site template, or change them in the Constant Editor:

styles.content.textmedia.linkWrap.lightboxEnabled = 1
styles.content.textmedia.linkWrap.lightboxCssClass = lightbox
styles.content.textmedia.linkWrap.lightboxRelAttribute = lightbox[{field:uid}]
styles.content.textmedia.linkWrap.width = 1600m
styles.content.textmedia.linkWrap.height = 1200m

The size of the linked image is limited by linkWrap.width and linkWrap.height. The defaults are modest; for photos that should look sharp on large screens raise them, for example to 1600m and 1200m. Editors now only have to tick Enlarge on click.

The rel value contains the uid of the content element, for example lightbox[12]. SimpleLightbox groups links that share the same rel value, so a single selector covers the whole page while every content element is browsed as its own gallery.

Try it: the two pairs below carry different rel values but are handled by one lightbox instance. The arrows never cross from one pair to the other.

Content element 12 — its photos form one gallery

Content element 13 — its photos form one gallery

• Nothing happens on click. Look at the page source: if the image links have no lightbox class, the constants are not active — the static template of fluid_styled_content has to be included before your own constants.
• A plain image view opens. lightboxEnabled is still 0, so TYPO3 renders its own popup link instead of a lightbox link.
• All elements merge into one slideshow. The rel constant is missing or does not contain {field:uid}.
• The enlarged image looks blurry. Raise linkWrap.width and linkWrap.height and clear the processed files.