Different image formatting for each column - typo3

i have this code in my main template
tt_content.image.20 {
rendering {
simple {
imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap csc-textpic-single-image icon-server"> | </div>
}
}
}
And it works fine, but i have 4 columns and i need 3 diferent wraps with 3 diferent classes.
My question is how can i make "imageStdWrap.dataWrap" use diferent wrap depending on the column it is in?

Copy tt_content.image.20 on level down and switch it into a CASE.
# save configuration for later use
temp.image < tt_content.image.20
# override with CASE
tt_content.image.20 = CASE
tt_content.image.20 {
# filter by column
key.field = colPos
default < temp.image
# column 0 (middle)
0 < temp.image
0.10.wrap = Hello world ! <br />|
# column 1 (left)
1 < temp.image
1.10.wrap = Hello alpha centaury ! <br />|
}

Related

TYPO3 split different wrap for first line using optionSplit

I am getting the text from the abstract field and splitting it by new line.
What I want is to wrap the first line in an H5 tag and all lines after in P tags.
This is what I have tried:
tt_content.menu.20.102 = HMENU
tt_content.menu.20.102 {
1 = TMENU
1 {
NO = 1
NO {
doNotLinkIt = 1
stdWrap.cObject = COA
stdWrap.cObject {
50 = TEXT
50.stdWrap {
field = abstract
split {
token.char = 10
cObjNum = 1 || 2
1.current = 1
1.wrap = <h5>|</h5>
2.current = 1
2.wrap = <p>|</p>
}
}
}
}
}
}
But it wraps all the lines in H5... How do I make this work?
I found a bug report that mentions this issue here: https://forge.typo3.org/issues/59533
It seems the best workaround that I can see is to instead use listNum
This has the obvious drawback of only working with a limited number of paragraphs but at least it sort of works.
10 = TEXT
10.field = abstract
10.wrap = <h5>|</h5>
10.listNum = 0
10.listNum.splitChar = 10
20 < .10
20.wrap = <p>|</p>
20.listNum = 1
30 < .20
30.listNum = 2
Just a combination of both, the original code and the listNum workaround should do the job. Still have to find a way to get the rest of the first "split" into the second one. So consider this answer to be WIP please. We are still discussing it on our Coders.Care Twitch channel in the TYPO3 service station.
10 = TEXT
10.field = abstract
10.wrap = <h5>|</h5>
10.listNum = 0
10.listNum.splitChar = 10
20 < .10
20.listNum = 1
20.split {
token.char = 10
cObjNum = 1
1.current = 1
1.wrap = <p>|</p>
}

Typo3 Breadcrumb with stdWrap.data possible?

I am new to Typo3 and wanted to have something like this: date / page1 > page2 > page3...
I know how to make a simple breadcrumb but now I wonder how I can put the current date in front of it. When I try the stdWrap.data + stdWrap.dataWrap the breadcrumb doesn't show.
20 = HMENU
20 {
special = rootline
special.range = 0 | -1
stdWrap.data = date : d.m.Y :::
stdWrap.dataWrap = <p> | </p>
//wrap = <p> | </p>
1 = TMENU
1 {
NO = 1
NO.allWrap = | >
CUR = 1
CUR.allWrap = |
}
}
Currently I don't know if I had to write to objects in typoscript for it or if I could do it in once like I tried. Maybe you can hint me to something or explain a simple way. Thanks!
You need to do a proper wrapping.
20.stdWrap.data
is no wrap at all and will be ignored so you might only get an empty p-tag from the stdWrap.dataWrap.
Following your attempt I think you want something like:
20.dataWrap = <p>{date:d.m.Y}</p> |
so I don't get it why you use a p tag to get all in one line.
I would propose a different TypoScript:
lib.breadcrumb = COA
lib.breadcrumb {
stdWrap.wrap = <ul>|</ul>
10 = TEXT
10 {
wrap = <li>|</li>
data = date : U
strftime = %A, %e. %B %Y
}
20 = HMENU
20 ... your TS for the breadcrumb menu
}

TYPO3 Image max width based on column position

I am trying to get the max image width in column 0 to be larger than the default. But I can't get it to work... can anyone help?
This is my (not working) typoscript I have so far:
temp.mW < tt_content.image.20.maxW
tt_content.image.20.maxW >
tt_content.image.20.maxW.cObject = CASE
tt_content.image.20.maxW.cObject {
key.field=colPos
default < temp.mW
0 = TEXT
0.value = 1920
}
I have just found that I had it right, but I also needed to overwrite the override to get it to work:
temp.mW < tt_content.image.20.maxW
tt_content.image.20.maxW >
tt_content.image.20.maxW.cObject = CASE
tt_content.image.20.maxW.cObject {
key.field=colPos
default < temp.mW
0 = TEXT
0.value = 1920
0.override = TEXT
0.override.value = 1920
}
If you are using css_styled_content, here is my solution. Ensure to define also maxWInText.
### max width for each column
tt_content {
# Define max image width of contentelements type=images, for each content column separately
image.20.maxW.cObject = CASE
image.20.maxW.cObject {
key.field = colPos
# 900px - padding (2 x 30px)
default = TEXT
default.value = 840
# normal
0 = TEXT
0 < .default
# left
1 = TEXT
1.value = 165
# right
2 = TEXT
2.value = 155
# 3 border
}
# Define max image width of contentelements type=textWithImages, for each content column separately
/**
* !NOTE:
* This value is simply half the size of tt_content.image.20.maxW.cObject
* Here or otherwise, typoscript prioriCalc can be used to simply halve the values of tt_content.image.20.maxW.
*/
image.20.maxWInText.cObject = CASE
image.20.maxWInText.cObject {
key.field = colPos
default = TEXT
# 1/2 of 900px - padding (2 x 30px)
default.value = 390
# normal
0 = TEXT
0 < .default
# left
1 = TEXT
1.value = 82
# right
2 = TEXT
2.value = 77
# 3 border
}
}
Normally you would create a content object this way:
content_colPos_0 < styles.content.get
If no renderObj is given than the default tt_content is used, but you can set it yourself and overwrite what you need:
content_colPos_0 < styles.content.get
content_colPos_0 {
renderObj < tt_content
renderObj.image.20.maxW = 100
}
Your solution works as well

