TYPO3 7.6 中响应式图像的附加 sourceCollection

Posted 2023-02-16

【中文标题】TYPO3 7.6 中响应式图像的附加 sourceCollection

【英文标题】：Additional sourceCollection for responsive images in TYPO3 7.6

【发布时间】：2017-05-02 07:29:48

【问题描述】：

是否可以实现额外的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
          
        
    
 

还有FluidTemplate 部分：

<f:cObject typoscriptObjectPath="lib.responsiveImage.default" data="image.uid"></f:cObject>
<f:cObject typoscriptObjectPath="lib.responsiveImage.specialBig" data="image.uid"></f:cObject>

来自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)"  title="title-text">

【问题讨论】：

一般来说，这是完全可能的。某处一定有一些语法错误。您是否检查了 TypoScript 对象浏览器以查看是否正确应用了所有内容？你能在这里发### Additional Config ###吗？

我在代码中用### Additional Config ###完成了输入

我不知道为什么，但现在可以了 - 也许我有一些语法错误

仅供参考：这里没有必要依赖 Typoscript。您可以直接在流体模板中拥有所有这些逻辑，即图片标签或带有其他来源的 img 标签。

【参考方案1】：

如果可以，在流体模板中更容易做到。

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

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