DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

How to create new content elements¶

First of all, include the Default static Template with the Template module. The following example is just a very quick tutorial. It's recommended to take a look at the static Template examples to see and learn how this works. All definitions are set with the TypoScript SETUP.

Define the new Content Element¶

First step is to set a unique internal key / name for the Content Element. All new Elements start with the same prefix, so the Extensions could detect them and we take the default setup of the Default static template.

tt_content.tx_contentdesigner_yourContentElementKey < plugin.tx_contentdesigner

Set the Title and Description for the Wizard and CType¶

After that we start defining and creating the Element for the Backend:

tt_content.tx_contentdesigner_myExampleCE.settings {
title = New Example CE
description = A nice Description for the Wizard
# ...see next step to go on...

Setting up the fields for the Backend¶

Let's define the fields for the backend. We do it like in a FlexForm XML file but a little bit simpler and in TypoScript style. In this example i'll adding a input field and a selection field for selecting a page of your typo3 site.

cObject {
  # This is the sheet Key like in a FlexForm File
  sDEF {
    # The Label for the Sheet
    sheetTitle = General

    # Adding the elements
    el {
      myinput {
        label = My Input
        config.type = input
      }

      thepage {
        label = Select a page
        config {
          type = group
          internal_type = db
          allowed = pages
          size = 1
          maxitems = 1
          minitems = 0
        }
      }
    }
  }
}

Create the preview in the page Wizard¶

By Typo3 default content Elements you can see on the selected Page all content Elements in his normal order with the preview of some of their fields. Like on the text and pic Element you can see the Text and a thumb ob the pictures. We can do this too.

# By default the preview object is set in the default
# static template and uses a COA (cObject) TypoScript with the first
# array (10.) to show the default header. In this example we overwrite it.
previewObj = COA
 previewObj {
    10 = TEXT
    10.field = myinput

    20 = RECORDS
    20 {
      source.field = thepage
      tables = pages
      dontCheckPid = 1
      conf.pages = TEXT
      conf.pages.field = title
      conf.pages.noTrimWrap = |Your selected page: ||
    }
}

Rendering in the frontend¶

Now we need to setup the frontend rendering of our new content Element as follows:

# You could define anything you want here (like FLUIDTEMPLATE or something else)
renderObj = COA
renderObj {
  10 = TEXT
  10.field = myinput
  10.wrap = <strong>|</strong>

  20 = RECORDS
  20 {
    source.field = thepage
    tables = pages
    dontCheckPid = 1
    conf.pages = TEXT
    conf.pages.field = title
    conf.pages.noTrimWrap = |Your selected page: ||
  }
}

Done¶

Thats all... you've created a new content Element. If you like to use a complex Flexform and not the cObject Definition as above use just thie followed line instead of

cObject {  …   }
cObjectFlexFile = path/to/your/flexform.xml