--- title: "imageLinkWrap" manual: "TypoScript Explained" version: "main" permalink: "https://docs.typo3.org/permalink/t3tsref:imagelinkwrap@main" source: "Functions/Imagelinkwrap.rst" rendered: "2026-09-18T06:55:17+00:00" --- # imageLinkWrap {#imagelinkwrap-1} - [Properties](https://docs.typo3.org/permalink/t3tsref:properties@main) - [What it does](https://docs.typo3.org/permalink/t3tsref:what-it-does@main) - [Implementation](https://docs.typo3.org/permalink/t3tsref:implementation@main) - [Examples for imageLinkWrap](https://docs.typo3.org/permalink/t3tsref:examples-for-imagelinkwrap@main) ## Properties {#properties} ### enable {#enable} - **imageLinkWrap.enable** - *Type:* [boolean](https://docs.typo3.org/permalink/t3tsref:data-type-boolean@main) / [stdWrap](https://docs.typo3.org/permalink/t3tsref:stdwrap@main) - *Default:* 0 Whether or not to link the image. Must be set to True to make `imageLinkWrap` do anything at all. ### file {#file} - **imageLinkWrap.file** - *Type:* [stdWrap](https://docs.typo3.org/permalink/t3tsref:stdwrap@main) Apply [stdWrap](https://docs.typo3.org/permalink/t3tsref:stdwrap@main) functionality to the file path. ### width {#width} - **imageLinkWrap.width** - *Type:* [integer](https://docs.typo3.org/permalink/t3tsref:data-type-positive-integer@main) / [stdWrap](https://docs.typo3.org/permalink/t3tsref:stdwrap@main) - *Default:* 0 Width of the image to be shown in pixels. If you add "m" to `width` or `height` or both then the width and height parameters will be interpreted as maximum and proportions of the image will be preserved. ### height {#height} - **imageLinkWrap.height** - *Type:* [integer](https://docs.typo3.org/permalink/t3tsref:data-type-positive-integer@main) / [stdWrap](https://docs.typo3.org/permalink/t3tsref:stdwrap@main) - *Default:* 0 Width of the image to be shown in pixels. If you add "m" to `width` or `height` or both then the width and height parameters will be interpreted as maximum and proportions of the image will be preserved. ### effects {#effects} - **imageLinkWrap.effects** - *Type:* like [EFFECT](https://docs.typo3.org/permalink/t3tsref:gifbuilder-effect@main) of [GIFBUILDER](https://docs.typo3.org/permalink/t3tsref:gifbuilder@main) - *Default:* 0 Apply image effects to the preview image. #### Example for effects {#example-for-effects} **EXT:site_package/Configuration/Sets/Main/setup.typoscript** ```typoscript imageLinkWrap { effects = gamma=1.3 | sharpen=80 | solarize=70 # effects only works when directImageLink is FALSE directImageLink = 0 # at most 800 pixels wide. Keep proportions. width = 800m # at most 600 pixels wide. Keep proportions. height = 600m } ``` ### sample {#sample} - **imageLinkWrap.sample** - *Type:* [integer](https://docs.typo3.org/permalink/t3tsref:data-type-positive-integer@main) / [stdWrap](https://docs.typo3.org/permalink/t3tsref:stdwrap@main) - *Default:* 0 `sample` is a switch which determines how the image processor (often GraphicsMagick or ImageMagick) calculates the preview image. If `sample` is true then `- sample` is used with GraphicsMagick or ImageMagick instead of `- geometry` to calculate the preview image. `sample` does not use antialiasing and is therefore much faster than the `geometry` procedure of GraphicsMagick or ImageMagick. ### title {#title} - **imageLinkWrap.title** - *Type:* [string](https://docs.typo3.org/permalink/t3tsref:data-type-string@main) / [stdWrap](https://docs.typo3.org/permalink/t3tsref:stdwrap@main) Specifies the html-page-title of the preview window. Needs `JSwindow = 1`. ### bodyTag {#bodytag} - **imageLinkWrap.bodyTag** - *Type:* string / [stdWrap](https://docs.typo3.org/permalink/t3tsref:stdwrap@main) This is the ``-tag of the preview window. Needs `JSwindow = 1`. #### Example setting a bodytag for the preview window {#example-setting-a-bodytag-for-the-preview-window} **EXT:site_package/Configuration/Sets/Main/setup.typoscript** ```typoscript # "onBlur" closes the window automatically if it looses focus imageLinkWrap.JSwindow = 1 imageLinkWrap.bodyTag ( ) ``` ### wrap {#wrap} - **imageLinkWrap.wrap** - *Type:* [Wrap](https://docs.typo3.org/permalink/t3tsref:data-type-wrap@main) This wrap is placed around the ``-tag in the preview window. Needs `JSwindow = 1`. ### target {#target} - **imageLinkWrap.target** - *Type:* string / [stdWrap](https://docs.typo3.org/permalink/t3tsref:stdwrap@main) - *Default:* `thePicture` This specifies the `target` attribute of the link. The attribute will only be created if the current [Doctype](https://docs.typo3.org/permalink/t3tsref:setup-config-doctype@main) allows it. Needs `JSwindow = 1`. Default: 'thePicture'. #### Example: Use an alternative target for the JavaScript Window {#example-use-an-alternative-target-for-the-javascript-window} **EXT:site_package/Configuration/Sets/Main/setup.typoscript** ```typoscript # (1) to produce: imageLinkWrap.target = preview # (2) to use a new window for each image # let there be: imageLinkWrap.JSwindow = 1 imageLinkWrap.JSwindow.newWindow = 1 ``` ### JSwindow {#jswindow} - **imageLinkWrap.JSwindow** - *Type:* [boolean](https://docs.typo3.org/permalink/t3tsref:data-type-boolean@main) / [stdWrap](https://docs.typo3.org/permalink/t3tsref:stdwrap@main) - *Default:* 0 If true (`JSwindow = 1`) Javascript will be used to open the image in a new window. The window is automatically resized to match the dimensions of the image. ### JSwindow.expand {#jswindow-expand} - **imageLinkWrap.JSwindow.expand** - *Type:* `x`, `y` / [stdWrap](https://docs.typo3.org/permalink/t3tsref:stdwrap@main) - *Default:* 0 `x` and `x` are of data type [integer](https://docs.typo3.org/permalink/t3tsref:data-type-integer@main). The values are added to the width and height of the preview image when calculating the width and height of the preview window. ### JSwindow.newWindow {#jswindow-newwindow} - **JSwindow.newWindow** - *Type:* [boolean](https://docs.typo3.org/permalink/t3tsref:data-type-boolean@main) / [stdWrap](https://docs.typo3.org/permalink/t3tsref:stdwrap@main) - *Default:* 0 If the [Doctype](https://docs.typo3.org/permalink/t3tsref:setup-config-doctype@main) allows the string attribute then the image will be opened in a window with the name given by `target`. If that windows is kept open and the next image with the same string attribute is to be shown then it will appear in the same preview window. If `JSwindow.newWindow` is set to True, then a unique hash value is used as `target` value for each image. This guarantees that each image is opened in a new window. ### JSwindow.altUrl {#jswindow-alturl} - **imageLinkWrap.JSwindow.altUrl** - *Type:* [string](https://docs.typo3.org/permalink/t3tsref:data-type-string@main) / [stdWrap](https://docs.typo3.org/permalink/t3tsref:stdwrap@main) If this returns anything then it is used as URL of the preview window. Otherwise the default "showpic" script will be used. ### JSwindow.altUrl_noDefaultParams {#jswindow-alturl-nodefaultparams} - **imageLinkWrap.JSwindow.altUrl_noDefaultParams** - *Type:* [boolean](https://docs.typo3.org/permalink/t3tsref:data-type-boolean@main) / [stdWrap](https://docs.typo3.org/permalink/t3tsref:stdwrap@main) - *Default:* 0 If true (`JSwindow.altUrl_noDefaultParams = 1`) then the image parameters are not automatically appended to the `altUrl`. This is useful if you want to add them yourself in a special way. ### typolink {#typolink} - **imageLinkWrap.typolink** - *Type:* [typolink](https://docs.typo3.org/permalink/t3tsref:typolink@main) / [stdWrap](https://docs.typo3.org/permalink/t3tsref:stdwrap@main) If this returns anything it will be used as link and override everything else. ### directImageLink {#directimagelink} - **imageLinkWrap.directImageLink** - *Type:* [boolean](https://docs.typo3.org/permalink/t3tsref:data-type-boolean@main) / [stdWrap](https://docs.typo3.org/permalink/t3tsref:stdwrap@main) - *Default:* 0 If true (`directImageLink = 1`) then a link will be generated that points directly to the image file. This means that no "showpic" script will be used. ### linkParams {#linkparams} - **imageLinkWrap.linkParams** - *Type:* [typolink](https://docs.typo3.org/permalink/t3tsref:typolink@main) / [stdWrap](https://docs.typo3.org/permalink/t3tsref:stdwrap@main) When the direct link for the preview image is calculated all attributes of `linkParams` are used as settings for the [typolink](https://docs.typo3.org/permalink/t3tsref:typolink@main) function. In other words: Use the same parameters for `linkParams` that you would use for [typolink](https://docs.typo3.org/permalink/t3tsref:typolink@main). Needs `JSwindow = 0`. Example: Use alternative parameters for the a-tag Needs `JSwindow = 0`. #### Example: Use alternative parameters for the a-tag {#example-use-alternative-parameters-for-the-a-tag} This way it is possible to use a lightbox and to display resized images in the frontend. A more complete example is [Example: Images in lightbox "fancybox"](https://docs.typo3.org/permalink/t3tsref:imagelinkwrap-example-fancybox@main). **EXT:site_package/Configuration/Sets/Main/setup.typoscript** ```typoscript JSwindow = 0 directImageLink = 1 linkParams.ATagParams.dataWrap ( class="{$styles.content.imgtext.linkWrap.lightboxCssClass}" rel="{$styles.content.imgtext.linkWrap.lightboxRelAttribute}" ) ``` ### stdWrap {#stdwrap} - **imageLinkWrap.stdWrap** - *Type:* [stdWrap](https://docs.typo3.org/permalink/t3tsref:stdwrap@main) This adds [stdWrap](https://docs.typo3.org/permalink/t3tsref:stdwrap@main) functionality to the almost final result. ## What it does {#what-it-does} `imageLinkWrap = 1` If set to True (`= 1`) then this function attaches a link to an image that opens a special view of the image. By default the link points to the a "showpic" script that knows how to deal with several parameters. The script checks an md5-hash to make sure that the parameters are unchanged. See [Basic example: Create a link to the showpic script](https://docs.typo3.org/permalink/t3tsref:imagelinkwrap-basic-example-showpic@main). There is an alternative. You may set `directImageLink` to True (`= 1`). In that case the link will directly point to the image \- no intermediate script is involved. This method can well be used to display images in a lightbox. See [Basic example: Link directly to the original image](https://docs.typo3.org/permalink/t3tsref:imagelinkwrap-basic-example-directimagelink@main) and the lightbox examples on this page. If `JSwindow` is True (`= 1`) more fancy features are available since the preview now is opened by Javascript. Then the Javascript window title, size, background-color and more can be set to special values. ## Implementation {#implementation} - [imageLinkWrap](https://github.com/TYPO3/typo3/blob/83d36733d7700a49a2d312d09c93ab4d87953e9a/typo3/sysext/frontend/Classes/ContentObject/ContentObjectRenderer.php#L939) in API, - method `imageLinkWrap` in - class `ContentObjectRenderer` in - namespace `namespace TYPO3\CMS\Frontend\ContentObject;` in - file `ContentObjectRenderer.php` in - folder `typo3/sysext/frontend/Classes/ContentObject`. ## Examples for imageLinkWrap {#examples-for-imagelinkwrap} ### Basic example: Create a link to the showpic script {#basic-example-create-a-link-to-the-showpic-script} **EXT:site_package/Configuration/Sets/Main/setup.typoscript** ```typoscript 10 = IMAGE 10 { # point to the image file = fileadmin/demo/lorem_ipsum/images/a4.jpg # make it rather small file.width = 80 # add a link to tx_cms_showpic.php that shows the original image imageLinkWrap = 1 imageLinkWrap { enable = 1 # JSwindow = 1 } } ``` ### Basic example: Link directly to the original image {#basic-example-link-directly-to-the-original-image} **EXT:site_package/Configuration/Sets/Main/setup.typoscript** ```typoscript 10 = IMAGE 10 { file = fileadmin/demo/lorem_ipsum/images/a4.jpg file.width = 80 imageLinkWrap = 1 imageLinkWrap { enable = 1 # link directly to the image directImageLink = 1 # JSwindow = 1 } } ``` ### Example: Larger display in a popup window {#example-larger-display-in-a-popup-window} **EXT:site_package/Configuration/Sets/Main/setup.typoscript** ```typoscript page = PAGE page.10 = IMAGE page.10 { # the relative path to the image # find the images in the 'lorem_ipsum' extension an copy them here file = fileadmin/demo/lorem_ipsum/images/b1.jpg # let's make the normal image small file.width = 80 # yes, we want to have a preview link on the image imageLinkWrap = 1 imageLinkWrap { # must be TRUE for anything to happen enable = 1 # "m" = at most 400px wide - keep proportions width = 400m # "m" = at most 300px high - keep proportions height = 300 # let's use fancy Javascript features JSwindow = 1 # black background bodyTag = # place a Javascript "close window" link onto the image wrap = | # let there be a new and unique window for each image JSwindow.newWindow = 1 # make the preview window 30px wider and 20px higher # than what the image requires JSwindow.expand = 30,20 } } ``` ### Example: Printlink {#example-printlink} **EXT:site_package/Configuration/Sets/Main/setup.typoscript** ```typoscript 5 = IMAGE 5 { file = fileadmin/images/printlink.png imageLinkWrap = 1 imageLinkWrap { enable = 1 typolink { target = _blank parameter.data = page:alias // page:uid additionalParams = &type=98 } } altText = print version titleText = Open print version of this page in a new window params = class="printlink" } ``` ### Example: Images in lightbox "fancybox" {#example-images-in-lightbox-fancybox} Let's follow this [lightbox.ts example](https://github.com/georgringer/modernpackage/blob/master/Resources/Private/TypoScript/content/lightbox.ts) and use [fancybox](http://fancybox.net): **EXT:site_package/Configuration/Sets/Main/setup.typoscript** ```typoscript # Add the CSS and JS files page { includeCSS { file99 = fileadmin/your-fancybox.css } includeJSFooter { fancybox = fileadmin/your-fancybox.js } } # Change the default rendering of images to match lightbox requirements tt_content.image.20.1.imageLinkWrap { JSwindow = 0 directImageLink = 1 linkParams.ATagParams { dataWrap = class= "lightbox" data-fancybox-group="lightbox{field:uid}" } } ```