generator to create flexible content elements with gridelements in Typo3 version 6.2 or higher

Usage no npm install needed!

<script type="module">
  import generatorGridFce from '';



Getting Started

What is generator-grid-fce?

It's a Yeoman generator to create flexible content elements with gridelements in Typo3 version 6.2 or higher



Not every new computer comes with a Yeoman pre-installed. He lives in the npm package repository. You only have to ask for him once, then he packs up and moves into your hard drive. Make sure you clean up, he likes new and shiny things.

$ npm install -g yo
$ npm install -g generator-grid-fce


In frontend typoscript configuration, the generator use gridelements_fce for building loop on flexform section

plugin configuration

It's a good practice to store all your flexible contents in a separated plugin or at least in your skin plugin.

I don't have such a thing !

Don't worry ! Create a directory in localconf/ext/ and go inside it Launch the generator and it'll make this directory a clean Typo3 plugin, ready to install.

I have a skin plugin, what should I do?

We just have some requirements in the configuration files of your plugin:

  • in ext_emconf.php, a 'createDirs' => '' should be set. It'll be filled when one of your FCE need an upload directory
  • in ext_localconf.php, a // ## insert here comment for TSConfig insertion
  • in ext_typoscript_setup.txt, a ## // insert here comment for Typoscript insertion

Launch generator

Initiate the generator in the typo3 extension where flexible content elements will be stored:

$ yo grid-fce

Follow instructions and build your own content element

Choose the type of custom element

[?] Content element type: (Use arrow keys)
‣ Create a custom content element       // -> Create custom: field by field
  Based on Click to Play Youtube video  // -> Copy a "Click To play" element
  Based on Image Caption                // -> Copy a "Image Caption" element
  Based on Slideshow                    // -> Copy a "Slideshow" element
  Full content element                  // -> Copy a full element
  Exit                                  // -> I let you guess

Loop on the custom fields you want to insert

  [?] Do you want another item? (Use arrow keys)
  ‣ Input                                     // -> Insert an input field
  Textarea                                    // -> Insert an textarea field
  Textarea with RTE                           // -> Insert an textarea field with Wysiwyg configuration
  Image                                       // -> Insert an image field
  Loop                                        // -> Insert an loop configuration
  No thanks, that's enough.                   // -> Generate all fields that you've chosen before

FCE screenshots example

Click to play
Image caption
Custom: highlighted numbers
Custom: blocks in columns
Custom: slider with count

Quick demo

Here's a quick demo of a slideshow custom element

and the results

# file : Configuration/Typoscript/slideshow.ts
page.includeCSS.slideshow = EXT:skinFlex/Resources/Public/css/slideshow.css

tt_content.gridelements_pi1.20.10.setup.slideshow {
  prepend = COA
  prepend {
    5 = < lib.stdheader

    6 = COA
      10 = INCLUDE_CSS
      10.slideshow = EXT:skinFlex/Resources/Public/css/slideshow.css

        slick-slider = EXT:skinFlex/Resources/Public/js/slick.min.js
        slideshow = EXT:skinFlex/Resources/Public/js/slideshow.js

    10 = TEXT
    10 {
      field = flexform_title
    20 {
      rootPath = section:slides/el
      10 = COA
      10 {
        wrap = <div class="slide">|</div>
        10 = IMAGE
        10 {
 = section_item:slide/el/image
          file.import.wrap = uploads/skinFlex/slideshow/
        20 = TEXT
        20 {
          data = section_item:slide/el/caption
        ## // insert here
  outerWrap = <div class="slideshow">|</div>


Thanks to Plou and JuJulien for their help.