ullCms Content blocks / Team page

ullCms content blocks allow lightweight editable blocks within the layout or any page. Typical use cases would be an editable block in the layout, and multiple similar blocks like team members on a team page.

Here's a short tutorial how to setup a teampage

Goal: A "Team" page with a block for each team member with photo, name, job description and contact details. Furthermore we like to have add, edit and delete functions.

Prerequisites

Create a "Team" cms page.

1. Create the "team-member" content type

Note: A "team_member" content is already pre-configured in a fresh ullright installation. So you can skip the steps below.

• Go to the ullCms admin/startpage and select "Manage Content Types"
• Add a content type - in our case "Team member"

2. Create a columnsConfig for the "team-member" content block type.

Note: An example columsConfig is available in /apps/frontend/lib/generator/columnConfigCollection/UllCmsContentBlockTeamMemberColumnConfigCollection.class.php

<?php 

/**
 * Example columnsConfig for "team_member" content block
 * 
 * @author klemens.ullmann-marx@ull.at
 *
 */
class UllCmsContentBlockTeamMemberColumnConfigCollection extends UllCmsContentBlockColumnConfigCollection
{

  protected function applyCustomSettings()
  {
    parent::applyCustomSettings();
    
    $columns = array(
      'name',
      'title',
      'body',
      'image',
      'sequence',
    );
        
    $this->disableAllExceptCommonHiddenAnd($columns);

    $this['name']
      ->setLabel(__('Name', null, 'common'))
    ;
    
    $this['title']
      ->setLabel(__('Job title', null, 'ullCoreMessages'));
    ;
    
    $this['body']
      ->setMetaWidgetClassName('ullMetaWidgetCKEditor')
      ->setWidgetOption('CustomConfigurationsPath', '/js/CKeditor_config.js')
      ->setWidgetOption('width', '550px')
      ->setWidgetOption('height', '250px')
      ->setHelp(__('[SHIFT %arrow%] - [ENTER] creates single line breaks', 
          array('%arrow%' => '&uArr;'), 'ullCoreMessages'))
    ;      
    
    $this['image']
      ->setMetaWidgetClassName('ullMetaWidgetGallery')
      ->setLabel(__('Image', null, 'ullCmsMessages'))
      ->setOption('image_width', 80)
//       ->setOption('image_height', 300)
      ->setOption('generate_thumbnails', false)
      ->setOption('single', true)     
    ;  
    
    // Set the page slug of the parent page here
    $this['parent_ull_cms_item_id']
      ->setDefault(Doctrine::getTable('UllCmsPage')->findOneBySlug('team')->id)
      ->markAsAdvancedField()
    ;
    
    $this->order($columns);
    
  }    
  
}

Configure your edit form here. Add columns, labels etc.

3. Add a controller action

Open /apps/frontend/modules/ullCms/actions/actions.class.php

Note: the team example is already pre-defined.

Example action code:

  /**
   * Team page action
   * 
   * @param sfRequest $request
   */
  public function executeShowTeam(sfRequest $request)
  {
    $this->setVar(
      'team_members',
      UllCmsContentBlockTable::findByParentSlug($this->doc->slug),
      true
    );
    
    $this->allow_edit = UllUserTable::hasPermission('ull_cms_content_block_edit');
  }  

It retrieves all content blocks which have the team page as parent.

4. Create the view template

Create the template file /apps/frontend/modules/ullCms/templates/teamSuccess.php

Note: this example template already exists in a fresh ullright installation.

<?php slot('ull_cms_additional_body') ?>

<div id="ull_cms_team_members">

  <?php foreach ($team_members as $team_member): ?>
    <?php $team_member->refreshRelated('Translation') // TODO: Why is this necessary? ?>
    <div class="ull_cms_team_member">
    
      <div class="ull_cms_team_member_image">
        <?php echo image_tag($team_member['image'])?>
      </div>
      
      <div class="ull_cms_team_member_content">
        <p>
          <strong>
          <?php include_component('ullCms', 'editLink', array('doc' => $team_member)) ?>
          <?php include_component('ullCms', 'deleteLink', array('doc' => $team_member)) ?>
          <span class="ull_cms_content_heading_text"><?php echo $team_member->name ?></span>
          </strong>
        </p>
        <p>  
          <em><?php echo $team_member->title ?></em>
        </p>
        <?php echo auto_link_text($team_member->body, $link = 'all', array(
              'class'  => 'link_external',
              'target' => '_blank',
        )); ?>
      </div>      
      
    </div>
  <?php endforeach ?>
  
  <?php if ($allow_edit): ?>
    <div class="ull_cms_team_member inline_editing">
      <div class="ull_cms_team_member_image">
      </div>
      <div class="ull_cms_team_member_content">
        <h3>
          <?php echo link_to('<span class="big_add">+</span> ' . 
              __('Add team member', null, 'ullCmsMessages'), 
            'ullCmsContentBlock/create?content_type=team-member') ?>
        </h3>
      </div>
  <?php endif ?>
</div>

<?php end_slot() ?>


<?php require_once 'showSuccess.php' ?>