1. Requirements
2. Usage
3. Working with database
4. Resources

Image tagging wrapper class for jQuery jTag

Requirements ¶

• Tested on Yii 1.1.8x

Usage ¶

1. Extract the downloaded compressed files to your application extensions directory
2. Just embed the following code to your view files:

<?php $this->widget('ext.imageTag.EImageTag',array(
  'src'=>'http://djpate.com/portfolio/jTag/demo/img/bettlejuice.jpg',
)); ?>

Working with database ¶

Model:

<?php

/**
 * This is the model class for table "image_tag".
 *
 * The followings are the available columns in table 'image_tag':
 * @property integer $id
 * @property string $label
 * @property integer $width
 * @property integer $height
 * @property integer $top_pos
 * @property integer $left_pos
 */
class ImageTag extends CActiveRecord
{
	/**
	 * Returns the static model of the specified AR class.
	 * @return ImageTag the static model class
	 */
	public static function model($className=__CLASS__)
	{
		return parent::model($className);
	}
	/**
	 * @return string the associated database table name
	 */
	public function tableName()
	{
		return 'image_tag';
	}

	/**
	 * @return array validation rules for model attributes.
	 */
	public function rules()
	{
		return array(
			array('label, width, height, top_pos, left_pos', 'required'),
			array('width, height, top_pos, left_pos', 'numerical', 'integerOnly'=>true),
			array('label', 'length', 'max'=>255),
			array('id, label, width, height, top_pos, left_pos', 'safe', 'on'=>'search'),
		);
	}
	/**
	 * @return array relational rules.
	 */
	public function relations()
	{
		return array(
		);
	}
	/**
	 * @return array customized attribute labels (name=>label)
	 */
	public function attributeLabels()
	{
		return array(
			'id'=>Yii::t('app','Id'),
			'label'=>Yii::t('app','Label'),
			'width'=>Yii::t('app','Width'),
			'height'=>Yii::t('app','Height'),
			'top_pos'=>Yii::t('app','Top Pos'),
			'left_pos'=>Yii::t('app','Left Pos'),
		);
	}
	/**
	 * Retrieves a list of models based on the current search/filter conditions.
	 * @return CActiveDataProvider the data provider that can return the models based on the search/filter conditions.
	 */
	public function search()
	{
                $criteria=new CDbCriteria;
		$criteria->compare('id',$this->id);
		$criteria->compare('label',$this->label,true);
		$criteria->compare('width',$this->width);
		$criteria->compare('height',$this->height);
		$criteria->compare('top_pos',$this->top_pos);
		$criteria->compare('left_pos',$this->left_pos);
		return new CActiveDataProvider('ImageTag', array(
			'criteria'=>$criteria,
		));
	}
}

Controller:

<?php
class ImageTagController extends Controller
{
  public function actionIndex()
  {
    $this->render('index');
  }
  public function actionList()
  {
    if($models=ImageTag::model()->findAll())
    {
      $ret=array();
      foreach($models as $model)
        $ret[]=array(
          'id'=>(int)$model->id,
          'width'=>(int)$model->width,
          'height'=>(int)$model->height,
          'top_pos'=>(int)$model->top_pos,
          'left_pos'=>(int)$model->left_pos,
          'label'=>$model->label,
        );
      echo CJSON::encode($ret);
    }
    header('Content-type: application/json');
    Yii::app()->end();
  }
  /**
   * Simple saving example
   * You should handle error, etc
   */
  public function actionSave()
  {
    $model=new ImageTag;
    if(Yii::app()->request->isAjaxRequest&&isset($_POST['ImageTag']))
    {
      $model->attributes=$_POST['ImageTag'];
      if($model->save())
        echo $model->id;
      Yii::app()->end();
    }
  }
  /**
   * Simple delete example
   * You should handle error, etc
   */
  public function actionRemove()
  {
    if(Yii::app()->request->isAjaxRequest&&isset($_POST['id']))
    {
      $model=ImageTag::model()->findByPk($_POST['id']);
      if($model) $model->delete();
      Yii::app()->end();
    }
  }
}

View:

<?php 
$this->widget('ext.imageTag.EImageTag',array(
  'id'=>'imgTag',
  'src'=>'http://djpate.com/portfolio/jTag/demo/img/bettlejuice.jpg',
  'options'=>array(
    'save'=>'js:function(width,height,top_pos,left_pos,label,imgTag){
      $.post("'.$this->createUrl('/imageTag/save').'",{
          ImageTag:{
            "width":width,
            "height":height,
            "top_pos":top_pos,
            "left_pos":left_pos,
            "label":label
          }},function(id){
            imgTag.setId(id);
        });
    }',
    'remove'=>'js:function(id){
      $.post("'.$this->createUrl('/imageTag/remove').'",{"id":id});
    }',
  ),
));


Yii::app()->clientScript->registerScript('_imageTag','
  $.getJSON("'.$this->createUrl('/imageTag/list').'",function(tags){
    $.each(tags, function(key,tag){
      $("#imgTag").addTag(
        tag.width,
        tag.height,
        tag.top_pos,
        tag.left_pos,
        tag.label,
        tag.id
      );
    });
  });
',CClientScript::POS_LOAD); 

Resources ¶

• Project page
• Try out a demo

PS: Sorry for bad English.