Overview

ImageAttachment

This extension intended to handle actions with images associated with model.

Extensions provides user friendly widget, to upload and remove image.

Screenshots: Yii image attachement screenshots

Features

  1. Asynchronous image upload
  2. Ability to generate few image versions with different configurations
  3. Drag & Drop

Decencies

  1. Yii
  2. Twitter bootstrap
  3. yii-image component

Installation:

  1. Download and extract extension somewhere in your application(in this guide into extensions/imageAttachment). Also available in composer.
  2. Add ImageAttachmentBehavior to you model, and configure it, create folder for uploaded files.

    public function behaviors()
    {
        return array(
            'preview' => array(
                'class' => 'ext.imageAttachment.ImageAttachmentBehavior',
                // size for image preview in widget
                'previewHeight' => 200,
                'previewWidth' => 300,
                // extension for image saving, can be also tiff, png or gif
                'extension' => 'jpg',
                // folder to store images
                'directory' => Yii::getPathOfAlias('webroot').'/images/productTheme/preview',
                // url for images folder
                'url' => Yii::app()->request->baseUrl . '/images/productTheme/preview',
                // image versions
                'versions' => array(
                    'small' => array(
                        'resize' => array(200, null),
                    ),
                    'medium' => array(
                        'resize' => array(800, null),
                    )
                )
            )
        );
    }
    
  3. Add ImageAttachmentAction in controller somewhere in your application. Also on this step you can add some security checks for this action.

    class ApiController extends Controller
    {
        public function actions()
        {
            return array(
                'saveImageAttachment' => 'ext.imageAttachment.ImageAttachmentAction',
            );
        }
    }
    
  4. Add ImageAttachmentWidget somewhere in you application, for example in editing from.

    $this->widget('ext.imageAttachment.ImageAttachmentWidget', array(
        'model' => $model,
        'behaviorName' => 'preview',
        'apiRoute' => 'api/saveImageAttachment',
    ));
    
  5. It is done! You can use it now.

    if($model->preview->hasImage())
        echo CHtml::image($model->preview->getUrl('medium'),'Medium image version');
    else
        echo 'no image uploaded';
    

Contributing

Pull requests are welcome! Also, if you any ideas or questions about - welcome to issue tracker