Дополнительный sourceCollection для чувствительных изображений в TYPO3 7.6

Возможно ли реализовать дополнительный код для визуализации обратных изображений в расширениях. Я настроил код для стандарта tt_content.image.20.1.sourceCollection, и он отлично работает.Дополнительный sourceCollection для чувствительных изображений в TYPO3 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, чтобы убедиться, что все правильно применяется? Не могли бы вы разместить здесь ### Additional Config ### 'здесь? – lorenz

Я завершил запись с '### Additional Config ###' в коде – Adrian

Не знаю почему, но теперь это работает - возможно, у меня была некоторая синтаксическая ошибка – Adrian

Если вы можете, это проще сделать в вашем Fluid-Template.

Вы можете написать свой собственный 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>

источник

2017-10-11 12:14:03 Naderio

Дополнительный sourceCollection для чувствительных изображений в TYPO3 7.6

ответ

Смежные вопросы