Get (only) the image of a tt_content element.

Hello!

First of all, sorry for my bad english and many thx for that great extension!

Works fine so far and displays the tt_content elements from the selected pages.

Now I want to use my own templates to display the tt_content elements and there for I need the header, subheader, bodytext and image seperate.

This also works fine with a vhs viewhelper:

{namespace v=FluidTYPO3\Vhs\ViewHelpers}

{contentElement.bodytext} {contentElement.header} {contentElement.subheader} The only (and sadly biggest) problem is to get only the image (or media file) from the content element. I tryed to load it as partial with a bunch of different image viewhelpers using in the partial, nothing worked : After now 3 days of trying I am nearly to give up. I guess the main problem is that i got no access to the TYPO3\CMS\Core\Resource\FileReference. Debuggin the created """" shows only: image => 1 (integer) debugging the tt_content element (for example textpic) shows me: files => array(1 item) 0 => TYPO3\CMS\Core\Resource\FileReferenceprototypeobject propertiesOfFileReference => protectedarray(33 items) originalFile => protectedTYPO3\CMS\Core\Resource\Fileprototypeobject and so on - so there is all I am looking for to build my custom output. The problem - how can i get that into the plugin.tx_dcp to use them? Probably I need to add somethin in the Controller? But i got no clue. Thx for any help!

Hello @juergen1964,

thanks for using this extension. For your particular use case it is important to note that the DCP-Plugin is not responsible for the actual rendering of the matching content elements. Therefore if you want to change the output of the matching content elements you have to modify the template of the content element itself, not the template of the plugin.

Of course the content element template needs a way to know if it is rendered in default context or by a DCP plugin. For this the DCP plugin sets a TSFE register value with the key dcpMode which is available in the content element template. This extension provides a ViewHelper to easily check the DCP mode within a fluid template:

{namespace dcp=Sethorax\Dcp\ViewHelpers}

<div class="my-content-element">
    <!-- Check DCP-Mode -->
    <f:switch expression="{dcp:mode.get()}">
        <f:case value="my-dcp-mode-value">
             <!-- Template for "my-dcp-mode-value" goes here -->
        </f:case>
        <f:case default="TRUE">
             <!-- Template for default rendering goes here -->
        </f:case>
    </f:switch>
</div>

For this example to work, the DCP mode has to be set in the plugin settings. If the select field is empty, make sure to define the available DCP modes in page-TypoScript first:

tx_dcp.pluginModes {
    #value = Label
    my-dcp-mode-value = My DCP-Mode
        some-other-value = Some other Mode
}

If you change the template of your content element like shown in the examples above and therefore isolate the template used for default rendering and rendering by the DCP plugin, it should be possible to achieve your goal.

Please let me know if it worked out for you!

Hi Chris!, Thx for Your answer and the example and take your time to explaine. I really appreciate!

Your solution sounds logical and easy to realize. But it looks like my skills are not hight enough. I get only a white page in the frontend. I am really sick of wasting so many houers for now - maybe i give it a try next week and check out whats the reason for the white page - and maybe i can get it work next week.

I thougt I was close to reach my goal, with my former try - everything is like i need it except i coult not get the image of the tt_content element seperate. I was using the pw_teaser extension with older TYPO3 versions, an i can remember, i had the same problem to get the images from the content elements. But i was able to fix that with some corrections - unfortunately i can`t reconstruct what i did to get it work that. Ok, thats it for now - i let you know next week what i found out. Many greetings and thanks!

Hi Jürgen,

thank you for letting me know and too bad it didn't work out. The most important part to understand here really is to handle the specific rendering definitions in the fluid template of the content element and not the DCP plugin.

In your code from your first post you are basically implementing your own logic to get the content elements which DCP already does for you. Within the DCP fluid template you can easily access all content elements with the elements variable. For simple use cases the default DCP/List.html fluid template does not even have to be modified.

Let's pretend you want to render some content elements of type "Text & Media". With no additional configuration, the output of the DCP plugin would show each content element with their default fluid template. The result is the same as to copy every matched content element to the position of the DCP plugin in the backend by hand.

In your case however, the output of each content element should be different. To achieve this, the fluid template of the content element, and not the DCP plugin template, has to be modified.

In this example the template to be modified is that of the content element "Text & Media". This particular content element type is provided by the fluid_styled_content extension. Let's override the template paths for this extension to supply the modified template:

TypoScript Constants

styles.templates.templateRootPath = fileadmin/templates/fluid_styled_content/Templates
styles.templates.layoutRootPath = fileadmin/templates/fluid_styled_content/Layouts
styles.templates.partialRootPath = fileadmin/templates/fluid_styled_content/Partials

This example assumes that custom fluid templates are stored in fileadmin/templates

Next put the template override for "Text & Media" in fileadmin/templates/fluid_styled_content/Templates/Textmedia.html:

Textmedia.html

{namespace dcp=Sethorax\Dcp\ViewHelpers}

<f:layout name="Default" />

<f:section name="Main">
    <f:switch expression="{dcp:mode.get()}">
        <!-- Template if rendered via DCP -->
        <f:case value="my-mode">
            <div class="image-only">
                <f:image image="{files.0}" />
            </div>
        </f:case>

        <!-- Template if rendered normally -->
        <f:case default="TRUE">
            <!--
                ...Default template goes here...
            -->
        </f:case>
    </f:switch>
</f:section>

The new template contains a switch/case statement which determines how the content element should be rendered depending on the currently active DCP mode. So for the first case to match, the DCP mode my-mode has to be defined:

pageTS

# DCP modes
tx_dcp.pluginModes {
    my-mode = My Mode
}

Now that the mode is defined, the last thing is to select it in the DCP plugin settings.

With this example all content elements of type "Text & Media" should just render the heading** and the specified image. All other content elements of this type are rendered normally.

** due to the way the original template of Text & Media is constructed, the heading is rendered in it's own fluid section. In the example above only the section Main is altered.

Hi Chris! Thx for take your time again, to explaine, what to do step by step I did same steps before (i already use custom Contentelements-Templates), and after follow your guide again step by step i had the same result with showing only a white page.

So far the bad news.

The good news - it worked out for me by using conditions:

<f:if condition="{0:'{dcp:mode.get()}'} == {0:'my-mode'}">
    <f:then>
         <div class="textpic-item textpic-gallery">
            <f:render partial="Media/Gallery" arguments="{_all}" />
        </div>
        <f:render partial="Header/All" arguments="{_all}" />        
            <f:format.html>{data.bodytext}</f:format.html>      
    </f:then>
    <f:else>
<!--    ...Default template goes here... -->
    </f:else>
</f:if>

The code seems not to work in my case. I got a error message saying something like missing value. I am fine by using conditions and manage my output with them, so I dont investigate the error message.

Now i need to load my custom partial (copy original Galery-Partial) and render my Custom "TeaserGalery"

and adapt it to my needs. I will find out how to change it to my needs.

In your case however, the output of each content element should be different.

My goal is to have Teaser-Boxes on the root-page - all same styled, no matter like the original content looks like - for example: Allways the image on top, same size for the Headline and a croped Bodytext, and a link to the page with the "original" content.

What about implement that option into Your plugin? Would that not be a nice feature have that kind of options?

Show Image - Headline -Bodytext - Link
Show Headline, Text and Link only
Show Dummy-Image if no Image used in the Content-Element

I know, wanting some more options is easy to say, to realize it is the big part. But maybe You think about to expand your nice extension in that way or you got other/better ideas?

Anyway i am really happy now with your great Extension, i can customice the output now in the way i want to have it - THANK YOU VERY MUCH by give me a helping hand and take Your time to make it work out for me. Have a nice day! Jürgen

chfoidl / typo3-dcp

Get (only) the image of a tt_content element. #4