[Plugin: NextGEN Gallery] Thumbnails displayed irregular

For mixed formats you need to define for the css class .ngg-gallery-thumbnail-box a fixed height & width, depend on your thumbnail size.

Example :

.ngg-gallery-thumbnail-box {
height:140px;
width:150px;
}

this is better, thanks. Only that the panorama pics are now cut again to the width of 150px. Don’t know what to do… I think, there is no other possibility?

https://norbert-szepan.de/galerie/andere-laender/deutschland/

Hi,
i struggled with exactly the same problem until yesterday, what i exactly wanted was to have pictures thumbs of different dimensions put centered and bottom aligned so that the caption (description) would be in one line, heres my solution – putting the orignal thumb positioned into background:

1. you need to setup ngg to make thumbs with maximum with and height and not ignore image proportions, nonetheless they should be equal for example 180x180px

2. you make a renamed copy of plugins/nextgen-gallery/view/gallery-caption.php for use as a custom template, rename it to gallery-mycaption or whatever, and put this one in a newly created subfolder named “nggallery” which has to reside in the folder of theme you are using. It is also required to put a copy of nggallery.css not in that folder but your themes folder. So far the standard procedure for the very nice template feature that Alex has introduced.

3. create a transparent gif file of the forementioned dimensions 180×180 in my example and put it for example in /YOURTHEME/images/ folder. I called it pseudothumb.gif.

4. edit gallery-mycaption

change from

<?php foreach ($images as $image) : ?>

	<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box" <?php echo $gallery->imagewidth ?> >
		<div class="ngg-gallery-thumbnail" >
			<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
				<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
			</a>
			<span><?php echo $image->caption ?></span>
		</div>
	</div>
	<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
	<br style="clear: both" />
	<?php } ?>
 	<?php endforeach; ?>

to

<?php foreach ($images as $image) : ?>

	<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box" <?php echo $gallery->imagewidth ?> >
<div class="ngg-gallery-thumbnail" >		<div style="background-image:url(<?php echo $image->thumbnailURL ?>); background-repeat:no-repeat; background-position:bottom center;">

			<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
				<img  title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php bloginfo('template_directory'); ?>/images/pseudothumb.gif"  />
			</a></div>
			<span><?php echo $image->caption ?></span>
		</div>
	</div>

	<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
	<br style="clear: both" />
	<?php } ?>
 	<?php endforeach; ?>

5. Adapt the nggallery.css inside your themes folder (i just got rid of borders and backround and hover colors so mine now looks pretty empty parts changed:

.ngg-gallery-thumbnail-box {
	float: left;
}

.ngg-gallery-thumbnail {
	float: left;

	text-align: center;
}

.ngg-gallery-thumbnail img {

	display:block;  

	position:relative;
}

.ngg-gallery-thumbnail img:hover {

}

then there you go [nggallery id=YourId template=mycaption]

hope this is useful someone might have a better solution i couldnt find it.

best regards
bee

Hi,
just to add, seems sadly not to work with shutter effect (but with others) and you wont be able to have effects on hovering over thumbnails.

best regards
bee