11

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?

example layout with inline two-column content

Maurice
  • 4,829
  • 7
  • 41
  • 50
  • Are you dismissing the templates for this because you want the flexibility of having the 2-column content positioned anywhere on the page and possibly even having more than one of these? – tmt Mar 01 '13 at 11:59
  • @cascaval yes that's correct – Maurice Mar 01 '13 at 12:22
  • I see. Well, in TYPO3 4.5.x it's not that complicated to create a new content element that would serve as a container for other elements (using IRRE) and that would render them in 2 columns. I have no idea if it would still work in TYPO3 6.0 as I haven't tried this version yet. – tmt Mar 01 '13 at 13:04
  • @cascaval Are you willing to explain how you would do this in 4.5.x? I am used to working with TV so I might be missing something. I can then try it out on 6. If u add as answer I can then accept if it works. – Maurice Mar 01 '13 at 13:15
  • also have a look at the "multicolumn" extension – Urs Mar 03 '13 at 13:17
  • @Urs thank you, as a matter of coincidence I was just trying it out. It had some incompatibilities with V6. But after fixing those I did not get it to work. It shows the containers in the backend but no buttons for adding or managing elements that they should contain. – Maurice Mar 06 '13 at 13:48
  • @Maurice But probably it's a 6.0 compatibility issue. Have you set error reporting to E_ALL? You could try with TYPO3 4.5 to have a comparison or ask the developers. I would post my TS I used, but Stackoverflow complains about the formatting... – Urs Mar 06 '13 at 20:01
  • @Urs yes, normally speaking it makes sense to display notices since they can hint towards where things might be wrong. In Typo3 however, you will see hundreds of notices on any given page. I could not make anything of them. – Maurice Mar 07 '13 at 08:37
  • @Maurice Ah, pity. I put it here https://dl.dropbox.com/u/11320047/multicolumn.txt – Urs Mar 07 '13 at 19:25

8 Answers8

15

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

Claus Due
  • 4,166
  • 11
  • 23
5

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.

maholtz
  • 3,631
  • 1
  • 17
  • 17
  • 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. – Maurice Mar 11 '13 at 09:21
  • 1
    http://www.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. – maholtz Mar 11 '13 at 09:31
  • Thank you for the update. For now I have a workable fix. If there's time left, I might consider switching later. – Maurice Mar 11 '13 at 10:13
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.

pgampe
  • 4,531
  • 1
  • 20
  • 31
  • 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 Mar 06 '13 at 10:36
  • 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. – Armin Mar 07 '13 at 09:44
  • 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 Mar 07 '13 at 10:00
  • 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. – Maurice Mar 13 '13 at 10:30
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.

Maurice
  • 4,829
  • 7
  • 41
  • 50
2

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.

tmt
  • 7,611
  • 4
  • 32
  • 46
  • 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) – Maurice Mar 01 '13 at 13:50
  • 1
    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. – tmt Mar 01 '13 at 14:47
  • 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) – Maurice Mar 01 '13 at 15:49
  • 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. – tmt Mar 01 '13 at 16:55
  • 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. – Maurice Mar 06 '13 at 12:41
  • You are welcome. Unfortunately I cannot help you with TYPO3 6.x as I haven't played with it yet. – tmt Mar 06 '13 at 13:14
  • I understand completely. Thank you very much for sharing your experience with me. – Maurice Mar 06 '13 at 13:47
1

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

yunzen
  • 32,854
  • 11
  • 73
  • 106
0

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/

Goran.it
  • 5,991
  • 2
  • 23
  • 25
0

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?

user2310852
  • 1,654
  • 1
  • 25
  • 52