hello, i’ve successfully uploaded image. but, when refresh view. there no image.
after upload
5288
and after refresh page
5289
where’s the problem, can you help me?
hello, i’ve successfully uploaded image. but, when refresh view. there no image.
after upload
5288
and after refresh page
5289
where’s the problem, can you help me?
Probably you did not persisted gallery id.
After creating gallery you need to save gallery id somewhere, and load galley using it next time when you need to show that gallery.
My advice is to use GalleryBehavior from extension.
Yes it is still maintained, but mostly small improvement and bug fixes, there is few experimental branches in repository if you are interested.
I am also planing, to almost completely rewrite it, according to my experience and common needs for extensibility. But I do not know when I will have enough time to do this - latter days, I am completely busy by other projects.
About you question, to secure those images you need:
move galleryDir from webroot to some folder inaccessible from public
add authentication checks for GalleryController (in extension)
change way how files are accessed from web, there is few way
add controller that will check auth requirements(using yii auth system) and will stream requested image (for example using Yii::app()->request->sendFile or xSendFile if you webserver supports it)
add signature for image urls(like in AWS S3, but much more simplified - depends on your needs), this would be more complicated but with better performance and more caching options
Need Help!
per the usage instructions
[list=1]
[*]Checkout source code to your project, for example to ext.galleryManager.
I extracted teh source code which is z_bodya-yii-image-065165e57208 and thats teh only zip file that i could download
[*]Install and configure image component(https://bitbucket.org/z_bodya/yii-image).
Is this different than the step above? now what do I have to install? I think its the same file folder
[*]Add tables for gallery into database (there is sql scheme and migration samples in migrations folder in extension)
[i][b]when I download the zip file and extracted it, i found the following folders and files FOLDER:DRIVER and FILES: CImageComponent.php , Image.php , Image_Driver.php
And I was not able to find any sql scheme and migration samples
[/b][/i]
[]Import gallery models to project, by adding "ext.galleryManager.models." to import in config/main.php
There is no folder as model in the zip file above
[*]Add GalleryController to application or module controllerMap.
[*]Configure and save gallery model
[*]Render widget for gallery
[/list]
Please let me know where can I find the necessary files… or am I missing something? Thanks in advance!
You need to download two archives(gallery manager extension and image extension), both can be found on extension page:
http://www.yiiframework.com/extension/imagesgallerymanager/
Or, alternatively you can install them using composer.
Also, there is an example: https://bitbucket.org/z_bodya/yii-demo-blog
Thanks Bogdan!
I did it now and i got all the files, I thought that the upper download is a higher version… but anyways…
Now I have another problem’
I have followed the step below
[b]Checkout source code to your project, for example to ext.galleryManager.
[/b]
Extension is now in the extension folder! Check.
Install and configure image component(https://bitbucket.or…bodya/yii-image).
I didnt get this step actually, so I skipped it!!
Is this different than the step above? now what do I have to install? I think its the same file folder
[b]Add tables for gallery into database (there is sql scheme and migration samples in migrations folder in extension)
[/b]
Done! Check.
[b]Import gallery models to project, by adding "ext.galleryManager.models.*" to import in config/main.php
[/b]
Did it! Check
[b]Add GalleryController to application or module controllerMap.
[/b]
Added GalleryController to my application/protected/controller directory.
Configure and save gallery model
Copied the two files, Gallery and Gallery Model in the application model directory.
Render widget for gallery
So then in the view file I have the following code
// render widget in view
$this->widget('galleryManager', array(
'gallery' => $gallery,
'controllerRoute' => '/controllers/GalleryController', //route to gallery controller
));
And in the controller action I have got the following
$gallery = new Gallery();
$gallery->name = true;
$gallery->description = true;
$gallery->versions = array(
'small' => array(
'resize' => array(200, null),
),
'medium' => array(
'resize' => array(800, null),
)
);
$loggedinUser=Yii::app()->user->name;
$loggedinUserModel=User::model()->find('LOWER(Email)=?',array(strtolower($loggedinUser)));
$this->render("EditProfile",array('loggedinUserModel'=>$loggedinUserModel,'gallery'=>$gallery));
$gallery->save();
[size="4"][font="Tahoma"][b]Alright, I see ADD, SELECT ALL , EDIT , REMOVE and the interface
I clicked on ADD, I Select a file and then there is flash and nothing got uploaded! , so please let me know what I missed! [/b][/font][/size]
It is required - you need add image extension to project and configure it in application settings.
It is forked from http://www.yiiframework.com/extension/image/ so you can read documentation there.
No, not right - you need to add it to controllerMap in application or module configuration or alternatively you can extend controller from GalleryController in extension.
There is no need to copy any files - you should use them directly from extension folder.
Also, this step in manual has another meaning - it means creating db record in database.
What? This is not a route… In this particular case it should be just ‘gallery’.
Read yii documentation about this http://www.yiiframework.com/doc/guide/1.1/en/topics.url
This will not work… - On every request you are creating new Gallery, but you never save it…
you need to save it before user,
you need to create gallery only once, save gallery id somewhere, and load it using saved id for every request (of course, except very first one)
To manage this - just, use GalleryBehavior from extension.
So I didnt get this… how can I add the Gallery Controller in application? is it some configuration that I need to do in the the config file?
why I cannot add the GalleryController inside the controller folder?
First of all, Bogdan thank you very much for your greate extension!
Secondly could you or someone else elaborate a question I have :
I successfully installed extension and it works great.
In addition, I added one field to gallery_photo table called "author_id". Whenever a new image is uploaded, this field is populated depending on the logged in user.
Next, I added some RBAC rules where only Image owner can update image’s information or delete it.
And everything works. However, when someone who is not author of the image tries to update or delete image everything just freezes, but I would like to output some notification. For instace, "you are not allowed to do this action". I tried, but can not figure out how to do this without refreshing the page
Kindly ask for your advice!
Hi Bogdan, i have some issue with image large size.
It takes about 5 minutes to uploading a single file.
Have you ever think about client side resize image?
I have changed galleryManager.js in this way:
if (window.FormData !== undefined) { // if XHR2 available
var uploadFileName = $('.afile', $gallery).attr('name');
function multiUpload(files) {
if (files.length == 0) return;
$progressOverlay.show();
$uploadProgress.css('width', '5%');
var filesCount = files.length;
var uploadedCount = 0;
var ids = [];
for (var i = 0; i < filesCount; i++) {
// Checking all the possible window objects needed for file api
if (window.File && window.FileReader && window.FileList && window.Blob) {
var file = files[i];
var reader = new FileReader();
reader.onloadend = function() {
var tempImg = new Image();
tempImg.src = reader.result;
tempImg.onload = function() {
var MAX_WIDTH = 400;
var MAX_HEIGHT = 300;
var tempW = tempImg.width;
var tempH = tempImg.height;
if (tempW > tempH) {
if (tempW > MAX_WIDTH) {
tempH *= MAX_WIDTH / tempW;
tempW = MAX_WIDTH;
}
} else {
if (tempH > MAX_HEIGHT) {
tempW *= MAX_HEIGHT / tempH;
tempH = MAX_HEIGHT;
}
}
var canvas = document.createElement('canvas');
canvas.width = tempW;
canvas.height = tempH;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0, tempW, tempH);
//var dataURL = canvas.toDataURL("image/jpeg");
var fd = new FormData();
if (opts.csrfToken) {
fd.append(opts.csrfTokenName, opts.csrfToken);
}
var xhr = new XMLHttpRequest();
xhr.open('POST', opts.uploadUrl, true);
//xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//var data = 'image=' + dataURL;
var FileToCharge = canvas.mozGetAsFile(uploadFileName);
fd.append(uploadFileName, FileToCharge);
xhr.onload = function () {
uploadedCount++;
if (this.status == 200) {
var resp = JSON.parse(this.response);
addPhoto(resp['id'], resp['preview'], resp['name'], resp['description'], resp['rank'], resp['translate']/*,resp['model_response']*/);
ids.push(resp['id']);
} else {
// exception !!!
}
$uploadProgress.css('width', '' + (5 + 95 * uploadedCount / filesCount) + '%');
if (uploadedCount === filesCount) {
$uploadProgress.css('width', '100%');
$progressOverlay.hide();
if (opts.hasName || opts.hasDesc) editPhotos(ids);
}
};
xhr.send(fd);
}
}
reader.readAsDataURL(file);
/*End Send resized*/
} else {
// Browser not supported. Try normal file upload
//classic Upload
var fd = new FormData();
fd.append(uploadFileName, files[i]);
if (opts.csrfToken) {
fd.append(opts.csrfTokenName, opts.csrfToken);
}
var xhr = new XMLHttpRequest();
xhr.open('POST', opts.uploadUrl, true);
xhr.onload = function () {
uploadedCount++;
if (this.status == 200) {
var resp = JSON.parse(this.response);
addPhoto(resp['id'], resp['preview'], resp['name'], resp['description'], resp['rank'], resp['translate']/*,resp['model_response']*/);
ids.push(resp['id']);
} else {
// exception !!!
}
$uploadProgress.css('width', '' + (5 + 95 * uploadedCount / filesCount) + '%');
if (uploadedCount === filesCount) {
$uploadProgress.css('width', '100%');
$progressOverlay.hide();
if (opts.hasName || opts.hasDesc) editPhotos(ids);
}
};
xhr.send(fd);
}
}//end for
}
Каким образом можно сделать две галереи у одного документа? То есть два galley_id у одного ресурса.
да, и два бихевиора
Yes, but for general case it will require lots changes.
To implement this it will require: XHR2 and FileAPI support (IE 10+), or alternatively this can be done using plugins like flash.
Another problem is image versions descriptions - now it is oriented to work on server side using Image component, and it is hard(and unnecessary, from my point view) to reimplement all this features on client side.
Also one of features of gallery manager is preserving of original image - for possibility to add new image versions in future(it is useful in typical case where I am using this extension).
So, probably this feature will be implemented in some future version that will be almost complete rewrite in comparison to current one(now I am working on a project with some client-side image manipulations).
Any way, if you really need it - fork repository, and add this functionality… If it is required, I can help you with some advice…
In general it would be something similar, but this code have following problems:
downsampling issues when using canvas(more about issue: http://stackoverflow.com/questions/18922880/html5-canvas-resize-downscale-image-high-quality)
you code will work only in FF:
var FileToCharge = canvas.mozGetAsFile(uploadFileName);
see there: https://github.com/blueimp/JavaScript-Canvas-to-Blob
fixed resize dimensions - it would be better to move this into widget options.
Image resizing can take many time, and can cause page to be unresponsive - so you should not process all images at once, you need to use setTimeout to separate image processing and allow browser to handle events from user. (more about: http://stackoverflow.com/questions/672732/prevent-long-running-javascript-from-locking-up-browser)
upload queue and memory management - image manipulation will require not only CPU time, but also memory… So it is not efficient to convert all images and start uploading at once(more over, form my experience - there would be only near five active connections, and due to browser optimisations only few of them would be actively transmitting data). another problem is concurrency with all other ajax calls from you page(they would be required to wait for uploads to finish, in case of the same domain name)… So you need to write upload manager that will sequentially convert and upload images.
Hi,
I installed your extension today, and it really works great! Thanks for your great work!
Is there a way to just view the pictures, without "managing" them? So is there a frontend for the users, which simply display all the images? Or do I have to code it myself using the models and so on?
Thanks and best regards
Daniel
No, this extension is for back-end only.
But I found this cool extension for front-end purposes, which works fantastic and is really easy to install:
Actually this is author’s statement on this subject:
[font="Arial Black"]По русски:[/font]
Здравствуй Богдан(тезка))).
Поставил ваше расширение, все по readMe.
Но у меня после загрузки фото у меня ошибка(1)
И ошибка при попытке правки фото(2).
http: //2.firepic.org/2/images/2014-06/23/zyu4c2z0ivl7.jpg
В чем может быть причина этой ошибки?
P.S- Проблема решилась подключением bootstrap.js
[font="Arial Black"]English:[/font]
Hello Bogdan (namesake))).
Put your extension, all at readMe.
But after I download photos from my mistake (1)
And the error when trying to edit photos(2).
http: //2.firepic.org/2/images/2014-06/23/zyu4c2z0ivl7.jpg
P.S-problem solved connecting bootstrap.js
After install all … for make db structure, how can do it, with fast ‘yiic migrate’ command ? thanks 
after add a image, firebug get this msg:
"image directory unwritable"
how can fix this? thanks
[solved]
added "/gallery" folder under aplication structure… missed in readme.
thanks
