EXT: RTE Lightbox¶

What does it do?¶

Since TYPO3 Version 4.2 you have the possibility to “click-enlarge” the images you insert in the WYSIWYG editor (rtehtmlarea aka RTE) in TYPO3 Backend. The problem is, that these images aren't opened in a lightbox, they are opened in a popup. First of all, that's slow and secondly there's no fallback if your visitor hasn't javascript enabled.

This Extension enables lightboxes for images, inserted in RTE. Of course, you can choose your preferred lightbox: It supports all known lightbox-extensions like wsclicklightbox, pmkslimbox, jq_fancybox, jquery_thickbox, jq_lightbox, perfectlightbox, kj_imagelightbox2, ju_multibox, pmkshadowbox, perfectlightboxjquery, slimbox, jquerylightbox, …

Support for “unknown” lightbox extensions can be easily implemented by one line of TypoScript.

Demo available at http://www.sbtheke.de/demo/rtelightbox/

Screenshots¶

See “Users manual”

Installation¶

• Install one of these extensions, which will provide the lightbox functionality: wsclicklightbox, pmkslimbox, jq_fancybox, jquery_thickbox, jq_lightbox, perfectlightbox, perfectlightboxjquery , kj_imagelightbox2, pmkshadowbox, slimbox, jquerylightbox, rzcolorbox, rzlightbox, ju_multibox, mediabox
• If you don't want to use one of the named lightbox extensions, you can use your preferred, but then you have to do some TypoScript configuration.
• Now you have to add the template “RTE Lightbox (rtelightbox)” in field “Include static (from extensions)” in your root page. Place it AFTER the template “Clickenlarge Rendering (rtehtmlarea)” and AFTER the template of your preferred lightbox extension. If you use the lightbox extension “kj_imagelightbox2”, your selected templates should look like this:

• Don't forget to clear the cache.
• Now the images should be opened in a lightbox, give it a try!

Reference¶

Dimensions of image in lightbox¶

You can define the maximum width and hight of the image in the lightbox via TypoScript Constants:

styles.content.imgtext.linkWrap.width = 800m

styles.content.imgtext.linkWrap.height = 600m

Attribute “title” for images¶

You can provide a title for the images the image properties in RTE (see screenshot in “Users manual”). As default, this input is taken as title. But you know your editors: Mostly, they wouldn't write anything into this field. So you have the possibility to provide a text for the title attribute via TypoScript:

lib.parseFunc_RTE.tags.img.postUserFunc.imageLinkWrap.typolink.ATagPa rams.cObject.20.ifEmpty = Open image in lightbox

But remember: Most lightbox extensions display this title text as image caption in the lightbox!

Attribute “alt” for images¶

Similar to the title-attribute, you can provide a text for the alt attribute via TypoScript:

lib.parseFunc_RTE.tags.img.postUserFunc.imageLinkWrap.typolink.ATagPa rams.cObject.30.ifEmpty = Your text for alt attribute

The alt-attribute contains the text “click-enlarge image” by default.

Problem: There's no “Click-enlarge” checkbox in my image properties (rtehtmlarea < Version 1.8.5)¶

You have to enable this in the configuration for “rtehtmlarea” in the extension manager:

Problem: The “Click-enlarge” setting isn't saved¶

When you save your content element and after this you have a look into the image properties and the checkbox isn't activated although you just activated it, you have to allow the attribute “clickenlarge” for rtehtmlarea.

In page properties of your root page, write this code in field “TSconfig”:

RTE.default.proc.entryHTMLparser_db.tags.img.allowedAttribs = alt,class,style,src,title,width,height,clickenlarge

Problem: Images from tt_news RTE aren't opened in a lightbox¶

Please include the static template for tt_news after the static templates needed for the lightbox.

If this is not possible for you, just overwrite the tt_news RTE rendering again:

# click-enlarge for images in rte in tt_news single view

plugin.tt_news.displaySingle.content_stdWrap.parseFunc < lib.parseFunc_RTE

Use this extension with TYPO3 version < 4.3¶

Please use version 1.0.1 of rtelightbox extension.