TYPO3中的響應圖像的附加sourceCollection 7.6

是否可以實現其他sourceCollection代碼來呈現擴展中的響應圖像。我已經配置了標準tt_content.image.20.1.sourceCollection的代碼，它工作正常。TYPO3中的響應圖像的附加sourceCollection 7.6

這裏是我的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">

來源

2016-12-16 Adrian

一般情況下，這是完全可能的。某處有一些語法錯誤。您是否檢查TypoScript對象瀏覽器以查看是否一切正確應用？你可以在這裏發佈'###其他配置###'嗎？ – lorenz

我使用代碼 – Adrian

中的###其他配置###'完成了輸入我不知道爲什麼，但現在它可以工作 - 也許我有一些語法錯誤 – Adrian

如果可以的話，在Fluid-Template中執行操作會更容易。

你可以寫你自己的視圖助手或插件，並與您的圖象 - 餵它，然後用像這樣建立自己的圖片：

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

來源

2017-10-11 12:14:03 Naderio

TYPO3中的響應圖像的附加sourceCollection 7.6

回答

相關問題