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

【问题标题】：Additional sourceCollection for responsive images in TYPO3 7.6TYPO3 7.6 中响应式图像的附加 sourceCollection
【发布时间】：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)" alt="alt-text" title="title-text">

【问题讨论】：

一般来说，这是完全可能的。某处一定有一些语法错误。您是否检查了 TypoScript 对象浏览器以查看是否正确应用了所有内容？你能在这里发### Additional Config ###吗？
我在代码中用### Additional Config ###完成了输入
我不知道为什么，但现在可以了 - 也许我有一些语法错误
仅供参考：这里没有必要依赖 Typoscript。您可以直接在流体模板中拥有所有这些逻辑，即图片标签或带有其他来源的 img 标签。

标签： typo3 typoscript responsive typo3-7.6.x

【解决方案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(...)}" alt="{...}" title="{...}">
 </picture>

【讨论】：