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.

Configuration

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)

Example

We want to use content elements for a newsletter body.

1. Configuration of the ullContentElement widget

For the ullNewsletter the correct columsConfig would be

apps/frontend/lib/generator/columnConfigCollection/UllNewsletterEditionColumnConfigCollection.class.php

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

plugins/ullMailPlugin/lib/generator/columnConfigCollection/UllNewsletterEditionColumnConfigCollection.class.php

Add the following code to the applyCustomSettings() method:

  /**
   * Applies model specific custom column configuration
   * 
   */
  protected function applyCustomSettings()
  {
    parent::applyCustomSettings();
    
    $this['body']
      ->setMetaWidgetClassName('ullMetaWidgetContentElements')
      ->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 http://www.ullright.org/ullWiki/edit/ullnewsletter-dev-manual 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

apps/frontend/lib/generator/columnConfigCollection/UllContentElementNewsletterPrefaceColumnConfigCollection.class.php

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

Here's the code:

class UllContentElementNewsletterPrefaceColumnConfigCollection extends UllContentElementColumnConfigCollection
{
  protected function applyCustomSettings()
  {
    parent::applyCustomSettings();
    
    $this->create('image')
      ->setLabel('Image')
      ->setMetaWidgetClassName('ullMetaWidgetGallery')
      ->setOption('single', true)
      ->setOption('image_width', 160)
      ->setOption('image_height', 1000)
      ->setOption('generate_thumbnails', false)
    ;    

    $this->create('body')
      ->setLabel('Body')
      ->setMetaWidgetClassName('ullMetaWidgetCKEditor')
      ->setWidgetOption('CustomConfigurationsPath', '/js/CKeditor_config_newsletter.js')
      ->setWidgetAttribute('class', 'ull_cms_content')    
      ->setWidgetOption('width', '400px')
      ->setWidgetOption('height', '150px')      
      ->setIsRequired(true)
    ;  
    
  }  
}

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: http://www.ullright.org/ullWiki/edit/ullnewsletter-dev-manual)

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:

apps/frontend/modules/ullWidget/templates/_contentElementNewsletterPreface.php

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

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

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