Question

我有一些网格，我可以通过flexform选择列宽（33.3％ - 33.3％ - 33.3％或25％ - 50％ - 25％，...）

通过使用带有flexform-field值和页面最大宽度的CASE，我获得了列的最大宽度：

…

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
            }

        }
    }
    ...
    }
}

这样可以正常工作。但我不知道该怎么办，如果使用嵌套网格？然后我必须得到父gridelement的flexform-values。

或者您计算网格列的最大图像宽度的解决方案是什么？

Answer 1

小心计算出的尺寸。特别是如果您使用响应式布局。在响应式布局中，列可以在较小的屏幕上更宽，因为列可以并排显示在彼此之下。

一般来说：您没有简单的方法来计算堆叠的gridelements的列宽。您可以执行非常复杂的TS配置，或者您可以使用userfunc来解决PHP中的计算。

Answer 2

您是否尝试过将gridelements与fluidtemplates一起使用？

与此同时，我在所有定义的网格元素中使用它。

Answer 3

不要在服务器端执行此操作，因为当客户端更改其浏览器维度时，服务器不会被注意到。使用一些CSS可以轻松解决问题的解决方案。让我们假设你没有直接渲染宽度，但是使用像引导程序这样的网格系统的类，你的渲染的gridelement HTML结构如下所示：

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

您的列CSS可能如下所示：

.row{
  width: 100%;
}
.row:after{
  content: '';
  clear: both;
  height: 0px;
  visibility: hidden;
}
.columns{
  float: left;
}
.column-2{
  width: 33%;
}
.column-8{
  width: 66%;
}

现在，您希望列中的图像可以使用列自己调整大小。一个简单的最大宽度：100％;应该这样做：

.columns img{
  max-width: 100%;
}

Answer 4

由于您仍在使用寄存器，因此您可以包含已计算的寄存器来计算嵌套结构的更深层次的数量。

寄存器的工作方式类似于堆栈，因此对于每个LOAD_REGISTER，您将向colMaxWidth的寄存器堆栈添加一个新值，每个RESTORE_REGISTER都将删除该值，以支持堆栈中的前一个值。

虽然这在性能上是不可取的，但只要结果被缓存，您仍然可以通过将寄存器包含在计算中来计算嵌套数量。

当您处于高度动态的页面上时，您可以使用其他解决方案。

Answer 5

为什么不在TYPO3 V7 Media-Tab中使用图像编辑器？

Screenshot of the image-editor — sorry, but in German

gridelements中列的最大图像宽度

5 个答案: