- Requirements
- Usage
- Using GalleryBehavior
- Changing image versions for gallery associated with behavior
- Changelog
- Resources
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:
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 ¶
- Checkout source code to your project, for example to ext.galleryManager.
- Install and configure image component(https://bitbucket.org/z_bodya/yii-image).
- Add tables for gallery into database (there is sql scheme and migration samples in migrations folder in extension)
- Import gallery models to project, by adding "ext.galleryManager.models.*" to import in config/main.php
- Add GalleryController to application or module controllerMap.
- Configure and save gallery model
- 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 ¶
- Update your model with new versions configuration
- 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 ¶
- Extension page on Bitbucket
- Forum discussion
- Example application
how it use?
On step 4 I got error:
GalleryManager and its behaviors do not have a method or closure named "recordCachingAction". $cs->registerScriptFile($this->assets . '/jquery.iframe-transport.min.js');
In my confnig:
'controllerMap' => array( 'gallery' => array( 'class' => 'ext.galleryManager.GalleryManager', ),
ext.galleryManager.GalleryController also got error unable to find the requested action "index".
Or this extension for use as behavior?
Re: how it use?
You can not use GalleryManager in controllerMap - it is widget, not controller: use GalleryController.
GalleryController has no index action because it is only for ajax calls from GalleryManager widget.
"Or this extension for use as behavior?"
No, you can use it anywhere . There is an example above, how to use it with separate gallery model.
Support for tablePrefix
Please add support for tablePrefix. I user prefixes and got error when use this manager.
public function tableName() { return '{{gallery}}'; }
Re: Support for tablePrefix
I don't want add this to models, because this will cause errors for all people who do not use tablePrefix(for ex. me).
I think, in next version, I will completely remove bindings to concrete database tables. I want to do this, in order to allow use custom tables for gallery and photo. This is required to add ability for custom photo attributes, and to avoid need in separate table for gallery params in cases when using GalleryBehavior.
Resize images
When I upload small image, extension resize it for all $versions of image.
Need to check for the original size of image, and then resize, if it's larger then in $versions sizes array..
Re: Resize images
Each "version" of image is a list of actions what we need to do with original image by Image component in order to get required effects. So if you need contitional resize - you need to add method for that to Image component and use it in your versions configuration.
photo select
Photo-select not working.
Replace this
$this.parent().addClass('selected');
to this
$this.parent().parent().addClass('selected');
Same replace for removeClass('selected');
solves problem.
re: photo select
I have fixed this bug few days ago(but forgotten to update extension here)... - the problem was because of difference in html templates on client and server sides.
Thanks
Great work!
Problem with this extension
When I use it on my index.php, when I add a image, the message from twitter bootstrap appears: "Edit Information" with save and close buttons, but nothing happens. What can I do?
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
@Proctophantasmist
What is the right controllerMap if I want to use this widget in application but not in the module?
@krasavcheg.ua
You can use application controller map.
http://www.yiiframework.com/doc/api/1.1/CWebApplication#controllerMap-detail
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...
Re: add wysiwyg for photo description
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:
createEditorElement (returns block with form to edit photo information)
createPhotoElement (returns element for for photo)
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?
js and css errors
I see js errors on .modal call in js and seems some css not found. Author please update module
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.
Limit
Excellent extension!. The only missing feature is the possibility to set a image limit.
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.
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
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?
trouble clone by bitbucket
Hi, I fork the repo ... but in console git clone get me repository not found !!! Why ?
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
jquery issue
After image added, firebug return me -> TypeError: $editorModal.modal is not a function, in ".../extensions/gallerymanager/assets/jquery.galleryManager.js" line 106
re: jquery issue
It is because of missing twitter bootstrap scripts.
P.S. please, use forum or issue tracker on bitbucket for such questions.
cover
Hi, would be nice to add the ability to select an image as the cover of the gallery, or not ? :)
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.
help me pls
someone could give me an example :( i dont understand
re: help me pls
Here it is: https://bitbucket.org/z_bodya/yii-demo-blog
Yii2
Hi,
Is there a version for yii2?
re: Yii2
It is planned(already started porting), but not done yet.
if you are interested - here it is:
https://github.com/zxbodya/yii2-gallery-manager
Support MongoDB
It would be great mongo support in the Yii2 version. Thanks!.
Code repository and demo application
As mentioned in below comments, main repository at BitBucket is not accessible and does not provide a code to clone. You should use GitHub repository at https://github.com/zxbodya/yii-gallery-manager or download
.tar.gz
file from this page.There's a nice looking and (nearly) ready to use demo application found at BitBucket (this time repository is cloneable): https://bitbucket.org/z_bodya/yii-demo-blog. It contains Gallery Manager and other extensions made by this author.
When you get it running, don't be surprised, that you see no sign of gallery manager at first. To see it in action, you should edit any post (or create new one), because gallery manager widget has been included only in this view (and in post view in frontend, once particular view contains some gallery).
This is very simple demo, and need some sort of work to port it to working application. But, for sure this is a good starting point for dealing with all troubles you may have with this extension. And a nice thing from author, that he wanted to spare his time not only on writing extension itself, but also for providing working demo application. Big thumb up from my side! :>
Note, that cloned code does not contain
assets
folder andprotected/runtime
folder. You should create these two in point 2.5 (before changing folder permissions) of instruction mentioned in BitBucket repository.Re: Capture Camera
Yeah, sorry for my bad day and for my bad attitude as well, that was rude. Sorry.
If I'm not mistaken, you're trying to use HTML5 or browser or iOS build-in camera capture feature. It should work here, if it works on other extensions / forms, by just adding
accept="image/*;capture"
. I don't know, why this is not working here, but I fear, that since this question is iOS-specific, then there will not be many people here able to help you.Anyway, you should rather ask this question on Yii forum. Comments shouldn't be uses for asking technical questions. I know, that many people here ignores this, but that is fact. Comments should be used in general for providing feedback (bug reports, feature requests) not for technical questions (how to do this, why that isn't working).
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.