Imagetracker module

This chapter describes

1 Introduction

Imagetracker module allows the user to tag users on images in the frontend.

Only logged in users with tagging rights are allowed to edit an image and to create tags of users. Page visitors who are not logged in or who have no tagging rights can see tags but not edit them. However, a logged in user without tagging rights can still delete tags of himself.

In edit mode, faces are tracked automatically on the image and displayed as empty tags. In addition, the user can draw tags manually with the mouse.

In order to tag a person, the user must select values from a predefined autocomplete dropdown list and click the save button.

The text format of the displayed name and dropdown list item can be configured in ImagetrackerModule.php by template strings.

Available fields: firstname, lastname, username, email

Delimiter: {{}}

For example:


public $renderTemplateStr = '&lt;{{email}}&gt;';            // for dropdown list item, e.g. <john@doe.at>
public $inputTemplateStr = '{{lastname}}, {{firstname}}';   // for input field; e.g. Doe, John

Changes to the database structure include: {{imagetracker_tags}} – whose entries are tags of users on an image, and adding two columns taggings_rights and tagging_allowed to {{profiles}}.

2 Structure

Imagetracker module is placed in folder <portal>/common/modules/imagetracker.

Structure is the same as for other modules. Changes to the database have to be made.

3 How to configure the module

Preparation in the backend: In common/migrations create two migration files, one for the database table {{imagetracker_tags}} and one for adding two columns to {{profiles}}. Run migrations


/common/yiic migrate

Include the module with setting wether to include jQuery and jQuery-UI libraries inside client_main.php. If the site loads them already, you don’t have to include them a second time:


'modules'=>array(
        'imagetracker' => array(
            'class' => 'common.modules.imagetracker.ImageTrackerModule',
            'includeJQueryUI' => true
        )
    ),

4 How to use Imagetracker widget

Imagetracker module includes 1 widget. It adds an image with tagging functionality.

Image size can be changed by setting the width percentage.

The settings for the widget are:


  $this->widget("imagetracker.widgets.ImageTrackerWidget", array(
        'pageId'=>$!{cms.page.id},
        'tagId'=>$!{cms.tag.id},
        'img'=>array(
              'id'=>$!{cms.tag.src.id}, 
              'url'=>'$!{cms.tag.parts.src}', 
              'width'=>'$!{cms.tag.parts.width}%',  
              'height'=>'$!{cms.tag.parts.width}%', 
              'alt'=>'$!{cms.tag.parts.alt}'
        ),  
    ))