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

8

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

Phenylketonuria answered 1/3, 2013 at 11:34 Comment(9)
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?Wadi
@cascaval yes that's correctPhenylketonuria
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.Wadi
@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.Phenylketonuria
also have a look at the "multicolumn" extensionFluviomarine
@Fluviomarine 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.Phenylketonuria
@Phenylketonuria 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...Fluviomarine
@Fluviomarine 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.Phenylketonuria
@Phenylketonuria Ah, pity. I put it here dl.dropbox.com/u/11320047/multicolumn.txtFluviomarine
P
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.

Phenylketonuria answered 11/3, 2013 at 9:27 Comment(0)
I
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

Impotence answered 12/3, 2013 at 19:40 Comment(2)
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>Reparative
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>Womble
C
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.

Curium answered 7/3, 2013 at 14:12 Comment(3)
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.Phenylketonuria
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.Curium
Thank you for the update. For now I have a workable fix. If there's time left, I might consider switching later.Phenylketonuria
U
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.

Unscratched answered 3/3, 2013 at 20:4 Comment(4)
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.Phenylketonuria
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.Lynnett
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?Phenylketonuria
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.Phenylketonuria
P
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.

Phenylketonuria answered 11/3, 2013 at 9:27 Comment(0)
W
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.

Wadi answered 1/3, 2013 at 13:43 Comment(7)
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)Phenylketonuria
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.Wadi
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)Phenylketonuria
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.Wadi
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.Phenylketonuria
You are welcome. Unfortunately I cannot help you with TYPO3 6.x as I haven't played with it yet.Wadi
I understand completely. Thank you very much for sharing your experience with me.Phenylketonuria
R
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

Reparative answered 12/3, 2013 at 16:32 Comment(0)
T
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/

Tonsillectomy answered 17/4, 2013 at 8:10 Comment(0)
S
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?

Schaaff answered 10/2, 2015 at 16:50 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.