The next generation gallery (NGG) plugin for WordPress can take a bit of getting used to. Its regarded as the best free gallery plugin for WordPress but its not perfect so you may need to edit or add some code at times.
In this tutorial i’ll show you how to centre thumbnail gallery images/pictures when using mutiple galleries on different pages or posts. You can also use this code for single images or galleries and modify if needed.
Here’s the code i used:
[css autolinks=”false” classname=”myclass” collapse=”false” highlight=”1-3,6,9″ htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”true” title=”example-filename.php”].custom .ngg-galleryoverview { margin-left:auto !important; margin-right:auto !important; }
.custom #ngg-gallery-9-16194 { width: 960px !important; }
.custom #ngg-gallery-8-16122 { width: 640px !important; }[/css]
NGG should really take care of the widths but for some reason doesn’t so CSS code is needed to do this. Otherwise you may see your gallery aligned to the left or even see your gallery images one on top of the other in one column.
If you go to Gallery > Options > Gallery Settings you will see an option for: Number of columm – 0 will display as much as possible based on the width of your theme. The 0 setting should prevent any gallery images from extending past the content area and into the sidebar which doesn’t look good, but it doesn’t.
I wanted one gallery to show 2 columns and the other to show 3 as one gallery is on a post with sidebars and the max width is 660m px. The other gallery is on a page where i am using the ‘no sidebars’ template option and therefore has a larger width of over 960px.
If you’re only using one gallery then you can use the first line or two of this code and edit the widths to your own specifications.
[css autolinks=”false” classname=”myclass” collapse=”false” highlight=”1-3,6,9″ htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”true” title=”The first line of the CSS code block”].custom .ngg-galleryoverview { margin-left:auto !important; margin-right:auto !important; }[/css]
Centres all NGG galleries globally (sitewide) but doesn’t account for the sidebar. To centre the gallery within the content area, you will need to add a width.
[css autolinks=”false” classname=”myclass” collapse=”false” highlight=”1-3,6,9″ htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”true” title=”example-filename.php”].custom #ngg-gallery-9-16194 { width: 960px !important; }[/css]
The code above adds a width of 960 px which you can change to your own specs. You’ll also notice the gallery i.d 9 and the page i.d 16194. You need to change these to your own to make this code work which isn’t difficult.
The third line of code:
[css autolinks=”false” classname=”myclass” collapse=”false” highlight=”1-3,6,9″ htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”true” title=”example-filename.php”].custom #ngg-gallery-8-16122 { width: 640px !important; }[/css]
Relates to my second gallery with a page i.d of 16122 and gallery tag number 8. Width is 64o px as my post max width is 660.
Thanks to Godhammer and Postrophe from the Thesis forum. Best WordPress theme technical support on the planet is included for life when you own the Thesis theme for WordPress.
In the next post i’ll show you how to link NGG thumbnail gallery images to any URL by adding a custom field and a simple code edit to the Next Gen Gallery plugin files.
Ever used the plugin file editor before? This may be your first opportunity!
Leave a Reply
You must be logged in to post a comment.