TYPO3 7.6中响应图像的附加sourceCollection

是否可以实现附加的

sourceCollection

代码，以在扩展中呈现响应图像。我已经为标准的

tt_content.image.20.1.sourceCollection

配置了代码，它运行良好

这是我的

TypoScript

代码：

tt_content.image.20.1.layout {
  srcset {
    element.wrap = <img src="###SRC###" srcset="###SRC### ###WIDTH###w,###SOURCECOLLECTION###" sizes="|"###PARAMS######ALTPARAMS######SELFCLOSINGTAGSLASH###>
    element = (min-width: 1020px) 800px, (min-width: 740px) 460px, calc(100vw - 20px)
  }
}

    tt_content.image.20.1.sourceCollection >
    tt_content.image.20.1.sourceCollection {
      tiny {
        width = 160
        maxW < .width
        srcsetCandidate = 160w
      }
      extrasmall {
        width = 320
        maxW < .width
        srcsetCandidate = 320w
      }
      small {
        width = 460
        maxW < .width
        srcsetCandidate = 460w
      }
      normal {
        width = 600
        maxW < .width
        srcsetCandidate = 600w
      }
      medium {
        width = 780
        maxW < .width
        srcsetCandidate = 780w
        quality = 60
      }
      large {
        width = 920
        maxW < .width
        srcsetCandidate = 920w
        quality = 60
      }
      extralarge {
        width = 1100
        maxW < .width
        srcsetCandidate = 1100w
        quality = 60
      }
      huge {
        width = 1200
        maxW < .width
        srcsetCandidate = 1200w
        quality = 60
      }
    }


lib.responsiveImage {
    default = IMAGE
    default {
        file.import.current = 1
        altText.data = field:altText
        titleText.data = field:titleText
        layoutKey = srcset
        layout.srcset < tt_content.image.20.1.layout.srcset
        sourceCollection < tt_content.image.20.1.sourceCollection
    }
    specialBig < .default
    specialBig {
        layoutKey = srcset
        layout.srcset {
            element.wrap = <img src="###SRC###" srcset="###SRC### ###WIDTH###w,###SOURCECOLLECTION###" sizes="|"###PARAMS######ALTPARAMS######SELFCLOSINGTAGSLASH###>
            element = (min-width: 1020px) 521px, (min-width: 740px) 460px, calc(100vw - 20px)
        }

        sourceCollection { 
          tiny {
          width = 160
          maxW < .width
          srcsetCandidate = 160w
          }
          extrasmall {
          width = 320
          maxW < .width
          srcsetCandidate = 320w
          }
          small {
          width = 460
          maxW < .width
          srcsetCandidate = 460w
          }
          normal {
          width = 600
          maxW < .width
          srcsetCandidate = 600w
          }
          medium {
          width = 460
          maxW < .width
          srcsetCandidate = 780w
          quality = 60
          }
          large {
          width = 460
          maxW < .width
          srcsetCandidate = 920w
          quality = 60
          }
          extralarge {
          width = 520
          maxW < .width
          srcsetCandidate = 1100w
          quality = 60
          }
          huge {
          width = 600
          maxW < .width
          srcsetCandidate = 1200w
          quality = 60
          }
        }
    }
} 

来自

lib.responsiveImage.default

部分的图像被正确渲染，但来自

lib.responsiveImage.specialBig

整个

sourceCollection

的图像被忽略，并且在输出中我只有以下内容：

<img src="fileadmin/img/img.jpg" srcset="fileadmin/img/img.jpg 800w," sizes="(min-width: 1020px) 521px, (min-width: 740px) 460px, calc(100vw - 20px)" alt="alt-text" title="title-text">

---

如果可以，在流体模板中执行此操作会更容易

您可以编写自己的ViewHelper或插件，并将imagedata提供给它，然后使用以下内容构建图像：

<picture>
     <f:for each="{sizes}" as="size">
         <source media="(min-width: {...}px)" 
                 srcset="{f:uri.image(...)}">
     </f:for>
     <img src="{f:uri.image(...)}" alt="{...}" title="{...}">
 </picture>

一般来说，这是完全可能的。一定有什么语法错误。您是否检查了打字稿对象浏览器以查看是否所有内容都正确应用？你能在这里发布

#########

吗？我用代码中的

###附加配置###

完成了这个条目，我不知道为什么，但现在它可以工作了-也许我有一些语法错误仅供参考：这里不需要依赖打字脚本。您可以简单地拥有所有这些逻辑，即图片标签，或直接在流体模板中带有附加源的img标签。

<picture>
     <f:for each="{sizes}" as="size">
         <source media="(min-width: {...}px)" 
                 srcset="{f:uri.image(...)}">
     </f:for>
     <img src="{f:uri.image(...)}" alt="{...}" title="{...}">
 </picture>