Yii 1.1: imagesgallerymanager

Allows to manage image gallery
64 followers

This widget allows to add gallery management with following features:

  • Multiple file upload in modern browser
  • Optional editing image name and description
  • Arrange images in gallery
  • Multiply images actions - edit, removal
  • Behavior to add gallery to any model

Gallery manager screenshots:

GalleryManager images list

Few more screenshots: drag & drop upload, editing image information, upload progress,

Requirements

  • Tested with Yii 1.1.13, but should work with previous versions too
  • Twitter bootstrap css(widget is made using some classes from it)
  • Image component, from extensions repository or better my fork of it

Usage

  1. Checkout source code to your project, for example to ext.galleryManager.
  2. Install and configure image component(https://bitbucket.org/z_bodya/yii-image).
  3. Add tables for gallery into database (there is sql scheme and migration samples in migrations folder in extension)
  4. Import gallery models to project, by adding "ext.galleryManager.models.*" to import in config/main.php
  5. Add GalleryController to application or module controllerMap.
  6. Configure and save gallery model
  7. Render widget for gallery

Example:

// configure and save gallery model
$gallery = new Gallery();
$gallery->name = true;
$gallery->description = true;
$gallery->versions = array(
    'small' => array(
        'resize' => array(200, null),
    ),
    'medium' => array(
        'resize' => array(800, null),
    )
);
$gallery->save();
 
// render widget in view
$this->widget('GalleryManager', array(
    'gallery' => $gallery,
    'controllerRoute' => '/admin/gallery', //route to gallery controller
));

Using GalleryBehavior

Using gallery behavior is possible to add gallery to any model in application.

To use GalleryBehavior:

Add it to your model:

Example:

public function behaviors()
{
    return array(
        'galleryBehavior' => array(
            'class' => 'GalleryBehavior',
            'idAttribute' => 'gallery_id',
            'versions' => array(
                'small' => array(
                    'centeredpreview' => array(98, 98),
                ),
                'medium' => array(
                    'resize' => array(800, null),
                )
            ),
            'name' => true,
            'description' => true,
        )
    );
}

Add gallery widget to your view:

Example:

<h2>Product galley</h2>
<?php
if ($model->galleryBehavior->getGallery() === null) {
    echo '<p>Before add photos to product gallery, you need to save product</p>';
} else {
    $this->widget('GalleryManager', array(
        'gallery' => $model->galleryBehavior->getGallery(),
    ));
}
?>

Changing image versions for gallery associated with behavior

  1. Update your model with new versions configuration
  2. Run following code(best place for it - in migration):
$models = Model::model()->findAll();
foreach($models as $model) $model->galleryBehavior->changeConfig();

Note: to run in migration you should define 'webroot' path alias.

Changelog

  • September 2, 2013 - Italian translation, some refactoring
  • May 14, 2013 - German translation
  • March 1, 2013 - refactoring, styles upgrade
  • February 26, 2013 - display upload progress
  • February 20, 2013 - added support for drag & drop images upload
  • January 4, 2013 - fixed XSS possibility in html-templates on client side. made some optimisations
  • November 18, 2012 - Added CSRF protection support.
  • Octover 23, 2012 - Fixed mistake in db schema that can cause upload errors on some mysql configurations.
  • August 7, 2012 - Fixed bug with photo select.
  • August 2, 2012 - Added ability use few gallery manager widgets on same page. Moved styles and scripts from view to separate files, added minified script versions.
  • July 29, 2012 - Fixed bug in behavior when tring to insert new record.
  • July 24, 2012 - Begin using jquery.iframe.transport to make ajax file upload in older browsers. Finish work on GalleryBehavior. Remove form tags from widget to make it possible to add it into anouther form tag.
  • July 13, 2012 - Fixed bug(reported by DrMabuse on bitbuket). Bug was in saving order of recently uploaded images.

Resources

Total 20 comments

#17819 report it
Bogdan Savluk at 2014/07/24 08:31pm
re: help me pls
#17817 report it
erickMartinez at 2014/07/24 01:27pm
help me pls

someone could give me an example :( i dont understand

#17787 report it
Bogdan Savluk at 2014/07/22 01:26pm
re: cover

It would be useful in some cases, but in most of them probably no.

My suggestion is - better upload cover separately. (for example using image-attachment extension )

Anyway, if you need it - there is a branch with this functionality.

#17786 report it
paskuale at 2014/07/22 12:31pm
cover

Hi, would be nice to add the ability to select an image as the cover of the gallery, or not ? :)

#17773 report it
Bogdan Savluk at 2014/07/21 05:01pm
re: jquery issue

It is because of missing twitter bootstrap scripts.

P.S. please, use forum or issue tracker on bitbucket for such questions.

#17770 report it
paskuale at 2014/07/21 01:02pm
jquery issue

After image added, firebug return me -> TypeError: $editorModal.modal is not a function, in ".../extensions/gallerymanager/assets/jquery.galleryManager.js" line 106

#17738 report it
Bogdan Savluk at 2014/07/18 06:58am
re: trouble clone by bitbucket

Because it is mercurial repository...

You can fork it from mirror on github: https://github.com/zxbodya/yii-gallery-manager

#17736 report it
paskuale at 2014/07/18 05:50am
trouble clone by bitbucket

Hi, I fork the repo ... but in console git clone get me repository not found !!! Why ?

#16374 report it
propelera at 2014/02/16 12:52pm
Can I select only one picture from gallery?

Hi, if I want to choose main poster of the article can I choose only one image from uploaded images and get it's url in any field?

#13518 report it
Bogdan Savluk at 2013/06/03 10:00am
re: How to use widget by ajax request.

Originally it is not designed to load via ajax.. but maybe later I will add such ability

For now, I have written short instructions how to load widget via ajax: https://bitbucket.org/z_bodya/gallerymanager/issue/11

#13513 report it
hemc at 2013/06/03 08:35am
How to use widget by ajax request.

Thanks for this Great widget.I have setup widget as mentioned in doc and it is working properly on my site. Problem arises When i try load widget by it ajax call.It shows only add, select, edit and remove button only. No preview of the image available.When i click add it popup windows explorer and after select file when i click open, It does nothing. Can you Please guide me how can i achieve this widget working by ajax request?

Thanks in advance.

#13046 report it
DryKillLogic at 2013/04/30 09:38am
Limit

Excellent extension!. The only missing feature is the possibility to set a image limit.

#13040 report it
Bogdan Savluk at 2013/04/30 04:52am
re: js and css errors

Seems you need to include twitter bootstrap styles and scripts to your page.

P.S. For such questions, there is forum.

#13037 report it
igorska at 2013/04/30 03:42am
js and css errors

I see js errors on .modal call in js and seems some css not found. Author please update module

#12457 report it
lostphp at 2013/03/22 05:34am
I want to use this extension, but can not configured

I want to use this extension, but can not configured. Is there a detailed example?

#11304 report it
Bogdan Savluk at 2013/01/04 01:34pm
Re: add wysiwyg for photo description

How to add any wysiwyg for photo description area ?

By now this is not supported by extension. I know about need in features like this, and may be later, I will modify extension in order to add more flexibility(especially for possibility to have models with different attributes for different gallery type and custom forms to edit them).

For now, you can modify "assets/jquery.galleryManager.js" to fit your needs. To do so, you need:

  1. Modify elements returned by functions: createEditorElement (returns block with form to edit photo information) createPhotoElement (returns element for for photo)
  2. Modify event handler for $('.save-changes', $editorModal).click, to properly update photo element when information was changed.
#11294 report it
maxxdev at 2013/01/04 03:03am
add wysiwyg for photo description

Great extension! How to add any wysiwyg for photo description area ?

Try to use $('input[type="textarea"]').wysiwyg();

and it's not working wor me...

#10491 report it
Bogdan Savluk at 2012/10/31 10:29am
@krasavcheg.ua
#10489 report it
krasavcheg.ua at 2012/10/31 09:26am
@Proctophantasmist

What is the right controllerMap if I want to use this widget in application but not in the module?

#10239 report it
Proctophantasmist at 2012/10/13 09:58am
re: Problem with this extension

1) check that you have correctly defined the controllerMap. in my case I want the gallery management to be part of the admin module so I wrote:

'admin'=>array(
            'controllerMap' => array(
                'gallery'=>array(
                    'class'=>'ext.galleryManager.GalleryController',
                    'pageTitle'=>'Gallery administration',
                ),
            ),
        ),

2)point to the controller in the widget, in my case:

$this->widget('ext.galleryManager.GalleryManager', array(
                'gallery' => $disc->galleryBehavior->getGallery(),
                'controllerRoute' => '/admin/gallery', //route to gallery controller
            ));

3)check that your web server has write permission on the destination folder for the images

Leave a comment

Please to leave your comment.

Create extension