In tt_address add new layout switchable

TYPO3 Tipps

You often need your own layout in the tt_address extension. This can already be customised via the templates. But if you want a switchable layout, you will find the solution here.

If an image is referenced or uploaded in the TYPO3 News extension, the editor must specify whether the image is also displayed as a preview image in the list view.

This makes perfect sense, because you only want to display one image in the list and have to tell TYPO3 which one if more than one image has been uploaded.

There are use cases in which only one image is ever used. Here too, the editor must switch the image from "Show only in detail view" to "Show only in list view" or "Show in list and details".

This is often forgotten, and so only the default image appears in the list.

Workarround

Firstly, the following entry must be made in the TS Config of the root page (i.e. page properties / resources / TSConfig). This can be found in the documentation for the tt_address extension:

TCEFORM {
    tt_content {
        pi_flexform {
            ttaddress_listview {
                sDISPLAY {
                    settings\.displayMode.addItems {
                        2 = mit Position
                    }
                }
            }
        }
    }
}

Export files

Duplicate the files with the extension tt_address in typo3conf/ext/tt_address in a directory - for example in fileadmin:

fileadmin/tt_address_telefon/Resources/Private/Templates/

fileadmin/tt_address_telefon/Resources/Private/Partials/

fileadmin/tt_address_telefon/Resources/Private/Layouts/

Then the setup of the root template tells the extension where the current files are located:

plugin.tx_ttaddress.view.templateRootPath = fileadmin/tt_address_telefon/Resources/Private/Templates/
plugin.tx_ttaddress.view.partialRootPath = fileadmin/tt_address_telefon/Resources/Private/Partials/
plugin.tx_ttaddress.view.layoutRootPath = fileadmin/tt_address_telefon/Resources/Private/Layouts/

We have added another dropdown with the entry in TSConfig. You can already see this (see the image above).

We now have to do two things to ensure that this layout is also rendered.

In the folder

fileadmin/tt_address_telefon/Resources/Private/Partials

there is a file e.g.

DisplayMode_2.html

I have simply duplicated the file ListItem.html and renamed it. The layout can be customised there.

Now we search in the folder for the file List.html in

fileadmin/tt_address_telefon/Resources/Private/Templates/Address/List.html

We insert the following code into this file:

<f:section name="displayMode_2">
    <!--TYPO3SEARCH_end-->
    <f:if condition="{settings.hidePagination}">
        <f:then>
            <f:for each="{addresses}" as="address" iteration="iterator">
                  <f:render partial="DisplayMode_2" arguments="{_all}"/>
            </f:for>
        </f:then>
        <f:else>
            <f:widget.paginate objects="{addresses}" as="paginatedAdresses" configuration="{settings.paginate}">
                <f:for each="{paginatedAdresses}" as="address" iteration="iterator">
                    <f:render partial="ListItem" arguments="{_all}"/>
                </f:for>
            </f:widget.paginate>
        </f:else>
    </f:if>
    <!--TYPO3SEARCH_begin-->
</f:section>

Now you can differentiate the output with the layout.

TYPO3 Extension: tt_address
Version: <= 11.xx
Source: Extension TYPO3

Back