nivoslidermanagement Follow @yiiframework

Nivo Slider Management for end users.

NOTE:DEPRECATED ¶

You might want to check my GalleryManager extension first. I will never update this extension again.

This is a Management extension module for a typical jQuery slider,Nivo Slider.It makes possible for an end user to upload images,provide a caption and optionally a link to a page for each image of the slider.The module can easily be modified to manage any widget expecting an array of images as part of it's configuration.Plus,the management page could work very well as an image gallery.

Requirements ¶

Tested with Yii 1.5,it will probably work with Yii 1.6 also.

Installation ¶

Exctract download zip and copy nivoSliderManagement folder to modules folder of your Yii application.
Create a table in your database using the images_table.sql file found in data module folder.
Create the folder that images will be uploaded to, with a name of your choice, inside assets folder of your Yii application.In module configuration (see below) you will specify the name of the folder you just created as 'upload_directory'.
In config/main.php of your Yii application include nivoSliderManagement in modules array,like so:( The module is configured with default values.)

'modules'=>array(
 
    //...other modules...
 
'nivoSliderManagement'=>array(
               'columnLayout'=> '/layouts/column2',
               'upload_directory'=> 'up',
               'max_file_number'=> '10',
               'max_file_size'=> '1mb',
              ),
 
    //...other modules...
     );

Place the following code inside the view that you want Nivo Slider in, check Nivo Slider for Yii extension page for details on options.

$this->widget('application.modules.nivoSliderManagement.extensions.nivoslider.CNivoSlider', array(
     //nsprovider is  a variable sent  from the corresponding action,see below.
                       'images'=>$nsprovider,
                       'effect'=>'sliceUpDown',
                       'config'=>array(
               'effect'=>'sliceUpDown',
               'slices'=>25,
               'animSpee'=>500,
               'pauseTime'=>6000,
               'startSlide'=>0,
               'directionNav'=>true,
               'directionNavHide'=>true,
               'controlNav'=>true,
               'keyboardNav'=>true,
               'pauseOnHover'=>true,
               'manualAdvance'=>false,
               'captionOpacity'=>0.5,
          // 'controlNavThumbs'=>true,
         // 'controlNavThumbsSearch'=>'.jpg', //Replace this with...
        // 'controlNavThumbsReplace'=>'_100_100_thumb.jpg', //...this in thumb Image src
        // 'controlNavThumbsFromRel'=>true
            )
    )
);

Place the following code inside the action that renders the view file containing Nivo Slider.

Yii::import('application.modules.nivoSliderManagement.models.Img');
//get images from database
$ns_dataProvider = new CActiveDataProvider('Img', array(
  'criteria' => array(
      'select' => array('t.path', 't.title', 't.basename', 't.extension','t.url','t.file_id'),
      'order' => 'title'
                        ),
   'pagination'=>array(
                       'pageSize'=>50,
                       ),
                       ));
 
$ns_images = $ns_dataProvider->getData();
 
$nsprovider = array();
$baseurl = Yii::app()->baseUrl;
foreach ($ns_images as $image) {
                if ($image['url'] != "nolink") {
  $nsprovider[] = array('src' => $image['path'].'/'.$image['file_id'].$image['extension'],
                        'caption' => $image['title'],
                        'url' => $baseurl .'/'.$image['url'],
                        'imageOptions' => array('rel' => $image['path'] .'/tmb/'.   $image['file_id'] . '_100_100_thumb' . $image['extension'])
                                                 );
            } else {
  $nsprovider[] = array('src' => $image['path'] . '/' . $image['file_id'] . $image['extension'],
                        'caption' => $image['title'],
                        'imageOptions' => array('rel' => $image['path'] . '/tmb/' . $image['file_id'] . '_100_100_thumb' . $image['extension'])
                                                 );
                     }
                    };
 
        $this->render('[VIEW CONTAINING NIVO SLIDER]',array('nsprovider'=>$nsprovider));

Last,optionally, for linking the images to content,install cmssitestructuremodule Yii extension:
cmssitestructuremodule
As an alternate option,you can easily adapt your module to your own CMS simply by modifying actionGetlinks action in PlController.

The URL for the management page will be [root folder of your Yii application]/nivoSliderManagement.

Resources ¶

NOTE:With the exception of cmssitestructuremodule,you don't have to download and install these extensions,they are included in the module's extensions folder.

Cheers.

Total 7 comments

#3607

drumaddict at 2011/04/21 04:54pm

@julias

Probably something went wrong with the registration of PlUpload Widget javascript files,make sure they are registered.Could be a problem with the paths in your server.

#3604

julias at 2011/04/21 02:18pm

Help

Hi I am having a problem, i have followed the instructions to the "T" and i get to the paragraph with heading Nivo slider Management Page and the print out bellow:

....the view file containing Nivo Slider.) You can upload up to 10 images at once with PlUpload widget,this can also be configured.

Your browser doesn't have Flash, Silverlight, Gears, BrowserPlus or HTML5 support.

** Manage Uploaded Images** No results found.

But when i go to this -> http://libkal.gr/yii_test/nivoSliderManagement site it works meaning my browser is fine. any ideas??

#3235

Trejder at 2011/03/28 04:19am

Thanks!

Thanks for your quick reply. I see now the whole picture. OK - so I'll download and test your extension and see, if this can be easily converted to just a gallery. But I find it so perfect for me, that I think it is worth working around it. Thanks again and cheers.

#3234

drumaddict at 2011/03/28 04:01am

@trejder

Hi Trejder, you are not off topic,this gallery is part of the extension,as I state in my overview,if you just want an image gallery and not the Slider management,this extension can still be useful to you:install the module and just modify it,throw away the stuff that deals with the Slider.In resources you can see all the stuff I used,but again,you don't have to download all that,they are all included in my extension.

#3232

Trejder at 2011/03/28 03:42am

Beautiful gallery! :)

Hi drumaddict,

This is a bit off topic, but I urge to ask! :) I visted your demo page for this extension and saw there a BEAUTIFUL photo gallery! :) Just exactly like I'm looking for. Can you share information which extension / jQuery plugin / class / library you're using to build these photo galleries, you have there?

Kind regards, Trejder

#3194

drumaddict at 2011/03/25 03:41am

@ppravin88

these operations are ajax calls,I personally use the Firebug console and watch there for any ajax/javascript errors.What do these ajax calls return?

#3193

Pravin at 2011/03/25 03:17am

Issue with Saving the Title, Edit/Update and Delete images!

Hi drumaddict,

The extension is cool. The following are the issues that I faced:

After the upload of images, I give it a title and click on Save, but the title ain't getting saved in the database.
And also the Edit/Update and Delete function in the management doesn't seem to work.

Any help would be much appreciated!

PS: Followed your instructions perfectly !

Please login to leave your comment.