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被忽略，而输出我只有：{/ p>

<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或插件，并将其与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>

TYPO3 7.6中响应图像的附加sourceCollection

1 个答案: