Content Elements

Content elements make it possible to edit complex contents while offering good usability and maximum comfort.

Basically the content e.g. of a CMS page is composed from predefined content element templates. The user can choose the type and the sequence of those elements.

ullContentElements is a drop-in widget for any textarea field.


Each content element widget implementation requires 3 configuration items:

  1. Configuration of the ullContentElement widget in the desired model's ullColumnConfigCollection class (e.g. ullCmsPage)
  2. A columnsConfigCollection for each content element type (=the data fields / the form)
  3. A content element template for each content element type (=view)


We want to use content elements for a newsletter body.

1. Configuration of the ullContentElement widget

For the ullNewsletter the correct columsConfig would be


If the file does not exist, copy it from the module (and mimic the directory structure):


Add the following code to the applyCustomSettings() method:

   * Applies model specific custom column configuration
  protected function applyCustomSettings()
      ->setWidgetOption('element_types', array(
        'newsletter_preface' => array(
          'label' => __('Preface'),
        'newsletter_block'   => array(
          'label' => __('Block'),
      ->setWidgetOption('css_class', 'newsletter_your_layout_slug')
      ->setWidgetOption('stylesheet', '/css/ull_newsletter_layout_your_layout_slug_prefixed.css')

That means we want the "body" field to use the contentElements widget, and we defined 2 content element types.

The last two lines are for CKEditor. CKEditor has some shortcomings with CSS. See for details.

2. Content Element Data Fields

Each content element type needs to know which data fields it should offer. This is defined in a columnsConfiguration.

For our "newsletter_preface" type we create


The filename's syntax is "UllContentElement" + the camelcased type name + "ColumnConfigCollection.class.php"

Here's the code:

class UllContentElementNewsletterPrefaceColumnConfigCollection extends UllContentElementColumnConfigCollection
  protected function applyCustomSettings()
      ->setOption('single', true)
      ->setOption('image_width', 160)
      ->setOption('image_height', 1000)
      ->setOption('generate_thumbnails', false)

      ->setWidgetOption('CustomConfigurationsPath', '/js/CKeditor_config_newsletter.js')
      ->setWidgetAttribute('class', 'ull_cms_content')    
      ->setWidgetOption('width', '400px')
      ->setWidgetOption('height', '150px')      

We created two data fields "image" and "body". The image is automatically scaled during upload. The body uses CKEditor. (Fix the css path in your CKeditor config @see:

Now repeat the same if you need more element types e.g. for the "newsletter_block" type.

3. Content Element Templates

At last we need a template for each content element type which renders the "view" html as desired.

Example filename and code for the "preface" type:


<?php $values = $sf_data->getRaw('values') ?>

<div style="float: left;">
  <?php echo image_tag($values['image']) ?>
  <?php echo auto_link_text($values['body']) ?>

Now repeat the same if you need more element types e.g. for the "newsletter_block" type.