Yii 1.1: etagimage

Image tagging widget (jQuery jTag)
12 followers

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

PS: Sorry for bad English.

Total 3 comments

#7338 report it
nk913 at 2012/03/14 11:10pm
Hi girub & sensorario,

Thanks for your feedback, please check new version and tell me if there's any problem

#7045 report it
Giuseppe at 2012/02/21 04:23am
Even I do not work..

Even I do not work .. I'm hoping for a solution because the extension is very nice. If it worked I'd be able to store data in a table, is there any example? Hello Giuseppe

#7036 report it
sensorario at 2012/02/20 12:17pm
Good extension but do not work correctly =)

I have downloaded right now yii-1.1.10 and your imagetag-0.0.1. When I click over image. I can write my tag. But all tag are saved on left top of image. Can you fix this bug?

Leave a comment

Please to leave your comment.

Create extension