How to Fix Aspect Ratio Problem of NextGen GalleryView Template

NextGen is a very powerful and complete photo management plugin for WordPress. It provide several ways to manipulate and display image on the website. It has option for slideshow, thumbnail, custom templating, widgets and shortcodes. I recently utilize it in one of my client’s website and uses GalleryView Template to display the images. You can download it from here

It’s a great plugin. But, unfortunetly, it was making a common mistake to display images. It display stretched images. I never thought that in these days when CSS has been so powerful that there are number of ways to avoid stretching and aligning the images in a way that it remain looks beautiful for most of the dimensions. This is how it was appearing.

This image is of 800px x 483px but plugin forced it to 450px x 400px, opsss… and look so awful. Here is how to fix it.

Fixing the stretching

1. Browse to /wp-content/plugins/nggGalleryview
2. Find and open “gallerview.css“
3. Find “.galleryview .panel img”. It will have following css

.galleryview .panel img {
   width: 450px;
   height: 400px
}

Change it to

</pre>
.galleryview .panel img {
 max-height: 400px
}
<pre>

That is, Remove one of the dimension (what best suites you) and change the other one to max-width/max-height. It should fix the stretching problem. But, now you may be having another issue, that image is not cropped from the center. Couple of solution is

1.     Cropping from Image Center

To fix this you image dimension should be fixed (assuming 800px). You can use the following CSS to centralize the image in the viewing area. Assuming you have omitted width and used max-height (as above).

</pre>
.galleryview .panel img {
 max-Height: 400px
 position: absolute;
 top:0;
 left:50%;
 margin-left: -400px;  /* half of your image’s width*/
}

You would use top and margin-top to center it vertically.

2.     Make it bigger to accommodate big images

If your content area is big enough to accommodate your pictures, why you must limit them to width of 450px? This is how you will span the gallery to whole of your content area. Lets expand it to width of 680px;

1. Browse to /wp-content/plugins/nggGalleryview
2. Find and open “gallerview.css“
3. Find “.galleryview .panel img”. Change the css to following

</pre>
.galleryview .panel img {
 max-height: 400px;
 }

4. Find .galleryview and add

text-align: center;

5. Same directory open “galler-galleryview.php”
6. Find “panel_width: 450,” (line #40) and change it to “panel_width: 680,”
7. That’s it. Sample output is below.