image-attachment

user friendly widget, to manage(upload, remove, replace) image associated with model
22 followers

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),
                        )
                    )
                )
            );
        }
  1. 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',
                );
            }
        }
  1. Add ImageAttachmentWidget somewhere in you application, for example in editing from.
$this->widget('ext.imageAttachment.ImageAttachmentWidget', array(
            'model' => $model,
            'behaviorName' => 'preview',
            'apiRoute' => 'api/saveImageAttachment',
        ));
  1. 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

Resources

Forum discussion

Extension, on Bitbuket

Image component, on Bitbuket

Example application - it is fork from yii blog demo, with some of my extensions.

Changelog

  • December 2, 2013 - update documentation, added min size for preview, fix bug with photo removal, on some urlManager configurations, bug fix for directory creation, fixes in updateImages method.
  • September 4, 2013 - Fix bugs: when using model with composite key, with automatic directory creation

Total 7 comments

#16964 report it
DryKillLogic at 2014/04/16 05:12pm
thanks

Thanks, good extension. Multiupload support would be a great feature. I know we can use your other extension GalleryManager but sometimes is too much for some specific projects.

#15635 report it
Bogdan Savluk at 2013/12/02 09:52am
re: i always just see "Before image upload. Save this"

Hi, yes - you should install "image" component. I have added it to downloads, and added link to it into extension description.

Also I have added link to application with example how to use this extension.

#15631 report it
Fire at 2013/12/02 12:34am
i always just see "Before image upload. Save this"

Hi there, I am having trouble installing. I followed all the steps. I am confused however, about the dependency yii-image component. How should I install this, do I need to?

#15613 report it
Bogdan Savluk at 2013/11/28 07:42am
re: have multiload images support? If no, why?

No, there is only one image... So no need in multiupload. Or you meant something else?

#15610 report it
shapovalov_org at 2013/11/28 04:41am
Nice!

Look nice! Do this ext. have multiload images support? If no, why?

#14646 report it
Bogdan Savluk at 2013/08/31 06:08pm
Re: bug in doc

Thanks - fixed behavior name in doc. About yii-bootstrap - "bootstrap.css" is the only thing you need from it in order to use this extension

#14644 report it
Maxxer at 2013/08/31 05:38pm
bug in doc

rename previewImageAttachmentBehavior -> preview ? thanks, looks great! should also doc how to see correct buttons using yii-bootstrap instead of a bootstrap theme itself

Leave a comment

Please to leave your comment.

Create extension