Max image width for columns in gridelements - typo3

Question

I have some grids, where i can choose the column width via flexform (33.3% - 33.3% - 33.3% or 25% - 50% - 25%, …)
I get the max-width of the columns by using CASE with the flexform-field value and the max-width of the page:
…
3 < lib.gridelements.defaultGridSetup
3 {
columns {
1 < .default
1.renderObj = COA
1.renderObj {
10 = LOAD_REGISTER
10.colMaxWidth.cObject = CASE
10.colMaxWidth.cObject {
key.data = field:parentgrid_flexform_style
default = TEXT
default.value =
col-1-2-1 = TEXT
col-1-2-1.value = {$maxContentWidth} / 4
col-1-2-1.prioriCalc = 1
col-4-3-3 = TEXT
col-4-3-3.value = {$maxContentWidth} / 10 * 4
col-4-3-3.prioriCalc = 1
col-1-1-1 = TEXT
col-1-1-1.value = {$maxContentWidth} / 3
col-1-1-1.prioriCalc = 1
}
20.textmedia.dataProcessing.20.maxGalleryWidth.stdWrap.data = register:colMaxWidth
30 = RESTORE_REGISTER
}
2 < .1
2 {
renderObj.10.colMaxWidth.cObject {
col-1-2-1.value = {$maxContentWidth} / 2
col-4-3-3.value = {$maxContentWidth} / 10 * 3
}
}
3 < .1
3 {
renderObj.10.colMaxWidth.cObject {
col-4-3-3.value = {$maxContentWidth} / 10 * 3
}
}
}
...
}
}
This will work fine. But I don’t know what to do, if using nested grids? Then I have to get the flexform-values of the parent gridelement.
Or what is your solution to calculate the max—image-width for grid-columns?

Answer 1

be careful with the calculated size. especially if you use responsive layouts. in responsive layouts columns could be wider on a smaller screen as columns may appaer beneath each other than side by side.
in general: you don't have an easy way to calculate the column width of stacked gridelements. you could do very complicated TS configuration, or you might use an userfunc to solve the computation in PHP.

Answer 2

Did you try to use gridelements together with fluidtemplates?
In the meantime I use this in all my defined grid-elements.

Answer 3

Don't do this on the server side, because the server will not get noticed, when a client changes its browser dimensions. The solution to your problem can easily be fixed by using some CSS. Lets assume you do not render the width directly, but use classes for a grid-system like bootstrap and your rendered gridelement HTML structure looks like this:
<div class="row">
<div class="columns column-2"></div>
<div class="columns column-8"><img src="someimage.jpg" width="800" height="400" /></div>
<div class="columns column-2"></div>
</div>
Your column CSS would probably look like this:
.row{
width: 100%;
}
.row:after{
content: '';
clear: both;
height: 0px;
visibility: hidden;
}
.columns{
float: left;
}
.column-2{
width: 33%;
}
.column-8{
width: 66%;
}
Now you want the images inside the columns to resize with the columns themselfes. A simple max-width: 100%; should do that like so:
.columns img{
max-width: 100%;
}

Answer 4

Since you are using registers anyway, you can include the already calculated register to calculate the amount on deeper levels of the nested structure.
Registers are working like a stack, so with each LOAD_REGISTER you will add a new value to the register stack of colMaxWidth, with each RESTORE_REGISTER you will remove that value in favor of the former value in the stack.
While this is not recommendable performancewise, you can still calculate nested amounts by including the register into the calculation as long as the result gets cached.
When you are on highly dynamic pages with more ore less uncacheable results, you should go for another solution though.

Answer 5

Why don't you use the image editor in TYPO3 V7 Media-Tab?
Screenshot of the image-editor — sorry, but in German