Nextgen Gallery – Resizing images according to the aspect ratio

Soooo… after postponing it for quite a while… I sat down and solved finally the aspect ratio problem when Nextgen Gallery shall resize/shrink an image.

The problem is… If I set as picture size e.g. 800×600 px (width x height), then Nextgen Gallery resizes a picture from e.g. 1024x768px to this format. All good. But if the original picture is 768x1024px then the result is not a picture with 600x800px, no, it will be a picture of 450x600px. And that is not what we want. (Isn’t it?)

So, I sat down today and checked the sources. Actually its simple. The picture will be uploaded and checked on its size. The values will be re-calculated be the settings and the aspect ratio should be checked as well. They just forgot to adjust the settings. We’ll do that now…

Open the file “/wp-content/plugins/nextgen-gallery/admin/wp25/functions.php” in an editor and search for the function “function resizeImages()”. Here you’ll see:

function resizeImages($gallery_absfolder, $pictures) {
// ** $gallery_absfolder must contain abspath !!

if(! class_exists(‘ngg_Thumbnail’))
require_once(NGGALLERY_ABSPATH.’/lib/thumbnail.inc.php’);

$ngg_options = get_option(‘ngg_options’);

if (is_array($pictures)) {

$bar = new wpProgressBar(__(‘Running… Please wait’,’nggallery’));
$bar->setHeader(__(‘Resize images’,’nggallery’));
//total number of elements to process
$elements = count($pictures);
// wait a little bit after finished
if ($elements > 5) $bar->setSleepOnFinish(2);
//print the empty bar
$bar->initialize($elements);

foreach($pictures as $picture) {

if (!is_writable($gallery_absfolder.”/”.$picture)) {
$messagetext .= $gallery_absfolder.”/”.$picture.”<br />”;
$bar->increase();
continue;
}

$thumb = new ngg_Thumbnail($gallery_absfolder.”/”.$picture, TRUE);
// echo $thumb->errmsg;
// skip if file is not there
if (!$thumb->error) {
$thumb->resize($ngg_options[‘imgWidth’],$ngg_options[‘imgHeight’], $ngg_options[‘imgResampleMode’]);
if ( $thumb->save($gallery_absfolder.”/”.$picture,$ngg_options[‘imgQuality’]) ) {
// do not flush the buffer with useless messages
if ($elements < 100)
$bar->addNote($picture. __(‘ : Image resized…’,’nggallery’));
} else
$bar->addNote($picture . ” : Error : <strong>”.$thumb->errmsg.”</strong>”);
$bar->increase();
}
$thumb->destruct();
}
}

if(!empty($messagetext)) nggallery::show_error(‘<strong>’.__(‘Some pictures are not writeable :’,’nggallery’).'</strong><br /><ul>’.$messagetext.'</ul>’);
return;
}

This is the function which resizes our original pictures. We’ll replace this function now with this modified one:

