Yii 1.1: image-select

Insert a link above the image to change it and view the new one using ajax - just like facebook
16 followers

Image View Select to Change

Requirements

Yii 1.1 or above - tested on Yii 1.1.11 and above

Demo

http://yii.nefya.com

Usage

  • extract inside extensions directory
  • be sure that your extensions are imported

/config/main.php

'import'=>array(
                ...
                'application.extensions.*',
                ...
         ),
  • add this to your view:
<?php
   $this->widget('ext.imageSelect.ImageSelect',  array(
        'path'=>'path/to/current/image',
        'alt'=>'alt text',
        'uploadUrl'=>'url that accepts the uploaded image and returns the new path',
        'htmlOptions'=>array()
   ));
?>
  • In your controller you can catch the uploaded file like this sample upload action
public function actionUpload(){
    $file = CUploadedFile::getInstanceByName('file');
    // Do your business ... save on file system for example,
    // and/or do some db operations for example
    $file->saveAs('images/'.$file->getName());
    // return the new file path
    echo Yii::app()->baseUrl.'/images/'.$file->getName();
}

Change Log

  • 1.4
    • Bug fix - hide the loading div after loading the new image instead of after uploading it
  • 1.3
    • Bug fix - for multi instance inside one page
  • 1.2
    • Adding the public property $text to facilitate internationalization
  • 1.1
    • Adding loader image while loading the new one
  • 1.0
    • Initial upload

Resources

Total 13 comments

#16712 report it
StreetCoder at 2014/03/22 05:04am
Good extensions

Nice works, I use it. Thanks

#14562 report it
Amr Bedair at 2013/08/22 05:28pm
Re: Multiple instances on a page

You're most welcome

#14558 report it
fgpsmith at 2013/08/22 01:28pm
Re: Multiple instances on a page

OK - it was my fault (as suspected). The image uploaders were nested inside the other form on the page. If I move them outside the form both work fine. So I just need a bit of CSS magic to have them outside the form but positioned as if they are inside it.

#14551 report it
Amr Bedair at 2013/08/22 07:00am
Re: Multiple instances on a page

Dear fgpsmith

WebHostingHub is down for the first time in a year :D, please just wait ... until they resolve their problem please mail me [amr at nefya dot com] (or) reply with your view code so I can help

BTW: yes the latest version should generate a unique id

Thanks, Amr

#14546 report it
fgpsmith at 2013/08/22 05:29am
Re: Multiple instances on a page

The demo page seems to be down at the moment so I can't check that.

I have added two instances of the widget immediately after each other on the page. The later one works. The first one doesn't. If I swap the position of the two widgets it's still the second one that works so it is position dependant.

The earlier one doesn't work in that the ajax loading image is displayed over the original picture but the post is never made to the upload action, I've watched the log and I can see the get for the ajax image but there is no post. (I do see the post with the later, working widget).

I was the 1.4 version that I downloaded (although there isn't a version number in the code). Looking at the code in the run method I did notice that the form is always "frm_img_select", it doesn't have any unique id attached with it so it looks like both generated forms will have the same id. I wanted to check the demo page to see if that was the case in the working example, but as I said I can't get to the demo at the moment.

The only other thing that might be having an effect is that there is another form on the page?

#14541 report it
Amr Bedair at 2013/08/21 11:56pm
Re: Multiple instances on a page

Dear fgpsmith,

I have updated my demo page to include two instances, and it is working well, so please can you provide with more details to be able to assist you...

http://yii.nefya.com/

Note: be sure you are using the latest version :)

#14539 report it
fgpsmith at 2013/08/21 06:14pm
Multiple instances on a page

I see from the change log that you made a "Bug fix - for multi instance inside one page"

However I'm trying to have two instances on a page and only the second one works, clicking the first produces the loading image, but the upload action doesn't get called.

Am I missing something obvious in the set up?

#12201 report it
Amr Bedair at 2013/03/06 03:06am
Re: Example - 'url' portion

Here is an example

'uploadUrl'=>$this->createUrl('upload', array('attr'=>'logo'))

about the action, as mentioned above, you can catch the file and do anything with it

#12199 report it
skworden at 2013/03/05 08:57pm
Example

Can you please give an example of the 'url' portion. I have tried numerous ways and can't get it to work. How could I use a model behaivour to change the image. i.e.

public function behaviors()
    {
        return array(
        'image' => array(
            'class' => 'ext.AttachmentBehavior.AttachmentBehavior',
            # Should be a DB field to store path/filename
            'attribute' => 'filename',
            # Default image to return if no image path is found in the DB
            'fallback_image' => 'images/default.png',
            'path' => "images/companies/products/:id.:ext",
            'processors' => array(
                array(
                    # Currently GD Image Processor and Imagick Supported
                    'class' => 'GDProcessor',
                    'method' => 'resize',
                    'params' => array(
                    'width' => 540,
                    'height' => 540,
                    'keepratio' => true
                    )
                )
            ),
            'styles' => array(
            # name => size 
            # use ! if you would like 'keepratio' => false
            'thumb' => '!270x270',
            )           
        ),
.....
#11917 report it
Cozumel at 2013/02/13 12:07am
Very Nice

Thank you for this awesome extension!

#11591 report it
Amr Bedair at 2013/01/22 07:03am
demo

http://yii.nefya.com

BTW: I forgot to mention a sample upload action

public function actionUpload(){
    $file = CUploadedFile::getInstanceByName('file');
    $file->saveAs('images/'.$file->getName());
    echo Yii::app()->baseUrl.'/images/'.$file->getName();
}
#11552 report it
Amr Bedair at 2013/01/20 07:27am
Re: Greate work, but

it is simply the url that the widget will post the image file to it, then it will handle this file [may save it to a database or file system, or add it to a model], then it should return the new image's path

#11551 report it
Mahmoud F.Elshazly at 2013/01/20 07:21am
Greate work, but

what is 'uploadUrl' means? is this an action that upload the image and save it then gives the returned path?

Leave a comment

Please to leave your comment.

Create extension