Typo3 V6: How to create a content element container? (without TV)

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?

Solution 1

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.

Solution 2

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

Solution 3

There is an startnext project where known bugs in grid_elements has been fixed. Afaik the next step is to make grid_elements compatible with TYPO3 6. But i guess, it will need a few weeks before they publish. But, perhaps they will start with Version 2 (which will compatible with TYPO3 6 these days...).

Have a look at the forge project.

Solution 4

You might want to take a look at the extension DCE (http://typo3.org/extensions/repository/view/dce); there you can define the content element yourself. Alternatively you can create literally anything with the http://fedext.net/ framework. Just read the latest blog posts to get an idea on how to create dynamic content elements with those extensions.

Solution 5

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.

View more solutions

Comments

[Maurice]

Thank you for your answer. Are there any specific IRRE settings I should use? I have tried type=inline + foreign_table=tt_content. This shows the editor with the possibility of creating a new element, though it does not save the element-to-IRRE relation correctly. (new element is saved in database but does not show up in IRRE after reloading admin page)

[tmt]

An example IRRE added. Remember that the fields must first be created in the database as some (long enough) text fields. Name them something like user_2col_left and user_2col_right. The fields will store comma-separated list of content UIDs.

[Maurice]

Thank you very much. This did not work for me either, however I am currently using a plugin to be able to add the content elements. I hope that I'm not asking too much of you, but would u have an example extTables.php for defining a new content element type? (google has not helped me on this yet)

[tmt]

Added to the answer. Note that this is really for TYPO3 4.5.x so $TCA['tt_content']['types']['user_2cols']['showitem'] will most probably be wrong. You have to take take it from your version of TYPO3 and modify it (remove fields, add your fields) so it fits your new type.

[Maurice]

Thank you for your suggestion. I tried DCE but it didn't work for me. Lot's of backend exceptions, backend logoffs etc. I have looked at fedext framework but it looks like a huge overkill. I'm looking for a simple solution.

[Maurice]

Thank you very much for your answer and your time. I can't seem to get this to work. I'm trying different ways of implementing this but no content element shows up in the backend.

[tmt]

You are welcome. Unfortunately I cannot help you with TYPO3 6.x as I haven't played with it yet.

[Maurice]

I understand completely. Thank you very much for sharing your experience with me.

[Armin]

Hey Maurice, I'm the developer of DCE extension. If you have issues, it would be nice to create tickets on forge.typo3.org, so I can fix them.

[Maurice]

It looks like you did an update? I don't get any errors now. How would you recon I can create a container that can hold multiple other content elements?

[Maurice]

I have seen this, and it looks like it will become exactly what I need. Only downside is that it's not finished yet. I'm upvoting this because it might be a good answer for future googlers.

[maholtz]

startnext.de/typo3-grid-elements-2-0/blog/?bid=13411 "Version 2.0 for TYPO3 >= 6.0 will follow within the next days." I am pretty sure, that this will be the best solution. That are the same people which created the Backend Grid which made into the core. And there are some core-developers involved.

[Maurice]

Thank you for the update. For now I have a workable fix. If there's time left, I might consider switching later.

[Maurice]

I did not get this to work. There was no way of adding content elements to the displayed containers (no buttons and no drag/drop). Thank you for your suggestion though.

[yunzen]

I'd like to see a demo of IRRE with fluidcontent. Alternatively I'd like to see, how I can use enableFields inside <flux:flexform.object>

[Ghanshyam Gohel]

is it possible to have multiple(dynamik) grid like <flux:form.section name="aboutsec" label="Container"> <flux:form.object name="aboutobt" label="Add new"> <flux:field.input name="tabtitle" label="Tab Title" /> <flux:grid> <flux:grid.row> <flux:grid.column name="content" label="Content" /> </flux:grid.row> </flux:grid> </flux:form.object> </flux:form.section>