Custom thumbnails for NGG galleries
[NB] This feature will be available in NGG 1.2 You can already test it by checking out the trunck version from here
This is a small extension for NextGen Gallery, it allow you to specify which area NGG must use to generate the the thumbnail.
Quite often the thumbnails generated by NGG do not show the "right" part of the picture, this happen especially when you have a gallery with people, where you want to show in the thumb the face and not the belly.
Demo
Have a look here where you can see two galleries (same pictures) the first with the standard and the second with custom thumbnails.
Installation
First unpack the archive to the NGG root directory, then open manage-images.php and modify line 338 from
<img class="thumb" src="<?php echo $picture->thumbURL; ?>" <?php echo $thumbsize ?> />
to
<img class="thumb" id="thumb<?php echo $pid ?>" src="<?php echo $picture->thumbURL; ?>" <?php echo $thumbsize ?> />
and add this line at the end of nggallery.php
include_once (dirname (__FILE__)."/admin/custom_thumbnails.php");
Download
Here the package for the version 0.2 it ONLY works with WP 2.7 and NGG 1.0
Screenshots
List with "Edit thumbnail" action
Popup for area selection
# Donia on January 15th, 2009
Grazie davvero!
Prima di questo fix dovevo croppare le thumb a mano!!!
# Donia on January 15th, 2009
Sto facendo delle prove ma mi pare che non riesca a sovrascrivere la vecchia thumb nonostante mi dica "thumbnail updated"
Dimenticavo, per fare uscire il link per editare la thumb ho dovuto creare la td a mano.
<a href="" class="thickbox" title="">Edita Thumb</a>
# hpatoio on January 15th, 2009
Ciao.
Tieni presente che il plugin è sviluppato per WP 2.7 e NGG 1.0.
Tu che versione stai usando ?
# Donia on January 15th, 2009
wp 2.7 e ngg 1.0.2
ho provato anche a giocare con i chmod ma niente da fare, peccato…
# jim on January 15th, 2009
Great Idea! But this is not working for me using NGG 1.0.2 and WP 2.7 …
I confirmed all new files and folders are in the right place, and that I edited manage-images.php correctly.
Only difference I noticed is that when I unzipped the download archive, TWO files are in the Jcrop / js / folder — jquery.Jcrop.js AND jquery.Jcrop.js~
Please also confirm that your entire Jcrop folder goes into the NGG js folder, not just the individual new files.
Grazie! Sorry, I don't speak Italiano.
# hpatoio on January 16th, 2009
Well, you can delete jquery.Jcrop.js~ (I'll delete from the ZIP) and yes, jCrop goes in NGG js folder.
Let me knwo.
# jim on January 17th, 2009
Thanks for the quick reply. Unfortunately, the edit thumbnail function still does not appear. I deactivated the NGG plugin, confirmed all new files are placed and php file is edited according to your directions. Upon reactivation, there is no difference.
Have you tried it with NGG v. 1.0.2? That's the only difference I can think of.
# Donia on January 17th, 2009
@Jim I had the same problem and had to add the code of the td by hand after line 377.
The box is working but it doesn't overwrite the previous thumbnail.
The script created a new folder in the gallery called "ct_cache" in which are stored the images I tried to crop.
# hpatoio on January 19th, 2009
I've just updated the plugin to version 0.2.
Now everything should work.
# jim on January 21st, 2009
I added the new line of code to ngg_gallery.php and the function popped up. It even reported "Thumbnail Updated" but the thumbnail image did not get replaced. The ct_cache folder also created for me, with two uncropped thumbnails I tried to edit.
I then tried the new download — FYI: Readme still says v .1 — and I get "Error Updating Thumnail" … ?
# Donia on January 21st, 2009
Hi jim, I get too "error updating…" but if I reload the page I can see that the thumbnail has been edited correctly!
# hpatoio on January 21st, 2009
Well, you are right ! Just updated a new version, test it and let me know if now everything is fine.
Sorry for the bugs but it's always like that when you write code at night.
# Chris Altman on January 21st, 2009
I installed v0.2 with WP2.7 & NGG 1.0.2. The Edit Thumbnails link shows, the pop up opens, but the cropping controls do not display.
I had to change colspan=2 in manage-images.php.
FireBug tells me:
admin.php
unterminated regular expression literal
[Break on this error] var rx = / coords.w;\n
admin.php
showPreview is not defined
[Break on this error]
This is a very need piece of functionality. Thank you for working on this. Let me know how I can help test.
# jim on January 21st, 2009
Replaced all the files with new download and confirmed edits. Still get "error updating file" and upon page reload thumbnail is not edited.
I tried "save changes" and forced reloading the page.
My main concern is that since upgrading NGG to v 1.0.2 thumbnail sizes are created differently. Your patch looks like a great solution … thanks for the time.
# hpatoio on January 22nd, 2009
@jim, | it sounds very strage. I tested yesterday on a fresh new installation WP27 + NGG 1.02 and everything was working. Which browser are you using ?
@Chris | Yes you have to change colspan to 2 in manage-images.php (I think it's a NGG bug). About the JavaScript problem, what's the format of the image you uploaded ? How is the configuration for the thumbnails ? Fixed size or what ?
The problem you are reporting happens because the script can't get image information with getimagesize
# Chris Altman on January 22nd, 2009
@hpatoio |
what’s the format of the image you uploaded ?
JPG
How is the configuration for the thumbnails ? Fixed size or what ?
Width x height (in pixel) = 117 x 46
Set fix dimension = Not Checked
Crop square thumbnail from image = Not Checked
Thumbnail quality = 100%
Select graphic library = GD Library
Resize Images = Blank (I do not want NGG to resize images)
My environment is FF/OSX 10.5. The WP is on a LAMP stack.
Let me know what other information you need.
Great work.
# jim on January 22nd, 2009
@jim, | it sounds very strage. … Strange indeed. Just did a clean install of your patch on a different blog w/ WP 2.7 and NGG 1.0.2 — thumbnails updated successfully! Very nice function. But it doesn't solve my original problem …
The cropped thumbnail is 97×75 — when this displays in my "nggRandomImages" script it gets stretched to 100×77, throwing the gallery out of alignment.
Does anyone know of a way I can force thumbnails to a specific size? The "maximum" settings in NGG Options seem to be for width OR height, and they used to constrain width AND height.
Great work on the crop function. I will definitely use it if I can resolve the thumbnail size issue.
# Jon Supnick on January 25th, 2009
This add-on is a perfect idea, but I am having issues with it. I believe I did everything correctly.
Right now it shows the "Edit Thumbail" link (it also shows a separate, BLANK column to the right of that) for each image. When I click the link, it opens up the image in a js window. It shows the original on the left and the thumbnail on the right. However, it doesn't let me select anything on the regular image. It just shows up like it would on a web page. I can't click anywhere. Also, if I try to hit "update"… nothing happens, it just sits there.
Any help would be appreciated! I definitely love the idea of it, and it would be great if I can get it to work
Thanks!!
~Jon
# Jon Supnick on January 25th, 2009
btw… I guess it just means that the Javascript isn't working, seems very similar to Chris's problem. Thanks
# Nick on January 29th, 2009
I've followed your instructions to the letter and I get this when I go to "manage galleries"
Warning: include_once() [function.include]: Failed opening '/home/a2517344/public_html/blog/wp-content/plugins/nextgen-gallery/admin/admin/custom_thumbnails.php' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/a2517344/public_html/blog/wp-content/plugins/nextgen-gallery/admin/manage-images.php on line 495
I had it working then I upgraded Nextgen – and it didn't work so I re-installed the old version – and now it doesn't work there either !
Please help !
# hpatoio on January 29th, 2009
Hej Nick.
It seems like you unzipped the file in the wrong place. I see "admin" twice in your path /home/a2517344/public_html/blog/wp-content/plugins/nextgen-gallery/admin/admin/custom_thumbnails.php
custom_thumbnails.php must be in /plugins/nextgen-gallery/admin/custom_thumbnails.php
Are you on WP27 and is NGG1.1 ?
# Nick on January 29th, 2009
Got it !
I copied/pasted your code into the end of manage-images.php
(include_once (dirname (__FILE__)."/admin/custom_thumbnails.php");
this seems to give the wrong adress for the file – I scratched out /admin so the code looks like this :
include_once (dirname (__FILE__)."/custom_thumbnails.php");
That gets me into "manage galleries" without warnings but the thumbnails don't update properly. The editing screen works correctly and it tells me that the thumbnail has been updated, but it does not show on the gallery page even after reloading the page and quitting NextGen and coming back again – it worked perfectly before I tried updating NextGen – now I don't know where it's going wrong
I'm on WP 2.7 and back on NGG 1.0.2
Grazie multo (which is the limit of my Italian !)
# Nick on January 29th, 2009
I've been looking at the code in "manage-thumbnails" I see that the plugin tries to create a directory calle ct_cache in the gallery directory. the problem is perhaps that it hasn't. Can I create it manually and why didn't it do it in the first place ? Is it a question of permissions ?
# hpatoio on January 30th, 2009
That code must be copied at the end of nggallery.php and not at the end of manage-images.php
# Nick on January 30th, 2009
Many thanks !
My error – I was in too much of a hurry I guess !
Any chance of getting this patch integrated into the basic issue of NextGen – it's absolutely essential !
By the way – how did you find out where I was going wrong ?
# hpatoio on January 30th, 2009
By reading your comment
# David Radovanovic on February 1st, 2009
Everything works great except that the pop-up edit window is missing the editing marque. jquery.Jcrop.js is missing:
–snip–
–snip–
However, it is present in manage_thumbnails.php:
<script src="/admin/js/Jcrop/js/jquery.Jcrop.js">
<link rel="stylesheet" href="/admin/js/Jcrop/css/jquery.Jcrop.css" type="text/css" />
I can't seem to figure out where/why it is being stripped out of the final html.
Any help would be much appreciated. BTW, I carefully went over all the setup steps and the above discussions.
Thanks again.
# hpatoio on February 1st, 2009
What happen if you go to this URL http://www.yout-domain.tld/wp-content/plugins/nextgen-gallery/admin/js/Jcrop/js/jquery.Jcrop.js ?
Do you get the javascript file or a 404 ? Is WP installed in the root or in a subdirectory ?
# Darkest of Angels » Blog Archive » Cropping thumbnails for Nextgen on February 1st, 2009
[...] take the picture into account. So i started to look for a way to do just that. I stumbled upon the site of Simone Fumagalli. He created a hack for NextGEN to add that functionality to the manage [...]
# David Radovanovic on February 2nd, 2009
hpatoio,
Thanks for your response.
http://www.whatsthebigidea.com/wp-content/plugins/nextgen-gallery/admin/js/Jcrop/js/jquery.Jcrop.js
It's there.
# Dark Angel on February 2nd, 2009
I've downloaded the trunk version of your plugin and still cant get it too work correctly in firefox and internet explorer.
i can get them all to work if I open the link in a new tab(so the page isnt stuck in thickbox, the popup thing) by adding the jQuery script src to the manage-galleries.php and by changing the script start like this.
jQuery(document).ready(function(){
jQuery('#jcrop_target').Jcrop({
onChange: showPreview,
onSelect: showPreview,
aspectRatio: 1
});
});
which is good practice since you dont want your script to start before the document has finished loading. But when opened in the thickbox they remain broken. It shows no javascript errors.
Problems within thickbox:
.
internet explorer (Image doesnt show and no selection can be made until i remove the imageToEdit id from the to be cropped image but then no selection can be made since Jcrop doesnt have a target to crop
Firefox( image shows but no selection can be made)
not sure if im the only one with this problem. There is no problem in Opera it just works there.
Testing on IE7/IE8B/FF3/OP9.63 on WP2.7 with NGG1.10
PS disabled the following lines, the new edit thumb links looks much better
/*add_action ('ngg_manage_gallery_columns', 'ngg_add_thumbnail_management');
add_action ('ngg_manage_gallery_custom_column', 'ngg_modify_thumbnail', 10 ,2); */
# hpatoio on February 2nd, 2009
I've added the line for the jQuery(document).ready and I will commit it.
I don't understand in which file you have the last 2 lines, those with add_action. They are not present in the latest trunk version.
# Dark Angel on February 3rd, 2009
I think its in the custom_thumbnails, I used the old one the one in the trunk code just says die("SSS"); Maybe its not needed anymore not sure. I downloaded the following files.
manage_thumbnail
custom_thumbnail
and the folder jscrop.
maybe I missed something, ill check on it later tonite at work at the moment.
# hpatoio on February 3rd, 2009
It looks like I've committed the wrong file
I'll check later.
# Chris Altman on February 6th, 2009
Attempted to install on WP2.7 with NGG 1.1 and get the following errors in Firebug.
unterminated regular expression literal
[Break on this error] var rx = / coords.w;\n
showPreview is not defined
[Break on this error]
Any advice, this is a very important feature.
# hpatoio on February 6th, 2009
Ciao Chris.
I've tried to reproduce you problem and it happen to me only when I set to zero/null the values for Width x height (in pixel) and I uncheck Set fix dimension and Crop square thumbnail from image.
Is this your setup ?
Do you have display_errors set to zero ? If so, can you please turn it on and tell me if you get any PHP error ?
I've committed few days ago to NGG repository the files for the custom thumbnails.
Check it out and try it ! You don't need to add/change anything.
Let me know how it goes.
# jim on February 7th, 2009
Wouldn't it be great if the cropping marquis included the actual image dimensions (like when you scale an image in Wordpress) which change as you alter the crop? That way you could create a thumbnail of specific size and proportion.
# hpatoio on February 7th, 2009
I didn't really get what you mean Jim.
Size for thumbnails is take from NGG setting, I don't see the point of having thumbnails with different sizes in the same gallery.
# Dark Angel on February 8th, 2009
Okay, i've found out the major source of my problems. I used a plugin called wp-codebox that somehow screwed things up. When i disabled that, it seemed to work fine except for IE7, which still is showing a grey area instead of a picture. Not sure how that one screwed things up in the back end tho, but it resolved similar issues i had with the fancy box plugin.
For testing I added all the scripts loaded in wordpress into the manage_thumbnail.php and it worked fine on all browsers that I tested. Might be a conflict in IE7 somewhere between JCrop and thickbox in IE7, not sure. Many thanks again for the plugin.
# Chris Altman on February 9th, 2009
I checked out the code from the NGG repository and all works. Great work.
# Jon on February 9th, 2009
I just installed this on my blog, works great. Thanks a lot, will come in very handy for the non landscape pictures.
# David Radovanovic on February 16th, 2009
Wordpress Version 2.7.1and NextGEN Gallery 1.2.0a
I'm back and thought I'd give your plugin another try. I checked out via: svn checkout http://nextgen-gallery.googlecode.com/svn/trunk/ nextgen-gallery-read-only and installed the new 1.2 version. I'm still having the problem with an empty pop-up window. http://www.whatsthebigidea.com/wp-content/plugins/nextgen-gallery-read-only/admin/js/Jcrop/js/jquery.Jcrop.js opens up fine. Thanks.
# hpatoio on February 16th, 2009
Ciao David.
Do you have other plugins installed ? Something that modify images ? Try to disable them and try again.
# David on February 16th, 2009
I disabled all plugins that have anything to do with images, though still no good. I have noticed that the "Add NextGen Gallery" visual editor icon pop-up a 404 page. All the other default icons which open pop-ups work fine.
Thanks Simone for your help.
# Jeff Polowy on February 20th, 2009
since ive installed this customization to nextgen im unable to login through my wp-admin login screen… i get the error….
Warning: Cannot modify header information – headers already sent by (output started at /home/duppaorg/public_html/wp-content/plugins/nextgen-gallery/nggallery.php:362) in /home/duppaorg/public_html/wp-includes/pluggable.php on line 850
can anyone help me out here to resolve this please?!?!
# Jeff Polowy on February 20th, 2009
also keep in mind i know its caused by this mod to make custom thumbnails because if i install the normal nextgen plugin everything works fine….
# hpatoio on February 20th, 2009
Which version of WP are you using ? And which version of NGG ?
# Nancy on March 5th, 2009
Hello!
I'm really new to this WordPress thing but I have 2.7.1 and NGG 1.1.0. After reading all the comments am I going to be able to use this? It's a fabulous plugin! I just did some thumbnails and would love to be able to use it.
Nancy
# hpatoio on March 5th, 2009
Ciao Nancy ! Cool website whitmorephotos.com. Anyway, if you wait a couple some days (I guess 10/15) NGG 1.2 will be released and it support the thumbnail feature.
# Nancy on March 6th, 2009
I can hardly wait – did you mean 3/15 (March)??
Thanks!!
Nancy
# hpatoio on March 6th, 2009
You can check out the code from the SVN and then update to NGG 1.2 when it's released
# Fabrizio on March 13th, 2009
Ho installato NGG 1.2 ma non riesco a trovare la tua parte aggiunta per moficare le Thumbnails.
Mi potresti spiegare come devo fare?
Grazie
Fabrizio
# hpatoio on March 16th, 2009
Quando passi sull'elenco delle foto, ti appaiono i bottoni/link che ti permettono di vedere l'immagine, vedere i meta etc. Li trovi anche il link "Edit thumb"
Ciao
# Fabrizio Pivari on March 23rd, 2009
Trovato, grazie.
Ora ho un altro problema più complesso.
Con 3 fotografie funziona benissimo con la quarta no!
La fotografia in questione è
http://www.photoexecutives.com/wp-content/gallery/executives/camila-chang-thecus.jpg
Hai una soluzione?
Grazie
Fabrizio
# Stooky on April 14th, 2009
Hey!
Great Plug-in! I use the version that comes with nggallery 1.2.1. Unfortunately it says "Error updating thumbnail" when i click un "Update". Any idea what's wrong here? PHP Safe Mode is off.
# Stooky on April 14th, 2009
Hey!
Thanks again for this great plugin!!
I solved the problem! There was an error with CHMOD…
Forget about my problem
Regards
# Nancy on April 21st, 2009
I now have upgraded to WP 2.7.1 and NGG 1.2.1. but there is no pop up aarea for selection. the screen only shows the current thumbnail and the original image – no way to select the part of the orig image you want to be the thumbnail. I see otheres in this forum talking about changing lines of code. Do I need to do something like that?
Ciao!
Nancy
# hpatoio on April 21st, 2009
Are you sure ? In NGG 1.2.1 we took away the button "Modify" so you just have to select the area on the picture.
Do you have any Javascript error on your page ?
# Nancy on April 21st, 2009
2.7.1 WP and 1.2.1 NGG is correct. I do not get a javascript error. I do not have a "modify" button. Next to each thumbnail in the Manage Gallery section you can click on "edit thumb" and it brings up the orig. image and the current thumbnail. If I right or left click over the image or current thumbnail (and move it around around or do whatever) nothing changes. I see in some examples where a light area forms over the orig. image to show what the new thumbnail will be but mine doesn't show that.
Nancy
# Nancy on April 25th, 2009
Is it a problem because I'm maybe importing too large of an image? Do I have to change some code somewhere? When I scroll over the image no tools pop up to recrop the image.
Thank you…Nancy
# Nancy on May 12th, 2009
Anybody still here???
# Jim on September 30th, 2009
I contacted Nancy and she said that the she was never able to resolve the problem with the selection tool. I appear to have the same issue, using WP 2.8.4 and Nextgen 1.3.6 and no other image related plugins (in fact only a couple of plugins at all). Although the quirky thing is that I am able to use the selection tool on an thumbnail every once in a while. The ability to use the tool does not appear to be linked to image size. Wondering if anyone else experiences this problem.