Как реализовать отзывчивый рендеринг исходного кода в typo3?

Question

Я хочу реализовать рендеринг результирующего изображения по разному масштабу (носитель) в typo3 с помощью sourceCollection?

<picture><source src="fileadmin/_processed_/imagefilenamename_595cc36c48.png" media="(max-device-width: 600px)" /><source src="fileadmin/_processed_/imagefilenamename_42fb68d642.png" media="(max-device-width: 600px) AND (min-resolution: 192dpi)" /><img src="fileadmin/_processed_/imagefilenamename_595cc36c48.png" alt="" /></picture> 

Я могу сделать это с помощью typoscript, но как я могу использовать его в своем собственном расширении?

Заранее спасибо.

Answer 1

Самый простой способ - использовать TypoScript. В приведенном ниже примере мы используем ту же конфигурацию, которую я использую для tt_content для рендеринга новостей.

Прежде всего, вам нужно определить объект TypoScript, который использует файл, переданный объекту. Затем вы скопируете конфигурацию, используемую для tt_content.

lib.responsiveImage { 
    default = IMAGE 
    default { 
     file.import.current = 1 
     altText.data = field:altText 
     titleText.data = field:titleText 
     layoutKey = picturefill 
     layout.picturefill < tt_content.image.20.1.layout.picturefill 
     sourceCollection < tt_content.image.20.1.sourceCollection 
    } 
} 

(Вы, возможно, потребуется изменить пример раскладки, если вы не хотите использовать picturefill.)

Затем в жидкость, необходимо передать изображение в TypoScript. Пример ниже отображает uri файла:

<f:alias map="{image: {uri: '{f:uri.image(src:\'{mediaElement.uid}\', treatIdAsReference:\'1\')}', altText: mediaElement.originalResource.alternative, titleText: mediaElement.originalResource.title}}"> 
    <f:cObject typoscriptObjectPath="lib.responsiveImage.default" data="{image}" currentValueKey="uri" /> 
</f:alias> 

Вы также можете определить другую конфигурацию, например.

lib.responsiveImage { 
    default = IMAGE 
    default { 
     [...] 
    } 
    newsDetail < .default 
    newsDetail { 
     [different configuration for type newsDetail] 
    } 
}