Attention

TYPO3 v11 has reached end-of-life as of October 31th 2024 and is no longer being maintained. Use the version switcher on the top left of this page to select documentation for a supported version of TYPO3.

Need more time before upgrading? You can purchase Extended Long Term Support (ELTS) for TYPO3 v10 here: TYPO3 ELTS.

imageLinkWrap

Properties

enable

Property: imageLinkWrap.enable
Data type: :ref:`data-type-boolean
Default: 0
Description: Whether or not to link the image. Must be set to True to make imageLinkWrap do anything at all.

file

Property: imageLinkWrap.file
Data type: stdWrap
Description: Apply stdWrap functionality to the file path.

width

Property: imageLinkWrap.width
Data type: positive integer / stdWrap
Default: 0
Description: 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

Property: imageLinkWrap.height
Data type: positive integer / stdWrap
Default: 0
Description: 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

Property: imageLinkWrap.effects
Data type: like EFFECT of GIFBUILDER
Default: 0
Description: Apply image effects to the preview image.

Example for effects

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

Property: imageLinkWrap.sample
Data type: positive integer / stdWrap
Default: 0
Description: 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

Property: imageLinkWrap.title
Data type: string / stdWrap
Description: Specifies the html-page-title of the preview window. Needs JSwindow = 1.

bodyTag

Property: imageLinkWrap.bodyTag
Data type: tag / stdWrap
Description: This is the <body>-tag of the preview window. Needs JSwindow = 1.

Example setting a bodytag for the preview window

# "onBlur" closes the window automatically if it looses focus
imageLinkWrap.JSwindow = 1
imageLinkWrap.bodyTag (
    <body class="jsWindow someOtherClass"
          onBlur="self.close()">
)

wrap

Property: imageLinkWrap.bodyTag
Data type: wrap
Description: This wrap is placed around the <img>-tag in the preview window. Needs JSwindow = 1.

target

Property: imageLinkWrap.target
Data type: target / stdWrap
Default: thePicture
Description: This specifies the target attribute of the link. The attribute will only be created if the current Doctype allows it. Needs JSwindow = 1. Default: 'thePicture'.

Example: Use an alternative target for the JavaScript Window

# (1) to produce:  <a target="preview" ... >
imageLinkWrap.target = preview

# (2) to use a new window for each image
# let there be:  <a target="<hash-code>" ... >
imageLinkWrap.JSwindow = 1
imageLinkWrap.JSwindow.newWindow = 1

JSwindow

Property: imageLinkWrap.JSwindow
Data type: boolean / stdWrap
Default: 0
Description: 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

Property: imageLinkWrap.JSwindow.expand
Data type: x, y / stdWrap
Default: 0
Description: x and x are of data type integer. 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

Property: imageLinkWrap.JSwindow.expand
Data type: boolean / stdWrap
Default: 0
Description: If the Doctype allows the target 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 target 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

Property: imageLinkWrap.JSwindow.altUrl
Data type: string / stdWrap
Description: 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

Property: imageLinkWrap.JSwindow.altUrl_noDefaultParams
Data type: boolean / stdWrap
Default: 0
Description: 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

Property: imageLinkWrap.typolink
Data type: typolink / stdWrap
Description: If this returns anything it will be used as link and override everything else.

directImageLink

Property: imageLinkWrap.directImageLink
Data type: boolean / stdWrap
Default: 0
Description: 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

Property: imageLinkWrap.linkParams
Data type: typolink / stdWrap
Description: When the direct link for the preview image is calculated all attributes of linkParams are used as settings for the typolink function. In other words: Use the same parameters for linkParams that you would use for typolink. Needs JSwindow = 0.

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. More complete examples are Example: Images in lightbox "fancybox" and Example: Images in lightbox "TopUp".

JSwindow = 0
directImageLink = 1
linkParams.ATagParams.dataWrap (
  class="{$styles.content.imgtext.linkWrap.lightboxCssClass}"
  rel="{$styles.content.imgtext.linkWrap.lightboxRelAttribute}"
)

stdWrap

Property: imageLinkWrap.stdWrap
Data type: stdWrap
Description: This adds stdWrap functionality to the almost final result.

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.

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 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

imageLinkWrap 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

Basic example: Create a link to the showpic script

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

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

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 = <body style="background-color:black; margin:0; padding:0;">
      # place a Javascript "close window" link onto the image
      wrap = <a href="javascript:close();"> | </a>
      # 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

5 = IMAGE
5 {
   file = fileadmin/images/printlink.png
   imageLinkWrap = 1
   imageLinkWrap {
      enable = 1
      typolink {
         target = _blank
         parameter.data = page:alias // TSFE:id
         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"

Let's follow this lightbox.ts example and use fancybox:

# 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}"
   }
}

Example: Images in lightbox "TopUp"

In this blog post (German) Paul Lunow shows a way to integrate the jQuery TopUp lightbox:

tt_content.image.20.1.imageLinkWrap >
tt_content.image.20.1.imageLinkWrap = 1
tt_content.image.20.1.imageLinkWrap {
   enable = 1
   typolink {
      # directly link to the recent image
      parameter.cObject = IMG_RESOURCE
      parameter.cObject.file.import.data = TSFE:lastImageInfo|origFile
      parameter.cObject.file.maxW = {$styles.content.imgtext.maxW}
      parameter.override.listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
      title.field = imagecaption // title
      title.split.token.char = 10
      title.if.isTrue.field = imagecaption // header
      title.split.token.char = 10
      title.split.returnKey.data = register : IMAGE_NUM_CURRENT
      parameter.cObject = IMG_RESOURCE
      parameter.cObject.file.import.data = TSFE:lastImageInfo|origFile
      ATagParams = target="_blank"
   }
}