如何使用Typoscript从flexform获取视频/媒体资源

Question

我正在使用flexform为html部分元素选择背景图像。

看起来像这样: dataWrap =|

    dataWrap.override.stdWrap.cObject = COA
    dataWrap.override.stdWrap.cObject {
        10 = TEXT
        10.dataWrap = <section class="content {field:flexform_mdCol1} {field:flexform_mdCol2} {field:flexform_col21class}
        20 = TEXT
        20.value = " style="background-image: url(/
        30 = IMG_RESOURCE
        30 {
            file.import.data = field:flexform_mdCol3
        }
        40 = TEXT
        40.value = );">|</section>
    }
    dataWrap.override.if.isTrue.field = flexform_mdCol3

问题是，这不适用于视频。我已经创建了第二个领域(mdCol4)来选择一个mp4视频和mdCol3领域作为海报和背景的最坏情况。看起来像这样，但不起作用。

    dataWrap.override.stdWrap.cObject = COA
    dataWrap.override.stdWrap.cObject {
        10 = TEXT
        10.dataWrap = <section class="content {field:flexform_mdCol1} {field:flexform_mdCol2} {field:flexform_col21class}

        20 = TEXT
        20.value = " style="background-image: url(/
        30 = IMG_RESOURCE
        30 {
            file.import.data = field:flexform_mdCol3
        }
        40 = TEXT
        40.value = );">

        50 = TEXT
        50.value = <video width="1920" height="1080" autoplay loop muted playsinline poster="/
        60 = IMG_RESOURCE
        60 {
            file.import.data = field:flexform_mdCol3
        }
        70 = TEXT
        70.value = ">

        80 = TEXT
        80.value = <source src="/
        90 = IMG_RESOURCE
        90 {
            file.import.data = field:flexform_mdCol4
        }
        100 = TEXT
        100.value = " type="video/mp4"></video>|</section>
    }
    dataWrap.override.if.isTrue.field = flexform_mdCol4

海报和背景显示，但似乎IMG_RESOURCE不工作的视频，我找不到一些模拟。

TYPO3为8.7.18。这是个bug，还是我太傻了？:)

任何帮助都是非常有用的。提前感谢！

Answer 1

多亏了Bernd的方法和帮助，下面是解决方案：

    dataWrap.override.stdWrap.cObject = COA
    dataWrap.override.stdWrap.cObject {
        10 = TEXT
        10.dataWrap = <section class="content video {field:flexform_mdCol1} {field:flexform_mdCol2} {field:flexform_col21class}

        20 = TEXT
        20.value = " style="background-image: url(/
        30 = IMG_RESOURCE
        30 {
            file.import.data = field:flexform_mdCol3
        }
        40 = TEXT
        40.value = );">

        50 = TEXT
        50.value = <video width="1920" height="1080" autoplay loop muted playsinline poster="/
        60 = IMG_RESOURCE
        60 {
            file.import.data = field:flexform_mdCol3
        }
        70 = TEXT
        70.value = ">

        75 = CONTENT
        75 {
            table = tt_content
            select {
                table = tt_content
                uid.data = field:uid
            }

            renderObj = COA
            renderObj {
                10 = TEXT
                10 {
                    data = flexform: pi_flexform:flexform_mdCol4
                }
            }
        }

        80 = TEXT
        80.value = <source src="/
        90 = FILES
        90 {
            files.dataWrap = {field:flexform_mdCol4}

            renderObj = TEXT
            renderObj.stdWrap.data = file:current:publicUrl
            renderObj.stdWrap.wrap = |
        }
        100 = TEXT
        100.value = " type="video/mp4"></video>|</section>
    }
    dataWrap.override.if.isTrue.field = flexform_mdCol4

Answer 2

视频不是图像。

构建IMG_RESOURCE对象首先要分析图像并在必要时调整大小。

如果你只是想要文件的url，你不需要任何图像处理。只需使用公共url：

90 = FILES
90 {
    // if it is exact one file:
    files = flexform_mdCol4

    // otherwise use references:
    # references {
    #     table = tt_content
    #     uid.field = uid
    #     fieldname = flexform_mdCol4
    # }

    renderObj = TEXT
    renderObj.data = file:current.publicUrl
}

Answer 3

只是为了艺术：

我忘了通知你使用typoscript生成干净代码的可能性。

您已将包装拆分到数组中的不同对象中。这对于阅读和识别应该放在一起的内容来说有点糟糕。

下面是我的解决方案的变体：

我认为30 (您的75__)缺少一些东西，因为它将只呈现一个sys_file uids列表，而不是usage/wrap。

dataWrap.override.cObject = COA
dataWrap.override.cObject {
    10 = IMG_RESOURCE
    10 {
         file.import.field = flexform_mdCol3
         dataWrap = <section class="content video {field:flexform_mdCol1} {field:flexform_mdCol2} {field:flexform_col21class}" style="background-image: url(|);">
    }

    20 = IMG_RESOURCE
    20 {
        file.import.data = field:flexform_mdCol3
        wrap = <video width="1920" height="1080" autoplay loop muted playsinline poster="|">
    }

    30 = CONTENT
    30 {
        table = tt_content
        select {
            table = tt_content
            uid.data = field:uid
        }

        renderObj = TEXT
        renderObj {
            data = flexform: pi_flexform:flexform_mdCol4
        }
    }

    40 = FILES
    40 {
        files.field = flexform_mdCol4

        renderObj = TEXT
        renderObj.data = file:current:publicUrl

        wrap = <source src="#" type="video/mp4"></video>|</section>
        wrap.splitChar= #
    }
}
dataWrap.override.if.isTrue.field = flexform_mdCol4

请注意40上更改后的splitChar，以便可以按原样使用管道字符。