function resizeImages($gallery_absfolder, $pictures) {
// ** $gallery_absfolder must contain abspath !!

if(! class_exists(‘ngg_Thumbnail’))
require_once(NGGALLERY_ABSPATH.’/lib/thumbnail.inc.php’);

$ngg_options = get_option(‘ngg_options’);

if (is_array($pictures)) {

$bar = new wpProgressBar(__(‘Running… Please wait’,’nggallery’));
$bar->setHeader(__(‘Resize images’,’nggallery’));
//total number of elements to process
$elements = count($pictures);
// wait a little bit after finished
if ($elements > 5) $bar->setSleepOnFinish(2);
//print the empty bar
$bar->initialize($elements);

foreach($pictures as $picture) {

if (!is_writable($gallery_absfolder.”/”.$picture)) {
$messagetext .= $gallery_absfolder.”/”.$picture.”<br />”;
$bar->increase();
continue;
}

$thumb = new ngg_Thumbnail($gallery_absfolder.”/”.$picture, TRUE);
// echo $thumb->errmsg;
// skip if file is not there

if (!$thumb->error) {
//$thumb->resize($ngg_options[‘imgWidth’], $ngg_options[‘imgHeight’], $ngg_options[‘imgResampleMode’]);

if ($thumb->currentDimensions[‘height’] > $ngg_options[‘imgHeight’] || $thumb->currentDimensions[‘width’] > $ngg_options[‘imgWidth’]) {

// check for portrait format
if ($thumb->currentDimensions[‘height’] > $thumb->currentDimensions[‘width’]) {
//vorgaben checken
if ($ngg_options[‘imgWidth’] > $ngg_options[‘imgHeight’]) {
$y = $ngg_options[‘imgWidth’];
$x = $ngg_options[‘imgHeight’];
} else {
$y = $ngg_options[‘imgHeight’];
$x = $ngg_options[‘imgWidth’];
}
$thumb->resize($x, 0, $ngg_options[‘imgResampleMode’]);
// get optimal y startpos
$ypos = ($thumb->currentDimensions[‘height’] – $y) / 2;
$thumb->crop(0, $ypos, $x,$y,$ngg_options[‘imgResampleMode’]);
} else {
//vorgaben checken
if ($ngg_options[‘imgWidth’] < $ngg_options[‘imgHeight’]) {
$y = $ngg_options[‘imgWidth’];
$x = $ngg_options[‘imgHeight’];
} else {
$y = $ngg_options[‘imgHeight’];
$x = $ngg_options[‘imgWidth’];
}
$thumb->resize(0,$y,$ngg_options[‘imgResampleMode’]);
// get optimal x startpos
$xpos = ($thumb->currentDimensions[‘width’] – $x) / 2;
$thumb->crop($xpos, 0, $x,$y,$ngg_options[‘imgResampleMode’]);
}

} else {
$thumb->resize($ngg_options[‘imgWidth’], $ngg_options[‘imgHeight’], $ngg_options[‘imgResampleMode’]);
}

if ( $thumb->save($gallery_absfolder.”/”.$picture,$ngg_options[‘imgQuality’]) ) {
// do not flush the buffer with useless messages
if ($elements < 100)
$bar->addNote($picture. __(‘ : Image resized…’,’nggallery’));
} else
$bar->addNote($picture . ” : Error : <strong>”.$thumb->errmsg.”</strong>”);
$bar->increase();
}
$thumb->destruct();
}
}

if(!empty($messagetext)) nggallery::show_error(‘<strong>’.__(‘Some pictures are not writeable :’,’nggallery’).'</strong><br /><ul>’.$messagetext.'</ul>’);
return;
}

Ok, what is this doing now?

if ($thumb->currentDimensions[‘height’] > $ngg_options[‘imgHeight’] || $thumb->currentDimensions[‘width’] > $ngg_options[‘imgWidth’]) {

First of all we check if the uploaded image is bigger then the settings. If not, then we don’t need to do anything anyway.

if ($thumb->currentDimensions[‘height’] > $thumb->currentDimensions[‘width’])

Here we check the aspect ratio… horizontal or vertical format.

if ($ngg_options[‘imgWidth’] > $ngg_options[‘imgHeight’]) {
$y = $ngg_options[‘imgWidth’];
$x = $ngg_options[‘imgHeight’];
} else {
$y = $ngg_options[‘imgHeight’];
$x = $ngg_options[‘imgWidth’];
}

And that is basically the new thing… after we know if we have a horizontal or vertical picture, we can adjust the setting values… like 800x600px or 600x800px (for my example).

And thats it already. Looks a lot, but its more explaining then anything else :)
Maybe that is not the best solution (especially it is not ‘update save’), but it works for now. If you know a better solution, then let me have it in the comments. ;)

Please notice that all code snippets and examples on this page are on your own risk. I am not responsible for anything you do!

Cheers
Gordon