NextGen Gallery & NextGen GalleryView Plugin Problems

I have been working on another blog that I intend to include a lot of pictures in. The default wordpress gallery was not meeting my needs so I decided to try some free gallery plugins to see if I could get any of those to work for me. The NextGen Gallery plug-in seemed to fit the bill, and then after a bit more digging I found a plug-in extension called the NextGen GalleryView (yeah I know names are very similar) which did exactly what I wanted.

 After installing and uploading a gallery and adding “[galleryview id=1]” it to one of my posts, the filmstrip / carousel at the bottom of the gallery (the single feature that I was most interested in) was not working properly. The thumbnail images showed up on two different lines which messed up the whole filmstrip. Also, there was a strange black box in between each one of the thumbnails.

 In the dashboard under the NextGen GalleryView options when I would view the example / preview it appeared the whole thing was working just fine. However when I paste in the short code and try to view the blog post itself the filmstrip would be all messed up. I am not a word press expert, but I am assuming that if the gallery preview is working in the dashboard but not your posts, then it is likely a theme conflict you are dealing with.

 To me it seemed like the spacing between each image was off and a HTML bullet was being added into the list between each picture. I troubleshooted (is that a word?) the problem in the Chrome developer tools by disabling the different styles one by one to help me narrow down what was causing the problem. I tried to disable anything that had to do with spacing, margins, padding etc until the filmstrip looked like it should. I eventually found that my chosen theme (Adventure Journal Theme) was adding a margin-left to everything as well as adding a stylized bullet to all the list items on the page.

To solve the spacing problem and get all the thumbnail images on to the same line I set margin to 0px in the “frame” class which is found at about line 63 in wordpress-nextgen-galleryview/GalleryView/css/galleryview.css file

/* FILMSTRIP FRAMES (contains both images and captions) */

.frame {}

to

/* FILMSTRIP FRAMES (contains both images and captions) */

.frame {margin:0px}

To get rid of the square bullet that was being inserted between each thumbnails I had to edit the style sheet for the theme. For my theme it was located at wp-content/themes/adventure-journal/style.css. I changed

ul li{

list-style:square;

}

to

ul li{

list-style:none;

}

And viola…I now have a working image gallery with an awesome filmstrip at the bottom.  I imagine using this plugin with other themes you might have similar problems which can be solved in similar ways.

  1. Ranjan says:

    I am using the same Galleryview plugin, and it works great. However recently started using Yoast WordPress SEO and cannot get the images that are used by the Galleryview plugin to show up in my XML sitemaps. Have you faced this? Or have any solutions? Thanks,

  1. There are no trackbacks for this post yet.