Hallo zusammen,
ab und an muss ich doch auch mal eine Frage in
der Raum stellen :o
Ich lade via CONTENT die Bilder aus der Spalte "Rand" und lasse
diese auf meiner Seite anzeigen.
Soweit so gut.
Leider muss ich diese nun auch noch verlinken. Dazu bietet sich ja
das Linkfeld beim Seitentyp Images an.
Mein Problem ist nur, dass meine Version nur ein und den selben
Link bei allen Bildern setzen kann 😢
Hier mein TS:
temp.contents2 = CONTENT
temp.contents2 {
table = tt_content
select.where = colPos = 0
select.languageField = sys_language_uid
renderObj = COA
renderObj {
10 = TEXT
10.field = header
10.wrap = <div class="text"> |
20 = TEXT
20.field = bodytext
20.wrap = |</div>
30 = TEXT
30 {
field = image
split {
token = ,
cObjNum = 1
1 {
10 = IMAGE
10 {
file = fileadmin/clear.gif
file.import = uploads/pics/
file.import.current = 1
stdWrap.typolink.parameter.field = image_link
}
}
}
wrap = <div class="images">|</div>
}
}
wrap = <div class="additional">|</div>
}
Ich müsste also für den Typolink das Feld "image_link" analog zum Feld "image"
per split aufspalten und jeweils den zugehörigen Link für das Bild verwenden.
Nur leider habe ich keine Ahnung, wie ich das anstellen soll.
Hat da jemand eine Idee?
MfG,
Chris
Hallo Chris.
Ein guter Weg ist sehr oft, mal zu schauen, wie das im Core gelöst wird. Rund um Content-Rendering ist das ein Blick in EXT:css_styled_content bzw. deren Static Templates:
*****************
# CType: image
# *****************
# (also used for rendering 'textpic' type):
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
imgPath = uploads/pics/
# 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 = {$styles.content.links.target}
typolink.extTarget = {$styles.content.links.extTarget}
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
}
titleText < .altText
titleText.field = titleText
longdescURL < .altText
longdescURL.field = longdescURL
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 = 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
}
}
# 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}
borderCol = {$styles.content.imgtext.borderColor}
borderThick = {$styles.content.imgtext.borderThick}
borderClass = {$styles.content.imgtext.borderClass}
colSpace = {$styles.content.imgtext.colSpace}
rowSpace = {$styles.content.imgtext.rowSpace}
textMargin = {$styles.content.imgtext.textMargin}
borderSpace = {$styles.content.imgtext.borderSpace}
separateRows = {$styles.content.imgtext.separateRows}
addClasses =
addClassesImage =
addClassesImage.ifEmpty = csc-textpic-firstcol csc-textpic-lastcol
addClassesImage.override = csc-textpic-firstcol |*| |*| csc-textpic-lastcol
addClassesImage.override.if {
isGreaterThan.field = imagecols
value = 1
}
#
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><div class="csc-textpic-clear"><!-- --></div>
# above-right
1 = TEXT
1.value = <div class="csc-textpic csc-textpic-right csc-textpic-above###CLASSES###">###IMAGES######TEXT###</div><div class="csc-textpic-clear"><!-- --></div>
# above-left
2 = TEXT
2.value = <div class="csc-textpic csc-textpic-left csc-textpic-above###CLASSES###">###IMAGES######TEXT###</div><div class="csc-textpic-clear"><!-- --></div>
# below-center
8 = TEXT
8.value = <div class="csc-textpic csc-textpic-center csc-textpic-below###CLASSES###">###TEXT######IMAGES###</div><div class="csc-textpic-clear"><!-- --></div>
# below-right
9 = TEXT
9.value = <div class="csc-textpic csc-textpic-right csc-textpic-below###CLASSES###">###TEXT######IMAGES###</div><div class="csc-textpic-clear"><!-- --></div>
# below-left
10 = TEXT
10.value = <div class="csc-textpic csc-textpic-left csc-textpic-below###CLASSES###">###TEXT######IMAGES###</div><div class="csc-textpic-clear"><!-- --></div>
# intext-right
17 = TEXT
17.value = <div class="csc-textpic csc-textpic-intext-right###CLASSES###">###IMAGES######TEXT###</div>
17.override = <div class="csc-textpic csc-textpic-intext-right###CLASSES###">###IMAGES######TEXT###</div><div class="csc-textpic-clear"><!-- --></div>
17.override.if.isTrue = {$styles.content.imgtext.addIntextClearer}
# intext-left
18 = TEXT
18.value = <div class="csc-textpic csc-textpic-intext-left###CLASSES###">###IMAGES######TEXT###</div>
18.override = <div class="csc-textpic csc-textpic-intext-left###CLASSES###">###IMAGES######TEXT###</div><div class="csc-textpic-clear"><!-- --></div>
18.override.if.isTrue = {$styles.content.imgtext.addIntextClearer}
# intext-right-nowrap
25 = TEXT
25.value = <div class="csc-textpic csc-textpic-intext-right-nowrap###CLASSES###">###IMAGES###<div style="margin-right:{register:rowWidthPlusTextMargin}px;">###TEXT###</div></div><div class="csc-textpic-clear"><!-- --></div>
25.insertData = 1
# intext-left-nowrap
26 = TEXT
26.value = <div class="csc-textpic csc-textpic-intext-left-nowrap###CLASSES###">###IMAGES###<div style="margin-left:{register:rowWidthPlusTextMargin}px;">###TEXT###</div></div><div class="csc-textpic-clear"><!-- --></div>
26.insertData = 1
}
rendering {
dl {
# Choose another rendering for special edge cases
fallbackRendering = COA
fallbackRendering {
# Just one image without a caption => don't need the dl-overhead, use the "simple" rendering
10 = TEXT
10 {
if {
isFalse.field = imagecaption
value = 1
equals.data = register:imageCount
}
value = simple
}
# Multiple images and one global caption => "ul"
20 = TEXT
20 {
if {
value = 1
isGreaterThan.data = register:imageCount
isTrue.if.isTrue.data = register:renderGlobalCaption
isTrue.field = imagecaption
}
value = ul
}
# Multiple images and no caption at all => "ul"
30 = TEXT
30 {
if {
value = 1
isGreaterThan.data = register:imageCount
isFalse.field = imagecaption
}
value = ul
}
}
imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow" style="width:{register:rowwidth}px;"> | </div>
imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last" style="width:{register:rowwidth}px;"> | </div>
noRowsStdWrap.wrap =
oneImageStdWrap.dataWrap = <dl class="csc-textpic-image###CLASSES###" style="width:{register:imagespace}px;"> | </dl>
imgTagStdWrap.wrap = <dt> | </dt>
editIconsStdWrap.wrap = <dd> | </dd>
caption {
required = 1
wrap = <dd class="csc-textpic-caption"> | </dd>
}
}
ul {
# Just one image without a caption => don't need the ul-overhead, use the "simple" rendering
fallbackRendering < tt_content.image.20.rendering.dl.fallbackRendering.10
imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow" style="width:{register:rowwidth}px;"><ul> | </ul></div>
imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last" style="width:{register:rowwidth}px;"><ul> | </ul></div>
noRowsStdWrap.wrap = <ul> | </ul>
oneImageStdWrap.dataWrap = <li class="csc-textpic-image###CLASSES###" style="width:{register:imagespace}px;"> | </li>
imgTagStdWrap.wrap =
editIconsStdWrap.wrap = <div> | </div>
caption.wrap = <div class="csc-textpic-caption"> | </div>
}
div {
# Just one image without a caption => don't need the div-overhead, use the "simple" rendering
fallbackRendering < tt_content.image.20.rendering.dl.fallbackRendering.10
imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow" style="width:{register:rowwidth}px;"> | </div>
imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last" style="width:{register:rowwidth}px;"> | </div>
noRowsStdWrap.wrap =
oneImageStdWrap.dataWrap = <div class="csc-textpic-image###CLASSES###" style="width:{register:imagespace}px;"> | </div>
imgTagStdWrap.wrap = <div> | </div>
editIconsStdWrap.wrap = <div> | </div>
caption.wrap = <div class="csc-textpic-caption"> | </div>
}
simple {
imageRowStdWrap.dataWrap = |
imageLastRowStdWrap.dataWrap = |
noRowsStdWrap.wrap =
oneImageStdWrap.dataWrap = |
imgTagStdWrap.wrap = |
editIconsStdWrap.wrap = |
caption.wrap = <div class="csc-textpic-caption"> | </div>
imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap csc-textpic-single-image" style="width:{register:totalwidth}px;"> | </div>
imageStdWrapNoWidth.wrap = <div class="csc-textpic-imagewrap csc-textpic-single-image"> | </div>
}
}
renderMethod = dl
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:
}
Der für Dich interessanteste Teil dürfte sein:
tt_content.image.20.1.imgaeLinkWrap {
typolink.parameter.field = image_link
typolink.parameter.listNum.splitChar = 10
typolink.parameter.listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
typolink.target = {$styles.content.links.target}
typolink.extTarget = {$styles.content.links.extTarget}
}
Viele Grüße
Julian
Oi, danke für den Tipp,
werde mit das in zukunft zu herzen
nehmen.
Habe jetzt mal den diesen Teil getestet:
30 = USER
30 {
userFunc = tx_cssstyledcontent_pi1->render_textpic
# Image source
imgList.field = image
imgPath = uploads/pics/
# 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 = {$styles.content.links.target}
typolink.extTarget = {$styles.content.links.extTarget}
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
}
titleText < .altText
titleText.field = titleText
longdescURL < .altText
longdescURL.field = longdescURL
emptyTitleHandling = {$styles.content.imgtext.emptyTitleHandling}
titleInLink = {$styles.content.imgtext.titleInLink}
titleInLinkAndImg = {$styles.content.imgtext.titleInLinkAndImg}
}
}
Das funktioniert soweit, dass alle Bilder auch korrekt verlinkt sind, allerdings in ein Tabellenkonstrukt gewrappt.
Würde mich selbst nicht stören, aber der Kunde besteht darauf Tabellen zu meiden wg. SEO ( hat dafür extra einen *Werbefachmann* bezahlt, der beharrt darauf keine Tabellen zu verwenden, habe hier leider keinen Einfluss :-( )
Wenn ich aber mein Bestehendes Skript anpasse, funktionieren die Links nicht mehr:
30 = TEXT
30 {
field = image
split {
token = ,
cObjNum = 1
1 {
10 = IMAGE
10 {
file = fileadmin/clear.gif
file.import = uploads/pics/
file.import.current = 1
imageLinkWrap.enable = 1
imageLinkWrap.typolink.parameter {
field = image_link
listNum.splitChar = 10
listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
}
}
}
}
wrap = <div class="images">|</div>
}
Wenn ich aus imageLinkWrap wieder stdWrap mache,
sind alle Bilder mit dem ersten Link verlinkt.
Hat mir noch jemand einen Rat? Bevor ich mir die Mühe mache und das ganze mit PHP löse?
Ist Dein Objekt 30 alles, was da definiert ist, oder nur ein Ausschnitt?
Wenn das alles ist, dann fehlt der userFunc etwas Input, wie es Bilder rendern soll, sodass es auf das alte Tabellenkonstrukt vor den CSS styled content-Zeiten zurückfällt. Wenn Du den Block rendering und die Eigenschaft renderMethod mit angibst, sollte es klappen.
Vielen vielen Dank für die guten Tipps!
Habe festgestellt, wenn ich rendering angebe, bekomme ich keine Inhalte.
Das liegt wohl daran, dass damit auch der "layout" Teil benötigt wird.
Für alle die es interessiert, hier mein TS-Teil für Bild-links ohne Table, Div etc.:
30 = USER
30 {
userFunc = tx_cssstyledcontent_pi1->render_textpic
# Image source
imgList.field = image
imgPath = uploads/pics/
# 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 = {$styles.content.links.target}
typolink.extTarget = {$styles.content.links.extTarget}
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
}
titleText < .altText
titleText.field = titleText
longdescURL < .altText
longdescURL.field = longdescURL
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 = 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
}
}
captionAlign.field = imagecaption_position
imageTextSplit = {$styles.content.imgtext.imageTextSplit}
borderCol = {$styles.content.imgtext.borderColor}
borderThick = {$styles.content.imgtext.borderThick}
borderClass = {$styles.content.imgtext.borderClass}
colSpace = {$styles.content.imgtext.colSpace}
rowSpace = {$styles.content.imgtext.rowSpace}
textMargin = {$styles.content.imgtext.textMargin}
borderSpace = {$styles.content.imgtext.borderSpace}
layout = CASE
layout {
key.field = imageorient
# above-center
default = TEXT
default.value = ###IMAGES######TEXT###
}
rendering {
simple {
imageRowStdWrap.dataWrap = |
imageLastRowStdWrap.dataWrap = |
noRowsStdWrap.wrap =
oneImageStdWrap.dataWrap = |
imgTagStdWrap.wrap = |
editIconsStdWrap.wrap = |
caption.wrap =|
imageStdWrap.dataWrap = |
imageStdWrapNoWidth.wrap = |
}
}
renderMethod = simple
}
Evtl. sind ein- zwei Einstellungen zuviel bzw. unnötig, wenn jemand dasd ganze etwas strippen kann darf er das gerne tun.
Der HTML output sieht dann etwa so aus:
<a href='URL-Je-Zeile-wie-angegeben'>
<img src='DASBILD'>
</a>
<a href='URL-Je-Zeile-wie-angegeben'>
<img src='DASBILD'>
</a>
Das kann man dann wie gewünscht in einen Marker packen o.ä.