CODEWITHSUNDEEP
phptypo3typo3-7.x
Chi
Chi

Reputation: 1410

Typo3 7.4: modify new tt_content.layout

I created a new tt_content.layout: 

TCEFORM.tt_content.layout.addItems.10 = Layout10

now how do I change how this layout looks like? I want the image of a textpic element to be shown first, is there a way to achieve this? How?

Any hints would be appreciated. Thank you.

Upvotes: 0

Views: 539

Answers (2)

Urs
Urs

Reputation: 5122

If you use fluid_styled_content:

Define the path of your template overrides in your constants.

Here's how I do it:

# overrides for fluid_styled_content
# will become lib.fluidContent.templateRootPaths.10
styles.templates.templateRootPath = {$templatePath}/Resources/Private/FSC/Templates
styles.templates.layoutRootPath = {$templatePath}/Resources/Private/FSC/Layouts
styles.templates.partialRootPath = {$templatePath}/Resources/Private/FSC/Partials

This tells fsc to look for templates in that folder. If it finds them there, it will prefer them to the originals.

In this example, it could be typo3conf/ext/template/Resources/Private/Content/FSC/Templates/Textmedia.html

There, you can use a condition to switch the rendered layout

  <f:comment>Default Layout</f:comment>
  <f:if condition="{data.layout} == 0">
    <div class="ce-textpic ce-{gallery.position.horizontal} ce-{gallery.position.vertical}{f:if(condition: gallery.position.noWrap, then: ' ce-nowrap')}">
        <f:if condition="{gallery.position.vertical} != 'below'">
            <f:render partial="MediaGallery" arguments="{_all}" />
        </f:if>

        <div class="ce-bodytext">
            <f:if condition="{gallery.position.noWrap}">
                <f:render partial="Header" arguments="{_all}" />
            </f:if>
            <f:format.html>{data.bodytext}</f:format.html>
        </div>

        <f:if condition="{gallery.position.vertical} == 'below'">
            <f:render partial="MediaGallery" arguments="{_all}" />
        </f:if>
    </div>
  </f:if>
  <f:comment>Custom Layout</f:comment>
  <f:if condition="{data.layout} == 10">
    <div class="myclass"><f:format.html>{data.bodytext</f:format.html></div>
  </f:if>

To see what data is available, try 

<f:debug>{data}</f:debug>

You can also dig deeper, sometimes more content appears when drilling:

<f:debug>{data.someProperty.heresmorestuff}</f:debug>

Upvotes: 1

rob-ot
rob-ot

Reputation: 1264

You only added a new option to the layout array, but you did not defined a new layout.

The option can be used as a 'case'. If you use css_styled_content, take a look at the setup.txt typoscript of this extension at typo3/sysext/css_styled_content.

If you use fluid_styled_content, take a look at that extension. The layout option will be have value '10', thus you can use fluid and an If condition to define your layout there.

Upvotes: 0

Related Questions