Typo3 V6: How to create a content element containe

Question

For a project I'm using Typo3 v6.0. I'm looking to create nested content elements, or a content element container. I want to be able to create an inline two-column layout without using a specific template for it. I'm looking to do this without the use of templavoila.

Extensions I have tried are gridelements, kb_nescefe, bs_fce, multicolumn but these do not work because they are not compatible with Typo3 V6.

I'm aiming for an end result like the attached image. Where the inline two-column content can be ommitted, used once or used multiple times, containing any other content element.

I'm looking for the most simple solution here. I prefer not having to invest a lot of learning time in a solution like flux and whatnot (http://fedext.net/ - looks cool, but also too timeconsuming for now)

Any ideas?

Answer 1

I would...

1. Extend the tt_content table with 2 new fields (one for each column). You can do it manually in phpMyAdmin but then you would risk that the fields get accidentally deleted in the install tool when doing database comparison or something. So it's better to create a very simple extension for this - it's really just 2 files: ext_emconf.php describing the extension and ext_tables.sql for definition of the new fields.

2. Define in typo3conf/extTables.php a new content element type (= the container) and the 2 new fields (one for the left column and one for the right column) each of them being IRRE type.

3. Set TCAdefaults.tt_content.pid = xxx in TypoScript Configuration of the root page so that the left/right column elements are not stored on the page itself but in some sysfolder.

4. Define the new content element in the template setup so that it's rendered as you want it.

Updates

Example IRRE field:

'user_2col_left' => array(
    'exclude' => 1,
    'label' => 'Left column',
    'config' => array(
        'type' => 'inline',
        'foreign_table' => 'tt_content',
        'maxitems' => '10',
        'appearance' => array(
            'collapseAll' => '1',
            'expandSingle' => '1',
            'newRecordLinkPosition' => 'bottom',
            'showAllLocalizationLink' => '1',
            'showPossibleLocalizationRecords' => '1',
            'showSynchronizationLink' => '1',
            'useSortable' => '1',
            'enabledControls' => array(
                'hide' => '0',
            ),
        ),
        'behaviour' => array(
            'disableMovingChildrenWithParent' => '1',
            'localizeChildrenAtParentLocalization' => '1',
        ),
    )
),

New content type example:

t3lib_div::loadTCA('tt_content');
$TCA['tt_content']['columns']['CType']['config']['items'][] = array(
    0 => '2 columns',
    1 => 'user_2cols',
    2 => '../fileadmin/user_2cols.gif',
);
t3lib_SpriteManager::addTcaTypeIcon('tt_content', 'user_2cols', '../fileadmin/user_2cols.gif');
$TCA['tt_content']['types']['user_2cols']['showitem'] = 'CType,header,--div--;LLL:EXT:cms/locallang_ttc.xml:tabs.access,--palette--;LLL:EXT:cms/locallang_ttc.xml:palette.visibility;visibility,--palette--;LLL:EXT:cms/locallang_ttc.xml:palette.access;access,--div--;LLL:EXT:cms/locallang_ttc.xml:tabs.appearance,--palette--;LLL:EXT:cms/locallang_ttc.xml:palette.frames;frames,--palette--;LLL:EXT:cms/locallang_ttc.xml:palette.textlayout;textlayout,--div--;LLL:EXT:cms/locallang_ttc.xml:tabs.extended';

Notes

• This is a simple (and a bit crude) solution for your particular case. Better solution would take into account possibility of dynamically setting the number of columns in the container.

• There will be some limitations as to working with the left/right column elements - you won't be able to easily move them or copy them between various containers.

Answer 2

Here is a video of a conference presentation on how to make FCEs without using TemplaVoila. Unfortunately only in German, but maybe it helps.

http://vimeo.com/29213790

Answer 3

I would suggest you to try the "multicolumn" plugin. It doesn't have dependencies as other implementations (I've tried almost if not all of the FCE substitutes) and it has nesting capabilities .. overall it's playing nicely with TYPO3. Lately it has been ported to TYPO3 v6. I'm using it on more than few sites and I'm quite satisfied. (There are few bugs, like displaying wrong "Lost elements", but there is a fix on the forge page)

Here is a link to TER documentation: http://typo3.org/extension-manuals/multicolumn/2.1.14/view/

Answer 4

Alright, I have semi solution. I have gone with the WEC Content Elements plugin to manage custom content elements.

Then I have used the following flexform:

<T3DataStructure>
    <ROOT>
        <type>array</type>
        <el>
            <leftColumn>
                <TCEforms type="array">
                    <label>Left column</label>
                    <config>
                        <type>inline</type>
                        <foreign_table>tt_content</foreign_table>
                        <maxitems>100</maxitems>
                        <appearance>
                            <showSynchronizationLink>0</showSynchronizationLink>
                            <showAllLocalizationLink>0</showAllLocalizationLink>
                            <showPossibleLocalizationRecords>0</showPossibleLocalizationRecords>
                            <showRemovedLocalizationRecords>0</showRemovedLocalizationRecords>
                            <expandSingle>1</expandSingle>
                        </appearance>
                    </config>
                </TCEforms>
            </leftColumn>
            <rightColumn>
                <TCEforms type="array">
                    <label>Right column</label>
                    <config>
                        <type>inline</type>
                        <foreign_table>tt_content</foreign_table>
                        <maxitems>100</maxitems>
                        <appearance>
                            <showSynchronizationLink>0</showSynchronizationLink>
                            <showAllLocalizationLink>0</showAllLocalizationLink>
                            <showPossibleLocalizationRecords>0</showPossibleLocalizationRecords>
                            <showRemovedLocalizationRecords>0</showRemovedLocalizationRecords>
                            <expandSingle>1</expandSingle>
                        </appearance>
                    </config>
                </TCEforms>
            </rightColumn>
        </el>
    </ROOT>
