Attention
TYPO3 v8 has reached its end-of-life March 31st, 2020 and is not maintained by the community anymore. Looking for a stable version? Use the version switch on the top left.
There is no further ELTS support. It is recommended that you upgrade your project and use a supported version of TYPO3.
imageLinkWrap¶
Properties¶
Property |
Data types |
stdWrap |
Default |
---|---|---|---|
|
yes |
0 |
|
enable = |
yes |
0 |
|
file = |
yes |
||
width = |
yes |
||
height = |
yes |
||
effects = |
like EFFECT of GIFBUILDER |
yes |
|
sample = |
yes |
0 |
|
yes |
|||
title = |
yes |
||
bodyTag = |
yes |
||
wrap = |
(?) |
||
target = |
yes |
"thePicture" |
|
JSwindow = |
yes |
||
|
yes |
||
yes |
|||
yes |
|||
(?) |
0 |
||
typolink = |
like typolink |
(?) |
|
yes |
0 |
||
any of the options of typolink |
(?) |
||
stdWrap = |
yes |
Property details¶
enable¶
imageLinkWrap.enable =
boolean
Whether or not to link the image. Must be set to True to make
imageLinkWrap
do anything at all.
width¶
imageLinkWrap.width =
positive integer
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¶
imageLinkWrap.height =
positive integer
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¶
imageLinkWrap.effects =
like EFFECT of
GIFBUILDER
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¶
imageLinkWrap.sample =
boolean
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.
alternativeTempPath¶
imageLinkWrap.alternativeTempPath =
path
This is used to specify an alternative path to be used for temporary images.
title¶
imageLinkWrap.title =
string
Specifies the html-page-title of the preview window.
Needs JSwindow = 1
.
bodyTag¶
imageLinkWrap.bodyTag =
<tag>
This is the <body>
-tag of the preview window.
Needs JSwindow = 1
.
Example:
# with all margins set to zero the window will exactly fit the image.
# "onBlur" closes the window automatically if it looses focus
imageLinkWrap.JSwindow = 1
imageLinkWrap.bodyTag (
<body style="background-color:black; margin:0; padding:0;"
bgColor="#000", leftmargin="0" topmargin="0"
marginwidth="0" marginheight="0"
onBlur="self.close()"
>
)
wrap¶
imageLinkWrap.wrap =
wrap
This wrap is placed around the <img>
-tag in the preview window.
Needs JSwindow = 1
.
target¶
imageLinkWrap.target =
target
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'.
Examples:
# (1) to produce: <a target="preview" ... >
imageLinkWrap.target = preview
# (2) to use the default: <a target="thePicture" ...>
// do nothing - use the built in default value of ".target"
# (3) to use a new window for each image
# let there be: <a target="<hash-code>" ... >
imageLinkWrap.JSwindow = 1
imageLinkWrap.JSwindow.newWindow = 1
JSwindow¶
imageLinkWrap.JSwindow =
boolean
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¶
imageLinkWrap.JSwindow.expand =
x
,
y
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¶
imageLinkWrap.JSwindow.newWindow =
boolean
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
(:typoscript:` = 1`) then a unique hash value is used as target
value for each image. This garantees that each image is opened in a new
window.
JSwindow.altUrl¶
imageLinkWrap.JSwindow.altUrl =
string
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¶
imageLinkWrap.JSwindow.altUrl_noDefaultParams =
boolean
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¶
imageLinkWrap.typolink =
like typolink
If this returns anything it will be used as link and override everything else.
directImageLink¶
imageLinkWrap.directImageLink =
boolean
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¶
imageLinkWrap.linkParams =
any of the options of
typolink
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:
JSwindow = 0
directImageLink = 1
linkParams.ATagParams.dataWrap (
class="{$styles.content.imgtext.linkWrap.lightboxCssClass}"
rel="{$styles.content.imgtext.linkWrap.lightboxRelAttribute}"
)
This way it is easy 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".
What it does¶
imageLinkWrap = 1
If set to True 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
(:typoscript:` = 1`). In that case the link will directly point to the image
- no intermediate is script 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 (:typoscript:` = 1`) more fancy
features are available since the preview now is opened by Javascript.
Then the window title, size, background-color and more can be set to
special values.
Implementation¶
imageLinkWrap in API,
method
imageLinkWrap
inclass
ContentObjectRenderer
innamespace
namespace TYPO3\CMS\Frontend\ContentObject;
infile
ContentObjectRenderer.php
infolder
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" rel="fancybox{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"
}
}