I need to unwrap a TextPic CElement in TypoScript at a certain colPos

I want to do exactly what I mentioned in the Title. I want to unwrap (redefine the output even if needed) a content element (textpic since I use it for a slider output) at a certain Col Position (defined in my Backend Layout).
I done it with Jquery, but this seemes to be a sub-par solution.
My Code:
tt_content = CASE
tt_content {
key.field = colPos
#10 = CASE
10 {
#key.field = CType
stdWrap.innerWrap.cObject >
stdWrap.innerWrap2 >
dataWrap >
prepend >
textpic.20.text.10.10.stdWrap.dataWrap >
image.20.imageStdWrap.dataWrap >
image.20.imageStdWrapNoWidth.wrap >
image.20.imageColumnStdWrap.dataWrap >
image.20.layout.default.value = ###IMAGES######TEXT###
image.20.layout.1.value < image.20.layout.default.value
image.20.layout.2.value < image.20.layout.default.value
image.20.layout.8.value < image.20.layout.default.value
image.20.layout.9.value < image.20.layout.default.value
image.20.layout.10.value < image.20.layout.default.value
image.20.layout.17.value < image.20.layout.default.value
image.20.layout.18.value < image.20.layout.default.value
image.20.layout.25.value < image.20.layout.default.value
image.20.layout.26.value < image.20.layout.default.value
image.20.rendering.dl.imageRowStdWrap.dataWrap >
image.20.rendering.dl.oneImageStdWrap.dataWrap >
image.20.rendering.dl.imgTagStdWrap.wrap >
image.20.rendering.dl.editIconsStdWrap.wrap >
image.20.rendering.dl.caption.wrap >
textpic.20.text.10.10.stdWrap.dataWrap >
textpic.20.text.wrap >
}
}
Anyone has an idea or even a snippet ? ;)
Thx alot in advance for any help.
I have answered a question similar this once before
Instead of changing the entire tt_content configuration then just change it where you need it.
In below example I have created a new rendering method called 'noWraps' and in here i have cleared all the wraps.
Next I create a content lib lib.yourContent, you can name it as you like. We select the colPos we like, from your example we use colPos = 10. Then we explicitly tells renderObj to copy the tt_content configuration and next we override 'textpic' renderMethod to use 'noWraps'.
# Create a new renderMethod named 'noWraps' which can be used across the whole system
tt_content.textpic.20.rendering.noWraps {
imageRowStdWrap.dataWrap = |
noRowsStdWrap.wrap = |
oneImageStdWrap.dataWrap = |
imgTagStdWrap.wrap = |
editIconsStdWrap.wrap = |
caption.wrap = |
}
lib.yourContent < styles.content.get
lib.yourContent {
select.where = colPos = 10
renderObj < tt_content
renderObj {
# Set renderMethod to 'noWraps' only for this section
textpic.20.renderMethod = noWraps
}
}
Above code is still untested but it should work - just ask if it don't.
I can see that you also overrides the default layouts but you haven't mention that in your question? If you need to override this then just add/update the following.
lib.yourContent < styles.content.get
lib.yourContent {
select.where = colPos = 10
renderObj < tt_content
renderObj {
# Set renderMethod to 'noWraps' only for this section
textpic.20.renderMethod = noWraps
textpic.20.layout >
textpic.20.layout = TEXT
textpic.20.layout.value = ###IMAGES######TEXT###
}
}
Since you in your own example just override all the different cases to the same value then we can just as well redefine it as a static value. First we use textpic.20.layout > to clear the default configuration. Then we define it as a TEXT object textpic.20.layout = TEXT and then at the end we set the value textpic.20.layout.value = ###IMAGES######TEXT###
UPDATE: Below is tested and works with TYPO3 CMS 7.4.0
I have added some extra code to remove the last wraps.
# Create a new renderMethod named 'noWraps' which can be used across the whole system
tt_content.textpic.20.rendering.noWraps {
imageRowStdWrap.dataWrap = |
noRowsStdWrap.wrap = |
oneImageStdWrap.dataWrap = |
imgTagStdWrap.wrap = |
editIconsStdWrap.wrap = |
caption.wrap = |
allStdWrap.dataWrap = |
}
lib.yourContent < styles.content.get
lib.yourContent {
select.where = colPos = 10
renderObj < tt_content
renderObj {
# Set renderMethod to 'noWraps' only for this section
textpic.20.renderMethod = noWraps
textpic.20.imageStdWrap.dataWrap = |
textpic.20.imageStdWrapNoWidth = |
textpic.20.layout >
textpic.20.layout = TEXT
textpic.20.layout.value = ###IMAGES######TEXT###
}
}

TYPO3 - Markup using Math

So lets say I have something like this:
20 = CONTENT
20{
table = tt_content
select{
pidInList = 1
where = colPos = 0
}
renderObj = COA
renderObj{
wrap = <div class="normal">|</div>
10 = TEXT
10{
field = bodytext
}
}
}
and I want that every third object changes the class "normal" by "special". How could I do such operation in Typoscript?
Use optionSplit (DE) for this task on the wrap value, you need abcabc pattern where a,b = normal, c = special, so most probably it will be something like this:
wrap = a||b||c |*| a||b||c
Wrote it from top of my head so you need to check it.