Hallo zusammen,
ich möchte für eine mobile Site photoswipe nutzen. Als html-Inhaltsobjekt funktioniert das auch wunderbar. Ich möchte allerdings nicht per Hand für jedes Bild eine html-Zeile erstellen sondern möglichst automatisiert. Der html-ZIEL-Code sieht folgendermassen aus:
<ul id="Gallery" class="gallery">
<li><a href="fileadmin/images/mobile/full/1.JPG" rel="external"><img src="fileadmin/images/mobile/thumbs/DSC_0110.JPG" alt="Image 01" /></a></li>
<li><a href="fileadmin/images/mobile/full/2.JPG" rel="external"><img src="fileadmin/images/mobile/thumbs/DSC_0111.JPG" alt="Image 02" /></a></li>
</ul>
Ich habe nun in ein für die entsprechende Seite erstelltes Template ins setup den Code aus tt_content reinkopiert, um diesen dort entsprechend modifizieren zu können:
tt_content.image >
tt_content.image = COA
tt_content.image.10 = < lib.stdheader
tt_content.image.20 = USER
tt_content.image.20 {
userFunc = tx_cssstyledcontent_pi1->render_textpic
# Image source
imgList.field = image
imgList.override.field = image_fileUids
imgPath = fileadmin/images/mobile/thumbs/
# Single image rendering
imgObjNum = 1
1 {
file.import.current = 1
file.width.field = imagewidth
imageLinkWrap = 1
imageLinkWrap {
bodyTag = <body style="margin:0; background:#fff;">
wrap = <a href="javascript:close();"> | </a>
width = {$styles.content.imgtext.linkWrap.width}
height = {$styles.content.imgtext.linkWrap.height}
effects = {$styles.content.imgtext.linkWrap.effects}
#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.field = image_link
enable.ifEmpty.typolink.parameter.listNum.splitChar = 10
enable.ifEmpty.typolink.parameter.listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
enable.ifEmpty.typolink.returnLast = url
typolink.parameter.field = image_link
typolink.parameter.listNum.splitChar = 10
typolink.parameter.listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
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}
typolink.extTarget.override = http://atcev.no-ip.org/index.php?id=104
linkParams.ATagParams.dataWrap = class="{$styles.content.imgtext.linkWrap.lightboxCssClass}" rel="{$styles.content.imgtext.linkWrap.lightboxRelAttribute}"
}
altText = TEXT
altText {
field = altText
stripHtml = 1
split.token.char = 10
split.token.if.isTrue = {$styles.content.imgtext.imageTextSplit}
split.returnKey.data = register : IMAGE_NUM_CURRENT
}
params =
params {
override {
dataWrap = aria-describedby="csc-longdesc-{field:uid}-{register:IMAGE_NUM_CURRENT}"
if {
isTrue {
cObject = TEXT
cObject {
field = imagecaption
required = 1
parseFunc =< lib.parseFunc
split {
token {
char = 10
if.isPositive = {$styles.content.imgtext.imageTextSplit} + {$styles.content.imgtext.captionSplit}
}
returnKey.data = register : IMAGE_NUM_CURRENT
}
}
}
isFalse = 1
isFalse {
if {
isFalse {
cObject = TEXT
cObject {
field = longdescURL
split {
token {
char = 10
}
returnKey.data = register : IMAGE_NUM_CURRENT
}
}
}
}
}
isPositive = {$styles.content.imgtext.imageTextSplit} + {$styles.content.imgtext.captionSplit}
value = html5
equals.data = TSFE:config|config|doctype
}
}
}
titleText < .altText
titleText.field = titleText
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
image_compression.field = image_compression
image_effects.field = image_effects
noRows.field = image_noRows
cols.field = imagecols
border.field = imageborder
caption {
1 = COA
1 {
1 = TEXT
1 {
field = imagecaption
required = 1
parseFunc =< lib.parseFunc
br = 1
split.token.char = 10
split.token.if.isPositive = {$styles.content.imgtext.imageTextSplit} + {$styles.content.imgtext.captionSplit}
split.returnKey.data = register : IMAGE_NUM_CURRENT
}
stdWrap {
required = 1
typolink {
parameter {
field = longdescURL
trim = 1
split {
token {
char = 10
}
returnKey.data = register : IMAGE_NUM_CURRENT
}
if {
value = html5
equals.data = TSFE:config|config|doctype
}
}
ATagParams {
dataWrap = id="csc-longdesc-{field:uid}-{register:IMAGE_NUM_CURRENT}"
}
target = {$styles.content.links.target}
extTarget = {$styles.content.links.extTarget}
}
}
}
}
# captionSplit is deprecated, use imageTextSplit instead
captionSplit = {$styles.content.imgtext.captionSplit}
captionAlign.field = imagecaption_position
# caption/alttext/title/longdescURL splitting
imageTextSplit = {$styles.content.imgtext.imageTextSplit}
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 = <div class="csc-textpic-imagewrap" style="width:{register:totalwidth}px;"> | </div>
imageStdWrapNoWidth.wrap = <div class="csc-textpic-imagewrap"> | </div>
# if noRows is set, wrap around each column:
imageColumnStdWrap.dataWrap = <div class="csc-textpic-imagecolumn" style="width:{register:columnwidth}px;"> | </div>
layout = CASE
layout {
key.field = imageorient
# above-center
default = TEXT
default.value = <div class="csc-textpic csc-textpic-center csc-textpic-above###CLASSES###">###IMAGES######TEXT###</div>
# above-right
1 = TEXT
1.value = <div class="csc-textpic csc-textpic-right csc-textpic-above###CLASSES###">###IMAGES######TEXT###</div>
# above-left
2 = TEXT
2.value = <div class="csc-textpic csc-textpic-left csc-textpic-above###CLASSES###">###IMAGES######TEXT###</div>
# below-center
8 = TEXT
8.value = <div class="csc-textpic csc-textpic-center csc-textpic-below###CLASSES###">###TEXT######IMAGES###</div>
# below-right
9 = TEXT
9.value = <div class="csc-textpic csc-textpic-right csc-textpic-below###CLASSES###">###TEXT######IMAGES###</div>
# below-left
10 = TEXT
10.value = <div class="csc-textpic csc-textpic-left csc-textpic-below###CLASSES###">###TEXT######IMAGES###</div>
# intext-right
17 = TEXT
17.value = <div class="csc-textpic csc-textpic-intext-right###CLASSES###">###IMAGES######TEXT###</div>
# intext-left
18 = TEXT
18.value = <div class="csc-textpic csc-textpic-intext-left###CLASSES###">###IMAGES######TEXT###</div>
# intext-right-nowrap
25 = TEXT
25.value = <div class="csc-textpic csc-textpic-intext-right-nowrap###CLASSES###">###IMAGES######TEXT###</div>
# intext-left-nowrap
26 = TEXT
26.value = <div class="csc-textpic csc-textpic-intext-left-nowrap###CLASSES###">###IMAGES######TEXT###</div>
}
rendering {
# Single image - No caption
singleNoCaption {
# Choose another rendering for special edge cases
fallbackRendering = COA
fallbackRendering {
# Single image - Caption
10 = TEXT
10 {
if {
isTrue.field = imagecaption
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.field = imagecaption
}
value = splitCaption
}
# Multiple images and one global caption
30 = TEXT
30 {
if {
value = 1
isGreaterThan.data = register:imageCount
isTrue.if.isTrue.data = register:renderGlobalCaption
isTrue.field = imagecaption
}
value = globalCaption
}
# Multiple images and no caption at all
40 = TEXT
40 {
if {
value = 1
isGreaterThan.data = register:imageCount
isFalse.field = imagecaption
}
value = noCaption
}
}
allStdWrap {
wrap = <ul id="Gallery" class="gallery"> | </ul>
innerWrap.cObject = CASE
innerWrap.cObject {
key.field = imageorient
# above-center
0 = TEXT
0.value = |
# below-center
8 < .0
}
}
singleStdWrap {
wrap = <li> | </li>
#wrap {
# override = <figure class="csc-textpic-image###CLASSES###"> | </figure>
# override {
# if {
# value = html5
# equals.data = TSFE:config|config|doctype
# }
# }
#}
}
rowStdWrap.wrap = |
noRowsStdWrap.wrap = |
lastRowStdWrap.wrap = |
columnStdWrap.wrap = |
imgTagStdWrap.wrap = |
editIconsStdWrap.wrap = <li> | </li>
caption.wrap = |
}
noCaption {
# Multiple images and no caption at all
fallbackRendering < tt_content.image.20.rendering.singleNoCaption.fallbackRendering.10
allStdWrap.wrap = <ul id="Gallery" class="gallery"> | </ul>
singleStdWrap {
wrap = <li> | </li>
#wrap {
# override = <figure class="csc-textpic-image###CLASSES###"> | </figure>
#}
}
#rowStdWrap.wrap = <div class="csc-textpic-imagerow"> | </div>
#noRowsStdWrap.wrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-none"> | </div>
#lastRowStdWrap.wrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"> | </div>
#columnStdWrap.wrap = <div class="csc-textpic-imagecolumn###CLASSES###"> | </div>
}
singleCaption {
# Just one image with a caption
fallbackRendering < tt_content.image.20.rendering.singleNoCaption.fallbackRendering.10
singleStdWrap {
wrap = <li> | </li>
wrap {
#override = <figure class="csc-textpic-image###CLASSES###">|###CAPTION###</figure>
override {
if {
value = html5
equals.data = TSFE:config|config|doctype
}
}
}
}
caption {
required = 1
wrap = <caption class="csc-textpic-caption###CLASSES###"> | </caption>
wrap {
override = <figcaption class="csc-textpic-caption###CLASSES###"> | </figcaption>
override {
if {
value = html5
equals.data = TSFE:config|config|doctype
}
}
}
}
}
splitCaption {
fallbackRendering < tt_content.image.20.rendering.singleNoCaption.fallbackRendering.10
singleStdWrap {
wrap = <div class="csc-textpic-image###CLASSES###"><table>###CAPTION###<tbody><tr><td> | </td></tr></tbody></table></div>
wrap {
override = <figure class="csc-textpic-image###CLASSES###">|###CAPTION###</figure>
override {
if {
value = html5
equals.data = TSFE:config|config|doctype
}
}
}
}
rowStdWrap.wrap = <div class="csc-textpic-imagerow"> | </div>
noRowsStdWrap.wrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-none"> | </div>
lastRowStdWrap.wrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"> | </div>
columnStdWrap.wrap = <div class="csc-textpic-imagecolumn###CLASSES###"> | </div>
caption {
required = 1
wrap = <caption class="csc-textpic-caption###CLASSES###"> | </caption>
wrap {
override = <figcaption class="csc-textpic-caption###CLASSES###"> | </figcaption>
override {
if {
value = html5
equals.data = TSFE:config|config|doctype
}
}
}
}
}
globalCaption {
# Just one image without a caption
fallbackRendering < tt_content.image.20.rendering.singleNoCaption.fallbackRendering.10
allStdWrap {
wrap = <div class="csc-textpic-imagewrap"><table>###CAPTION###<tbody> | </tbody></table></div>
wrap {
override = <figure class="csc-textpic-imagewrap"> | ###CAPTION###</figure>
override {
if {
value = html5
equals.data = TSFE:config|config|doctype
}
}
}
}
singleStdWrap {
wrap = <div class="csc-textpic-image###CLASSES###"> | </div>
wrap {
override = <div class="csc-textpic-image###CLASSES###"> | </div>
}
}
rowStdWrap.wrap = <div class="csc-textpic-imagerow"> | </div>
noRowsStdWrap.wrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-none"> | </div>
lastRowStdWrap.wrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"> | </div>
columnStdWrap.wrap = <div class="csc-textpic-imagecolumn###CLASSES###"> | </div>
caption {
required = 1
wrap = <caption class="csc-textpic-caption"> | </caption>
wrap {
override = <figcaption class="csc-textpic-caption###CLASSES###"> | </figcaption>
override {
if {
value = html5
equals.data = TSFE:config|config|doctype
}
}
}
}
}
}
renderMethod = singleNoCaption
editIcons = tt_content : image [imageorient|imagewidth|imageheight], [imagecols|image_noRows|imageborder],[image_link|image_zoom],[image_compression|image_effects|image_frames],imagecaption[imagecaption_position]
editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.xml:eIcon.images
caption.editIcons = tt_content : imagecaption[imagecaption_position]
caption.editIcons.beforeLastTag=1
caption.editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.xml:eIcon.caption
stdWrap.prefixComment = 2 | Image block:
}
Dies klappt insofern schon gut, als dass ich folgende html-Ausgabe erhalte:
<ul id="Gallery" class="gallery"><li><img src="fileadmin/_processed_/csm_DSC_0110_b2ad490b8b.jpg" width="295" height="198" border="0" alt=""></li>
<li><img src="fileadmin/_processed_/csm_DSC_0111_1c77c44086.jpg" width="295" height="198" border="0" alt=""></li></ul>
Das, was noch fehlt, sind die "richtigen" Links. Hier kommen wir zu meiner Frage:
Wie kann ich die Linkdefinition im Setup des Templates so anpassen, dass ich als html-Ausgabe die o.g. Zielausgabe erhalte? Ich denke in folgendem Bereich müsste ich anpassen:
# Single image rendering
imgObjNum = 1
1 {
file.import.current = 1
file.width.field = imagewidth
imageLinkWrap = 1
imageLinkWrap {
bodyTag = <body style="margin:0; background:#fff;">
wrap = <a href="javascript:close();"> | </a>
width = {$styles.content.imgtext.linkWrap.width}
height = {$styles.content.imgtext.linkWrap.height}
effects = {$styles.content.imgtext.linkWrap.effects}
#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.field = image_link
enable.ifEmpty.typolink.parameter.listNum.splitChar = 10
enable.ifEmpty.typolink.parameter.listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
enable.ifEmpty.typolink.returnLast = url
typolink.parameter.field = image_link
typolink.parameter.listNum.splitChar = 10
typolink.parameter.listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
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}
typolink.extTarget.override = http://atcev.no-ip.org/index.php?id=104
linkParams.ATagParams.dataWrap = class="{$styles.content.imgtext.linkWrap.lightboxCssClass}" rel="{$styles.content.imgtext.linkWrap.lightboxRelAttribute}"
}
altText = TEXT
altText {
field = altText
stripHtml = 1
split.token.char = 10
split.token.if.isTrue = {$styles.content.imgtext.imageTextSplit}
split.returnKey.data = register : IMAGE_NUM_CURRENT
}
params =
params {
override {
dataWrap = aria-describedby="csc-longdesc-{field:uid}-{register:IMAGE_NUM_CURRENT}"
if {
isTrue {
cObject = TEXT
cObject {
field = imagecaption
required = 1
parseFunc =< lib.parseFunc
split {
token {
char = 10
if.isPositive = {$styles.content.imgtext.imageTextSplit} + {$styles.content.imgtext.captionSplit}
}
returnKey.data = register : IMAGE_NUM_CURRENT
}
}
}
isFalse = 1
isFalse {
if {
isFalse {
cObject = TEXT
cObject {
field = longdescURL
split {
token {
char = 10
}
returnKey.data = register : IMAGE_NUM_CURRENT
}
}
}
}
}
isPositive = {$styles.content.imgtext.imageTextSplit} + {$styles.content.imgtext.captionSplit}
value = html5
equals.data = TSFE:config|config|doctype
}
}
}
titleText < .altText
titleText.field = titleText
longdescURL {
parameter {
field = longdescURL
split {
token {
char = 10
}
returnKey.data = register : IMAGE_NUM_CURRENT
}
}
}
Wer kann mir da auf die Sprünge helfen?
Besten Dank schon mal vorab!!