如何使用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。这是一个错误还是我只是愚蠢？ :)

任何帮助都非常感谢。提前致谢！

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_RESOURCEobject开始分析图像，并在必要时调整大小。

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

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 uid列表。

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

注意splitChar改变的40所以管道char可以按原样使用。