TYPO3: Crop images for just one variable - typo3

I'm having something like
page.10.variables {
content < styles.content.get
content.stdWrap.wrap = <div class="content">|</div>
content.select.where = colPos = 0
teaser < styles.content.get
teaser.select.where = colPos = 4
teaser.stdWrap.wrap = <div class="teaser">|</div>
teaser.stdWrap.required = 1
}
And I wish to crop the images inside the {teaser} while leaving the images inside the {content} uncropped.
How to manage this?
I'm currently running T3 7.4 but I'm also working on upgrading it to 7.6.2

You can set different image sizes per column like this:
temp.tt_content.image < tt_content.image
tt_content.image = CASE
tt_content.image {
key.field=colPos
1 < temp.tt_content.image
2 < temp.tt_content.image
3 < temp.tt_content.image
default < temp.tt_content.image
1.20.width= 145c #col-02
2.20.width= 190c #col-04
3.20.width= 100c
1.20.height= 145c #col-02
2.20.height= 190c #col-04
3.20.height= 100c
default.20.maxW= 345
}
temp.tt_content.image >

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 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

typo3 language menu with typoscript files not found

I try to add a language menu with typoscript, but the files I want to add as images ar not working.
my typoscript looks like this:
## Localization menu:
temp.langMenu = HMENU
temp.langMenu.special = language
temp.langMenu.special.value = 0,2
temp.langMenu.1 = GMENU
temp.langMenu.1.NO {
XY = [5.w]+4, [5.h]+4
backColor = white
5 = IMAGE
5.file = fileadmin/bilder/DE-flag-32.png || fileadmin/bilder/US-flag-32.png
5.offset = 2,2
}
temp.langMenu.1.ACT < lib.langMenu.1.NO
temp.langMenu.1.ACT = 1
temp.langMenu.1.ACT.backColor = black
temp.langMenu.1.USERDEF1 < lib.langMenu.1.NO
temp.langMenu.1.USERDEF1 = 1
temp.langMenu.1.USERDEF1.5.file = fileadmin/bilder/DE-flag-32.png || fileadmin/bilder/US-flag-32.png
temp.langMenu.1.USERDEF1.noLink = 1
Cache is clean ...
result is this:
links are working but no image. in Site-source code the image got this path:
<img src="/typo3temp/menu/4baf3d2e70.gif" width="36" height="36" alt="Home">
Whats my Mistake in this case
I usually have a similar approach:
temp.language = HMENU
temp.language {
special = language
// 0 = Deutsch, 1 = Englisch
special.value = 0,1
wrap = <ul class="langmenu">|</ul>
1 = GMENU
1 {
NO = 1
NO {
format = png
// size of flag grafics
XY = 38,17
transparentColor = #00FFFF
backColor = #00FFFF
10 = IMAGE
10.file = fileadmin/flags/de.png || fileadmin/flags/uk.png
10.offset = 10,0
10.file.width = 28
10.file.height = 17
wrap = <li>|</li>
}
ACT < .NO
ACT {
20 = IMAGE
20.file = fileadmin/flags/arrow.gif
20.format = png
20.offset = 0,3
noLink = 1
wrap = <li class="act">|</li>
}
// if translation is not available:
USERDEF1 < .NO
USERDEF1 {
// the grayscale effectdoes not work with some IM versions
30 = EFFECT
30.value = gray | gray=1 | grey | grey=1
// the same flags like above, bleached
40 = EFFECT
40.value = gamma=5
// naturally this should not be linked either
noLink = 1
}
}
}
differences which might be important:
I use constant values for the generated images and no blank after the comma
I give explicit sizes for the used images
I use color values instead of color names
I use transparent color
Image generation on the server (the install tool checks) is working in general? Pay special attention to the GDlib tests
install of imagemagick does the job

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 excludeUidList is there an includeUidList

Have search the net, for a solution where i have a navi TS file that show a Menu.
here i only want to show 2 links, the links are a Main root page and a sub page, so my question is.
If i dont want to excludeUidList all the 7-9 Uid, is there a way to make a includeUidList ?
bc i can't get this to work, it showing all the Uid links.
lib.leftNavi = HMENU
lib.leftNavi.entryLevel=0
lib.leftNavi.includeUidList = 4,8
lib.leftNavi.1 = TMENU
lib.leftNavi.1 {
wrap = <div id="leftMenu"><ul class="L1"><li><ul>|</ul></li></ul></div>
expAll = 0
NO = 1
NO.allWrap = <li>|</li>
NO.stdWrap.wrap = <span>|</span>
RO < .NO
RO = 1
CUR < .NO
CUR = 1
CUR.allWrap = <li class="current">|</li>
CUR.stdWrap.wrap = <span>|</span>
CUR.ATagParams =
ACT < .CUR
}
No, there is no includeUidList, see the reference at http://docs.typo3.org/typo3cms/TyposcriptReference/latest/ContentObjects/Hmenu/.
But you can use a HMENU with the "special" property: http://docs.typo3.org/typo3cms/TyposcriptReference/latest/ContentObjects/Hmenu/#hmenu-special-property
20 = HMENU
20.special = list
20.special.value = 35, 56
This will generate a menu with page 35 and 36.