typo3 - TYPO3 7.6 中响应式图像的附加源集合

Question

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

Answer 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>