# Image:
# also used for rendering 'textpic' type
#
# CType: image
tt_content.image = COA
tt_content.image.10 = < lib.stdheader
tt_content.image.20 = USER
tt_content.image.20 {
userFunc = TYPO3\CMS\CssStyledContent\Controller\CssStyledContentController->render_textpic
preRenderRegisters {
// To optimize performance we load all image captions into a register
// because we need to know if at least one image has a caption at
// multiple places to determine the render method.
allImageCaptions.cObject = FILES
allImageCaptions.cObject {
references {
table = tt_content
fieldName = image
}
renderObj = TEXT
renderObj.data = file:current:description
}
}
# Image source
imgList.cObject = FILES
imgList.cObject {
references < tt_content.image.20.preRenderRegisters.allImageCaptions.cObject.references
renderObj = TEXT
renderObj.data = file:current:uid
renderObj.wrap = |,
}
imgPath = uploads/pics/
// This needs to be set because the UID list generated in the imgList
// setting contains UIDs of file references (not files).
imgListContainsReferenceUids = 1
# Single image rendering
imgObjNum = 1
1 {
file.import.data = file:current:uid
file.treatIdAsReference = 1
file.width.field = imagewidth
layoutKey = {$styles.content.imgtext.layoutKey}
layout {
default {
element =
}
srcset {
element =
source = |*|###SRC### ###SRCSETCANDIDATE###,|*|###SRC### ###SRCSETCANDIDATE###
}
picture {
element = ###SOURCECOLLECTION###
source =
}
data {
element =
source = data-###DATAKEY###="###SRC###"
source.noTrimWrap = ; ;;
source.noTrimWrap.splitChar = ;
}
}
# Default sourceCollection as an example
# Please write your own sourceCollection (highly recommended)
sourceCollection {
small {
width = 200
srcsetCandidate = 600w
mediaQuery = (max-device-width: 600px)
dataKey = small
}
smallRetina {
if {
value = {$styles.content.imgtext.layoutKey}
equals = default
negate = 1
}
width = 200
pixelDensity = 2
srcsetCandidate = 600w 2x
mediaQuery = (max-device-width: 600px) AND (min-resolution: 192dpi)
dataKey = smallRetina
}
}
imageLinkWrap = 1
imageLinkWrap {
bodyTag =
wrap = |
width = {$styles.content.imgtext.linkWrap.width}
height = {$styles.content.imgtext.linkWrap.height}
effects = {$styles.content.imgtext.linkWrap.effects}
crop.data = file:current:crop
JSwindow = 1
JSwindow.newWindow = {$styles.content.imgtext.linkWrap.newWindow}
JSwindow.if.isFalse = {$styles.content.imgtext.linkWrap.lightboxEnabled}
directImageLink = {$styles.content.imgtext.linkWrap.lightboxEnabled}
enable.field = image_zoom
enable.ifEmpty.typolink.parameter.data = file:current:link
enable.ifEmpty.typolink.returnLast = url
typolink.parameter.data = file:current:link
typolink.target < lib.parseTarget
typolink.target =
typolink.target.override = {$styles.content.links.target}
typolink.extTarget < lib.parseTarget
typolink.extTarget =
typolink.extTarget.override = {$styles.content.links.extTarget}
linkParams.ATagParams.dataWrap = class="{$styles.content.imgtext.linkWrap.lightboxCssClass}" rel="{$styles.content.imgtext.linkWrap.lightboxRelAttribute}"
}
altText = TEXT
altText {
data = file:current:alternative
stripHtml = 1
}
titleText < .altText
titleText.data = file:current:title
longdescURL {
parameter {
field = longdescURL
split {
token {
char = 10
}
returnKey.data = register : IMAGE_NUM_CURRENT
}
}
}
emptyTitleHandling = {$styles.content.imgtext.emptyTitleHandling}
titleInLink = {$styles.content.imgtext.titleInLink}
titleInLinkAndImg = {$styles.content.imgtext.titleInLinkAndImg}
}
textPos.field = imageorient
maxW = {$styles.content.imgtext.maxW}
maxW.override.data = register:maxImageWidth
maxWInText = {$styles.content.imgtext.maxWInText}
maxWInText.override.data = register:maxImageWidthInText
equalH.field = imageheight
cols.field = imagecols
border.field = imageborder
caption {
1 = COA
1 {
1 = TEXT
1 {
data = file:current:description
required = 1
htmlSpecialChars = 1
br = 1
}
}
}
// This needs to be set to TRUE because otherwise render_textpic will
// render a global caption which we do not have.
imageTextSplit = 1
borderThick = {$styles.content.imgtext.borderThick}
borderClass = {$styles.content.imgtext.borderClass}
colSpace = {$styles.content.imgtext.colSpace}
textMargin = {$styles.content.imgtext.textMargin}
borderSpace = {$styles.content.imgtext.borderSpace}
separateRows = {$styles.content.imgtext.separateRows}
addClasses =
addClassesCol =
addClassesCol.ifEmpty = csc-textpic-firstcol csc-textpic-lastcol
addClassesCol.override = csc-textpic-firstcol |*| |*| csc-textpic-lastcol
addClassesCol.override.if {
isGreaterThan.field = imagecols
value = 1
}
addClassesImage = csc-textpic-first |*| |*| csc-textpic-last
#
imageStdWrap.dataWrap =
|
imageStdWrapNoWidth.wrap =
|
layout = CASE
layout {
key.field = imageorient
# above-center
default = TEXT
default {
value =
###IMAGES######TEXT###
override =
###IMAGES######TEXT###
override {
if {
value = default
equals = {$styles.content.imgtext.layoutKey}
negate = 1
}
}
}
# above-right
1 = TEXT
1 {
value =
###IMAGES######TEXT###
override =
###IMAGES######TEXT###
override {
if {
value = default
equals = {$styles.content.imgtext.layoutKey}
negate = 1
}
}
}
# above-left
2 = TEXT
2 {
value =
###IMAGES######TEXT###
override =
###IMAGES######TEXT###
override {
if {
value = default
equals = {$styles.content.imgtext.layoutKey}
negate = 1
}
}
}
# below-center
8 = TEXT
8 {
value =
###TEXT######IMAGES###
override =
###TEXT######IMAGES###
override {
if {
value = default
equals = {$styles.content.imgtext.layoutKey}
negate = 1
}
}
}
# below-right
9 = TEXT
9 {
value =
###TEXT######IMAGES###
override =
###TEXT######IMAGES###
override {
if {
value = default
equals = {$styles.content.imgtext.layoutKey}
negate = 1
}
}
}
# below-left
10 = TEXT
10 {
value =
###TEXT######IMAGES###
override =
###TEXT######IMAGES###
override {
if {
value = default
equals = {$styles.content.imgtext.layoutKey}
negate = 1
}
}
}
# intext-right
17 = TEXT
17 {
value =
###IMAGES######TEXT###
override =
###IMAGES######TEXT###
override {
if {
value = default
equals = {$styles.content.imgtext.layoutKey}
negate = 1
}
}
}
# intext-left
18 = TEXT
18 {
value =
###IMAGES######TEXT###
override =
###IMAGES######TEXT###
override {
if {
value = default
equals = {$styles.content.imgtext.layoutKey}
negate = 1
}
}
}
# intext-right-nowrap
25 = TEXT
25 {
value =
###IMAGES######TEXT###
override =
###IMAGES######TEXT###
override {
if {
value = default
equals = {$styles.content.imgtext.layoutKey}
negate = 1
}
}
}
# intext-left-nowrap
26 = TEXT
26 {
value =
###IMAGES######TEXT###
override =
###IMAGES######TEXT###
override {
if {
value = default
equals = {$styles.content.imgtext.layoutKey}
negate = 1
}
}
}
}
rendering {
# Single image - No caption
singleNoCaption {
# Choose another rendering for special edge cases
fallbackRendering = COA
fallbackRendering {
# Single image - Caption
10 = TEXT
10 {
if {
isTrue.data = register:allImageCaptions
value = 1
equals.data = register:imageCount
}
value = singleCaption
}
# Multiple images and split caption
20 = TEXT
20 {
if {
value = 1
isGreaterThan.data = register:imageCount
isTrue.if.isFalse.data = register:renderGlobalCaption
isTrue.data = register:allImageCaptions
}
value = splitCaption
}
# Multiple images and no caption at all
40 = TEXT
40 {
if {
value = 1
isGreaterThan.data = register:imageCount
isFalse.data = register:allImageCaptions
}
value = noCaption
}
}
allStdWrap {
dataWrap =
|
dataWrap {
override =
|
override {
if {
value = html5
equals.data = TSFE:config|config|doctype
}
}
}
innerWrap.cObject = CASE
innerWrap.cObject {
key.field = imageorient
# above-center
0 = TEXT
0.value =
caption.wrap = |
}
noCaption {
# Multiple images and no caption at all
fallbackRendering < tt_content.image.20.rendering.singleNoCaption.fallbackRendering.10
allStdWrap {
dataWrap =
|
dataWrap {
override =
|
override {
if {
value = html5
equals.data = TSFE:config|config|doctype
}
}
}
}
singleStdWrap {
wrap =
|
wrap {
override = |
}
}
rowStdWrap.wrap =
|
lastRowStdWrap.wrap =
|
columnStdWrap.wrap =
|
}
singleCaption {
# Just one image with a caption
fallbackRendering < tt_content.image.20.rendering.singleNoCaption.fallbackRendering.10
singleStdWrap {
wrap =