简体   繁体   English

Typo3 Fluid 忽略排版中设置的最大图像尺寸

[英]Typo3 Fluid ignoring max image sizes set in typoscript

I've set in my Constants我已经设置了我的常量

styles.content.textmedia.maxW = 400
styles.content.textmedia.maxWInText = 400
styles.content.imgtext.maxW = 800

and tried a simple并尝试了一个简单的

<f:image src="..."></f:image>

without any params and on the frontend the image is still rendered on its original width ignoring my maxW constants没有任何参数,在前端,图像仍然以其原始宽度呈现,忽略我的 maxW 常量

The original problem was to set different maxW for each column in gridelements which also did not work for fluid content.最初的问题是为 gridelement 中的每一列设置不同的 maxW,这也不适用于流体内容。 So i tried to break it down to the simplest maxW setting and even that is not working.所以我试图把它分解成最简单的 maxW 设置,即使这样也行不通。

If i take the Text & Image contentelement, it works as expected so i assume, the system is behaving correctly but for any reason fluid images are ignoring the setting?!如果我采用文本和图像内容元素,它会按预期工作,所以我假设系统运行正常,但出于任何原因,流体图像忽略了设置?!

Is there anything i do wrong or is there something missing which sets the maxW for f:image?是不是我做错了什么,或者是否缺少为 f:image 设置 maxW 的东西? I cant set the maxW in the f:image directly cause it may be located in different columns with different sizes, so i have to set it outside of the f:image tag.我不能直接在 f:image 中设置 maxW,因为它可能位于不同大小的不同列中,所以我必须将它设置在 f:image 标签之外。

Update: The main target was to be able to use gridelements as the gridengine and using dce for creating content elements while the elements should knew about the column widths, they are located in to scale images properly.更新:主要目标是能够使用 gridelements 作为 gridengine 并使用 dce 创建内容元素,而元素应该知道列宽,它们位于正确缩放图像的位置。

With the help of Mikel Wohlschlegel i got the missing hint, to fix my problem.在 Mikel Wohlschlegel 的帮助下,我得到了缺失的提示,以解决我的问题。

Short anwer:简答:

The image viewhelper does not automatically apply any dimensions defined in the constants.图像视图助手不会自动应用常量中定义的任何尺寸。 f:image is part of ext:fluid, the constants you set are part of ext:fluid_styled_content. f:image 是 ext:fluid 的一部分,您设置的常量是 ext:fluid_styled_content 的一部分。 The image viewhelper always needs a width or a maxWidth argument if you want to set one.如果你想设置一个,图像视图助手总是需要一个宽度或一个 maxWidth 参数。 You need to pass your constants to the frontend.您需要将常量传递给前端。

Long answer:长答案:

You can see, how it is done in fluid_styled_content:你可以看到,它是如何在fluid_styled_content 中完成的:

Have a look into: typo3/sysext/fluid_styled_content/Configuration/TypoScript/ContentElement/Image.typoscript A DataProcessor passes this constants to the GalleryProcessor看看: typo3/sysext/fluid_styled_content/Configuration/TypoScript/ContentElement/Image.typoscript DataProcessor 将此常量传递给 GalleryProcessor

tt_content.image {
templateName = Image
dataProcessing {
    20 = TYPO3\CMS\Frontend\DataProcessing\GalleryProcessor
    20 {
        maxGalleryWidth = {$styles.content.textmedia.maxW}
        maxGalleryWidthInText = {$styles.content.textmedia.maxWInText}
    }
}

and are passed through to the frontend as {column.dimensions} See typo3/sysext/fluid_styled_content/Resources/Private/Partials/Media/Gallery.html并作为 {column.dimensions} 传递到前端,请参阅typo3/sysext/fluid_styled_content/Resources/Private/Partials/Media/Gallery.html

<f:render partial="Media/Type" arguments="{file: column.media, dimensions: column.dimensions, data: data, settings: settings}" />

to finally gets applied as width argument in typo3/sysext/fluid_styled_content/Resources/Private/Partials/Media/Rendering/Image.html最终在typ3/sysext/fluid_styled_content/Resources/Private/Partials/Media/Rendering/Image.html中作为宽度参数应用

<f:media class="image-embed-item" file="{file}" width="{dimensions.width}" height="{dimensions.height}" alt="{file.alternative}" title="{file.title}" />

Solution:解决方案:

gridelements config网格元素配置

tt_content.gridelements_pi1.20.10.setup {

  default < lib.gridelements.defaultGridSetup
  default {
        columns {
            default {
                renderObj = COA
                renderObj {
                    10 = LOAD_REGISTER
                    10.padding1.cObject = TEXT
                    10.padding1.cObject.data = field:parentgrid_flexform_padding1
                    10.padding2.cObject = TEXT
                    10.padding2.cObject.data = field:parentgrid_flexform_padding2
                    10.padding3.cObject = TEXT
                    10.padding3.cObject.data = field:parentgrid_flexform_padding3
                    10.colMaxWidth.cObject = CASE
                    10.colMaxWidth.cObject {
                        key.data = field:parentgrid_flexform_grid
                        default = TEXT
                        default.value = 1224
                        default.prioriCalc = 1
                    }
                    20.image.dataProcessing.20.maxGalleryWidth.data = register:colWidth
                    20.image.dataProcessing.20.maxGalleryWidthInText.data = register:colWidth

                    30 = RESTORE_REGISTER
                }
            }
        }
    }

  3 < .default
  3 {
    cObject = FLUIDTEMPLATE
    cObject {
      file = templates/gridelements/html/3columns.html
    }    
    columns {
      default.renderObj.10.colMaxWidth.cObject {
                default.value = 1224/100*33

                grid-20 = TEXT
                grid-20.value = 1224/100*20
                grid-20.prioriCalc = 1            
                grid-25 = TEXT
                grid-25.value = 1224/100*25
                grid-25.prioriCalc = 1                      
                grid-32 = TEXT
                grid-32.value = 1224/100*32
                grid-32.prioriCalc = 1                      
            } 
            0 < .default
            0.renderObj.10.colWidth.cObject = TEXT
            0.renderObj.10.colWidth.cObject {
                data = register:colMaxWidth
                stdWrap.dataWrap = | - {register:padding1} - {register:padding1}
                prioriCalc = 1
            }
            1 < .default
            1.renderObj.10.colWidth.cObject = TEXT
            1.renderObj.10.colWidth.cObject {
                data = register:colMaxWidth
                stdWrap.dataWrap = | - {register:padding2} - {register:padding2}
                prioriCalc = 1
            }
            2 < .default
            2.renderObj.10.colWidth.cObject = TEXT
            2.renderObj.10.colWidth.cObject {
                data = register:colMaxWidth
                stdWrap.dataWrap = | - {register:padding3} - {register:padding3}
                prioriCalc = 1
            }           
        }
    }

in dce fluid than i can use在我可以使用的 dce 流体中

{namespace vhs=FluidTYPO3\Vhs\ViewHelpers}
{vhs:variable.register.get(name: 'colWidth')}

to access this register value.访问该寄存器值。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM