WordPress Tutorials and Blog Posts

NextGen Sidebar Widget Spacing

June 22, 2011 | Written by Ed Andrea

The NextGen Gallery is probably the most used gallery for WordPress sites.

There's a great sidebar widget for showing thumbnails from galleries on the pages. It comes with a very basic styling, but there are templates easily accessible for creating the look you want.

The default style jams the thumbnails together, and to make a pleasing look, you need to add some spacing.

 

tutuploadsmedia_1308761471744.png

The design of the widget is controlled by templates. The spacing is easily accessed in a very simple template file called tpl.inner.html

1. Locate the template files

tutuploads1.png

You will find the templates you need to edit to make the changes at this location
/wp-content/plugins/nextgen-gallery-sidebar-widget/tpl in your site's directory.

Since the built-in templates would get overwritten on every plugin update, create a new directory called "ngg-sidebar-widget" in your theme's directory and copy the two template files "tpl.outer.html" and "tpl.inner.html" over there to edit them.

Create a new directory in /wp-content/themes/your-active-theme directory

tutuploadsCreate_a_new_directory_in_wp-contentthemesyour-active-the.png

Copy the two templates to the directory. If you are going to change themes remember to copy the directory to all your theme directories. I this case the new directory structure will look like this.

Copy the template files to the new directory /wp-content/themes/your-theme/ngg-sidbar-widget/

tutuploadsCopy_the_template_files_to_the_new_directory_wp-contentth.png

The outer template is a wrapper template (useful when you need some additional markup, e.g. when creating a list), the inner template has access to all the values from the gallery and image object (written in a simple templating syntax: {=object.member}). For the most use cases you should only need "gallery.title", "gallery.link" and "image.url".

Open tpl.inner.html in a text or code editor

tutuploadsOpen_tpl.inner.png

Look for the img tag. There is only one line in the file. If you know a little html, you will recognize the img tag. This is what tells the browser to get the picture and attributes (sometimes called "arguments') allow you to control some of the aspects of the way the output is shown by the browser. Edit this to add your spacing or any image tag arguments you would like.

Add an the hspace attribute to the img tag.

tutuploadsAdd_an_the_hspace_attribute_to_the_img_tag..png

hspace=" " is an attribute for the img tag that adds horizontal spacing to each image. You can also add vertical spacing with a similar tag vspace=" ".
Save your work to the server then check the page and see if it looks the way you want. Remember to save a backup of the original. It will still be in the original folder, and the edited version will be in the new folder. The new one will override the default.

That should be all you need to do. Remember that the amount of space will be the same on every picture so if you enter "1" there will be two pixels between pictures. If you enter "5 there will be 10 pixels between pictures.


 

 


To sign up for complete classes and support

 

Add comment


 


To sign up for complete classes and support