CODEWITHSUNDEEP
typo3typo3-8.xfluid-styled-content
Falcon2014
Falcon2014

Reputation: 47

TYPO3 8 Fluid_styled_content: use value of layout in Image-partial

Basically I want to use the "layout"-value of a content element in TYPO3 to realize different rendering of images: e.g. a layout called "circle images" to have all images of that content element rendered cropped to a square and perhaps with some additional css-class.

The snipplets used in CSC-times of courde won't work with the new fluid_styled_content, so i try to have it work with FSC, but I get stuck at some weird point, because I'm not able to fetch the "layout"-value in the partial finally rendering the image.

Add some layout entry (works):

TCEFORM {
tt_content {
    layout {
        addItems {
            4 = Circle images
        }
    }
}

Use my own partials (and templates) for FSC (works in general):

lib.contentElement.partialRootPaths.200 = EXT:myextkey/Resources/Private/Partials/
lib.contentElement.templateRootPaths.200 = EXT:myextkey/Resources/Private/Templates/FluidContentTemplates

(They're based on copies of the original versions without any changes except some debug-entries.)

Now to where I'm stuck: I can easily get (and use, e.g. for some if-condition or just as testing / debug-output) the layout-value in the "higher levels", in Textmedia.html (template) as well as in Gallery.html I get the expected value for {data.layout}, e.g. using

<f:debug title="my-layout-value">{data.layout}</f:debug>

The rendering of an actual image is done by the following f:render viewhelper-line, unchanged from the original version:

<f:for each="{gallery.rows}" as="row">
        <div class="ce-row">
            <f:for each="{row.columns}" as="column">
                <f:if condition="{column.media}">
                    <div class="ce-column">
                        <f:debug title="my-layout-value">{data.layout}</f:debug>
                        <f:render partial="Media/Type" arguments="{file: column.media, dimensions: column.dimensions, data: data, settings: settings}" />
                    </div>
                </f:if>
            </f:for>
        </div>
    </f:for>

So, as I understood so far, all these variables listed as arguments should be passed to the rendering of the image.

But in the Rendering\Image.html-partial, the content of {data} then suddenly is just NULL, so no chance to use my layout value. The rest of the Image-partial is untouched, the image is rendered as usual (including some hard coded test css-class to verify my "custom" partial is used).

I also tried to use arguments={_all} in the Gallery.html-partial (to really get "everything"), leading to an "Oops"-error: Supplied file object type TYPO3\CMS\Fluid\ViewHelpers\MediaViewHelper must be FileInterface or AbstractFileFolder

I have no clue where I went wrong and how to get the desired logic to work (vary rendering / classes / cropping of the images based on the layout setting for the content-element).

Upvotes: 1

Views: 1103

Answers (1)

Bernd Wilke πφ
Bernd Wilke πφ

Reputation: 10790

As you have noticed a partial only gets those variables which are mentioned in the arguments parameter. If you want to evaluate another value you need to change the partial call and add that value.

In your example data already is passed as parameter. But that call does not call for the partial you need the layout value. You need to trace further (and make sure your data.layout is passed on) until you reach the call to the partial Rendering/Image

Hint:
if you use the f:debug-tag always use the title parameter to identify which debug tag is called:

<f:debug title="my-layout-value at Template X,Line Y">{data.layout}</f:debug>

Upvotes: 3

Related Questions