For content elements with images, there is the option of either branching to a target URL when clicking on the image or displaying the image enlarged in a separate pop-up window (Javascript must be activated for this). The new browser window is adapted to the image size, the image is surrounded by a black frame. The frame width on the left and top depends on the browser used, the width on the right and bottom is defined by default values. The color and width of the frame as well as other parameters can be adjusted with a few lines of Typoscript. In the object browser, the default values can be found in the path tt_content.image.20.1.imageLinkWrap
The background color (and thus also that of the frame around the image) can be individually defined with the body tag of the pop-up window. The settings for topmargin, leftmargin, bottommargin and rightmargin define the frame width at the top and left. The browsers differ in their default values for the margins. If you set all values to 0, the black frame around the image is not visible:
tt_content.image.20.1.imageLinkWrap {
bodyTag = <body style="margin:0; background: #ccc;">
}If you want to add an indication of the source or copyright to the image, this can be done in a text area below the image, for example. To do this, the window is expanded downwards by a few pixels using the JSwindow.expand parameter:
tt_content.image.20.1.imageLinkWrap.JSwindow.expand = 0,20
A text below the image can be inserted using the wrap parameter, which includes the img tag in the window. In the following example, a table row with right-aligned alignment is placed below the image, which contains the text www.jweiland.net:
tt_content.image.20.1.imageLinkWrap {
bodyTag = <body style="margin:0; background: #ccc;">
width = 960m
title = Image from jweiland.net
JSwindow.expand = 0,20
wrap = <A href="javascript:close();"> | </a><br /><table align="right"><tr><td><font face="verdana,arial,helvetica,sans-serif" size="2" color="#666666">www.jweiland.net</font></td></tr></table>
}The maximum size for images in the pop-up window is set to 800 x 600 pixels. This value can be changed by specifying width and/or height, an 'm' after the size specification ensures that the aspect ratio is retained:
tt_content.image.20.1.imageLinkWrap.width = 960m
If you like, you can also change the content of the title bar in the new window:
tt_content.image.20.1.imageLinkWrap.title = image in popup window
This page contains automatically translated content.