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

Maurice picture Maurice · Mar 1, 2013 · Viewed 13.8k times · Source

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

Answer

Claus Due picture Claus Due · Mar 12, 2013

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