I have got a problem with the multicolumn imageshrink function.
There is a three column layout where the imageshrink function (first column) works perfectly. But in my two column layout, the shrink function seems to work, but the imagewidth is always 450px, but if must be 280px. Any ideas?
TSConfig root page:
tx_multicolumn.layoutPreset >
tx_multicolumn.layoutPreset {
# Define a unique key for the layout
twoColumnLayout {
# Backend label (path to a locallang file)
label = 2 Spalten
# Icon (file resource or a path to fileadmin)
icon = fileadmin/layout/images/multi2spalten.png
config {
#Width of multicolumn container (px or %)
containerMeasure = px
containerWidth = 900
# Number of columns(integer)
columns = 2
# Column measure (px or %)
columnMeasure = px
# Column width (integer, optionSplit)
columnWidth = 580 |*| 280
# Column margin (string, optionSplit)
columnMargin = 0 20px 0 0 |*| 0 0 0 0
# Disable auto image shrink for columns (boolean, 0)
disableImageShrink = 0
}
}
# Define a unique key for the layout
threeColumnLayout {
# Backend label (path to a locallang file)
label = 3 Spalten
# Icon (file resource or a path to fileadmin)
icon = fileadmin/layout/images/multi3spalten.png
config {
#Width of multicolumn container (px or %)
containerMeasure = px
containerWidth = 900
# Number of columns(integer)
columns = 3
# Column measure (px or %)
columnMeasure = px
# Column width (integer, optionSplit)
columnWidth = 300 |*| 260 |*| 260
# Column margin (string, optionSplit)
columnMargin = 0 20px 0 0 |*| 0 20px 0 0 |*| 0 0 0 0
# Disable auto image shrink for columns (boolean, 0)
disableImageShrink = 0
}
}
}
Main Template Constants:
styles.content.imgtext.colPos0.maxW = 280
styles.content.imgtext.colPos1.maxW = 280
styles.content.imgtext.colPos2.maxW = 280
styles.content.imgtext.colPos3.maxW = 280
Main Template Setup:
tt_content.image.20.maxW.cObject = CASE
tt_content.image.20.maxW.cObject {
key.field = colPos
## Normal
0 = TEXT
0.value = 280
## Left
1 = TEXT
1.value = 280
## Right
2 = TEXT
2.value = 280
## Border
3 = TEXT
3.value = 280
}
I found the solution by myself, but thanks anyway.
Here is the solution:
I set the containerMeasure to % instead of px and the containerWidth to 100.
That was all, now the shrink works very well.
Please add the below typoscript setup:
tt_content.image.20.maxW = 280px
Related
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>
}
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 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'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 >
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 />|
}