</T3DataStructure>

And the following frontend typoscript setup:

tt_content.twoColumnContainer = COA
tt_content.twoColumnContainer {
  10 = < lib.stdheader

  20 = COA
  20 {
    wrap = <div class="twocolumn-container"> | </div>

    10 = RECORDS
    10 {
        tables       = tt_content
        dontCheckPid = true
        source.data  = t3datastructure : pi_flexform->leftColumn
        wrap         = <div class="twocolumn-left"> | </div>
    }

    20 = RECORDS
    20 {
        tables       = tt_content
        dontCheckPid = true
        source.data  = t3datastructure : pi_flexform->rightColumn
        wrap         = <div class="twocolumn-right"> | </div>
    }
}

This has resulted in a backend content element that uses the IRRE editor to add/edit content elements. The container element has no preview though, and the two columns are positioned below one another (instead of next to eachother). All and all this is the only workable solution I have found after many hours of googling and trying out various methods/plugins.

Hope this helps someone.

Answer 5

Try to use Fluid Powered TYPO3. With the new pre-cofigured Distribution "site"

http://typo3.org/extensions/repository/view/site

Screencast from Claus Due

http://vimeo.com/110469200

Don't forget to add typo3conf/AdditionalConfiguration.php How do I install it?

Answer 6

I'm the author of the Fluid extension suite (flux, fluidcontent, fluidpages etc.) and would of course like to help you learn about using FluidContent to make FCEs. It's really not as advanced as one might fear. At the very least, it's much more compact than the example above. The following achieves the same result as your example, in FluidContent:

TypoScript (static loaded: css_styled_content, fluid_content)

plugin.tx_fed.fce.yourname {
    templateRootPath = fileadmin/Templates # if you don't want to use an extension (1)
    # partial and layout root paths not defined (2)
}

Regarding (1) you really, really should. Using an extension separates your user uploaded media etc. from your site content. If you do that instead, simply use an EXT:... path to the Private resources folder. And regarding (2) these paths are only necessary if you actually wish to use partials.

Then, the template file itself (auto-detected when path where file is located is added in TS):

{namespace flux=Tx_Flux_ViewHelpers}
<f:layout name="Content" />
<f:section name="Configuration">
    <flux:flexform id="columns" label="Columns" icon="path/to/iconfile.jpg">
        <flux:flexform.grid>
            <flux:flexform.grid.row>
                <flux:flexform.grid.column>
                    <flux:flexform.content name="left" label="Left content" />
                </flux:flexform.grid.column>
                <flux:flexform.grid.column>
                    <flux:flexform.content name="right" label="Right content" />
                </flux:flexform.grid.column>
            </flux:flexform.grid.row>
        </flux:flexform.grid>
    </flux:flexform>
</f:section>
<f:section name="Preview">
    <flux:widget.grid />
</f:section>
<f:section name="Main">
    <div class="row">
        <div class="span6">
            <flux:flexform.renderContent area="left" />
        </div>
        <div class="span6">
            <flux:flexform.renderContent area="right" />
        </div>
    </div>
</f:section>

As you can see, you are entirely free to add any HTML you wish, use any ViewHelpers (even render TS objects if that's your thing). To add additional content elements, simply add new template files - they will automatically be recognised.

But it will work differently from IRRE (which you can also achieve using Flux fields - let me know if you wish to see a demo of that): it will allos you to use the native drag-n-drop in TYPO3 to place your child content elements into actual content containers - like you used to do with TV.

As such, Fluid Content is probably the closest you will come to TV.

Regarding Flux being overkill, I'd like to give you an idea of what it actually performs:

• Cached reading of TS to know paths
• Cached lists of detected templates
• Fluid caches to native PHP, Flux only uses Fluid to store config (which means it's native PHP all the way through)
• Flux itself does register a hook subscriber which reacts to content being saved, this does slow the backend (unnoticeably)
• Flux itself doesn't create load on the FE with one exception: when in uncached plugins (FluidContent is cached!) Flux may call upon the native PHP cached code to read configurations.
• FluidContent consists of an extremely simple controller; the output is fully cached.
• You may want to add the VHS ViewHelper collection - it by itself creates absolutely zero load: it only uses resources where you use its ViewHelpers. It contains a heap of ViewHelpers I'm sure you will find useful.

It may look overwhelming at first but I guarantee you there's less to know and to remember than in pibase, FlexForm XML, TS or native Extbase plugins. If you want even more of a safety net I highly recommend using XSD schemas in your editor - this gets you auto-completion of the special <flux:....> tags and others.

However: it will require you to learn a small bit about Fluid's logic: what Layouts and Partials are (you will most likely want to use those at some point) and how to use the special tags and refer to variables (which will be required in other use cases - but not the one at hand; it only requires simple ViewHelper tags).

I hope this helps. And that I've reduced your fear that Flux is overkill and too much to learn ;)

Cheers,
Claus aka. NamelessCoder