Next Gen Gallery Slide Show

After installing the Next Gen Gallery Plugin, I wanted to use it to have a slide show on the front page of my site. The slide show can be seen at: http://www.parklandsd.org

1. Upload the Next Gen gallery plugin to your plugin folder and activate it.
2. Get the JW Image Rotator from: http://www.longtailvideo.com/players/jw-image-rotator/ . The image rotator is free for non-profits and personal sites but there  is a charge for commercial and for-profit sites.  The image rotator is necessary to show the next gen photos in a slide show.
3. Unzip the file and upload the image rotator files to the wp-content/uploads folder in your site.
4. Click on the Gallery in the left menu of the Dashboard – this will open and expand the Gallery menu.
5. Select “Options”. You will see choices for: General Options, Thumbnails, Images, Gallery,  Effects, Watermark, Slideshow.  Select Slideshow.
6. If you uploaded the Image Rotator to the wp-content/uploads folder, click the option to “search now” for the Image Rotator. If it is found in the uploads folder it will show in the “Path to the Imagerotator” box.
7. There are other settings on this page to customize your slide show.  These settings will affect all of  the slideshows in your site – EXCEPT the slide show we are putting on the front page of  the site. I used code to insert the slide show on the front page and that code over rides these settings but we will get to that in a little bit. These settings are pretty self-explanatory. You can choose the default size of your slide show, the order of photos in the slide show, background color, etc. If you want a description of your photos to show across your slides show, check the box to  “show navigation bar”. The navigation bar has the following options:
   1. Picture description
   2. Click to show next picture
   3. show picture in full screen

 

 

 

8.  Next we will create the gallery for the main page of our site.  Go back to “Gallery” in the menu bar of  the Dashboard and  select ” Add Gallery/ Images”. A new window opens.

9. Add a Gallery and name it “main page” so you will know it is the gallery that appears on the main page of your site.

10. Find the button to “Upload Images” and click.  Browse to the images you want to upload into your slide show. NOTE:  the images must be sized correctly before you upload them.  Resize the images in your photo editing software. My slide show is 500px wide by 350px high but you can adjust according to your needs. The resolution for web photos should be 72 pixels.  Make sure you select the “main page” gallery from the drop down box so that your images go into the correct gallery.

11. Go back to “Gallery” in the menu bar and select “Manage Gallery”. This page shows any  galleries you have created and since we only have one gallery so far, you will see “main gallery” on this page. Click on “main page” to open.

12.  The pictures in your gallery are listed. You will also see  an area to edit the thumbnail, add tags (helpful for searches and also for SEO), and a description.  The description is what shows in the navigation bar.

13. After adding your descriptions and tags, save your page.

14.  To add a slide show or gallery to a post or page in WordPress, you can use the shortcode: [  slideshow id=2 ] where 2 is the ID number of your gallery. Note that I added spaces in the shortcode so it would appear in this post. The correct format has no spaces between the brackets and the text – if you leave a space, the shortcode will not work and the gallery will not appear. This might work  if you have your blog on your main page, but I am using a magazine type template and the shortcode didn’t work for me. It works on other pages, just not the main page.

15.  I didn’t have luck with this on the home page so  I used the source code from the demo page on the Next Gen web site: This is what it looks like: 

 Remember to substitute your website URL in the appropriate place. Also notice that you have the flash variables in the code here.  For example if you have shownavigation:”true”, the navigation bar will show in the slide show. These settings over ride the settings on the “Options”  page in the Next Gen gallery settings.

You will also need to know the ID number of your gallery. You will find the Id numbers of you galleries on the “Manage Gallery” page. the number is listed in front of the Gallery Name.  Our “main page” gallery is ID 1.  Enter the number of your gallery after gid= in this line: file : “http://yoursite.com/wp-content/plugins/nextgen-gallery/xml/imagerotator.php?gid=1 “,

<div>
<div class=”swfobject” id=”so4_1″ style=”width:400px; height:300px;”>
<p>The <a href=”http://www.macromedia.com/go/getflashplayer”>Flash Player</a> and <a href=”http://www.mozilla.com/firefox/”>a browser with Javascript support</a> are needed..</p>
</div></div>
<script type=”text/javascript” defer=”defer”>
var so4_1 = {
 params : {
  wmode : “opaque”,
  allowfullscreen : “false”},
 flashvars : {
  file : “http://yoursite.com/wp-content/plugins/nextgen-gallery/xml/imagerotator.php?gid=1 “,
  linkfromdisplay : “false”,
  shownavigation : “true”,
  showicons : “true”,
  overstretch : “false”,
  rotatetime : “6″,
  backcolor : “0×000000″,
  frontcolor : “0xFFFFFF”,
  lightcolor : “0xCC0000″,
  width : “400″,
  height : “300″},
 attr : {
  styleclass : “slideshow”,
  name : “so4″},
 start : function() {
  swfobject.embedSWF(“http://your site.com/wp-content/uploads/imagerotator.swf“, “so4_1″, “400″, “300″, “7.0.0″, false, this.flashvars, this.params , this.attr );
 }
}
so4_1.start();
</script>
<div style=”clear:both;”></div>

Next, I will show you how I  used the Next Gen gallery and the WordPress shopping cart to add Paypal buttons to items in a blog.

WordPress Plugins for Content Management

Plugins are little snippets of code that add functionality to your site. WordPress has a very generous community of supporters that create these plugins and there are several that help WordPress function as a content management system. I am going to list the ones I found most useful.

Widget Logic – This plugin puts sidebar items on selected pages using WordPress conditional tags. I used this to add contact information, graphics in the sidebar, and links, all the while controlling which page the information appeared on.

My Page Order – Allows you to order the pages in your navigation bar using a drag and drop method – much easier than using the WordPress numbering system.

Page Links To – Great plugin that adds a page to your navigation bar and points to an external page. Before I added this plugin, I hard coded my navigation into the header file. Using this plugin, I can have users add pages to the website without giving them access to the header file. This plugin is also good if you want to have a page under more than one navigation heading. For example, I did a school site and wanted “Forms and Manuals” under several headings and was able to add it easily with this plugin.

WP Print – Plugin that adds a Print link to the bottom of each page. When selected, it shows a preview of the page to be printed.

WP Sticky – Keeps a sticky post at the top of your blog

Site Map Generator by Dagon – Site map generator that adds a site map of all my pages. I was able to add the code to a page and have a site map for my web site.

Next Gen Gallery – Added a slide show to the front page of my site. It is easy for users to add photos and keep the slide show updated. Next Gen also works with wp Paypal shopping cart plugin to add paypal buttons to your gallery – look  at the tutorials at Tips and Tricks to see how to integrate the plugin. You can  turn your WordPress site into a store!

Google Custom Search – I added this to my header file and it does a great job searching my site.

Askimet – No more SPAM!

WordPress as a Content Management System

WordPress is not just for blogs. I had a huge website and 9 subwebs that were created in a combination of Dreamweaver and Frontpage. I was looking for a way to update the sites so they were easier to maintain and it would be easier to add interactive features – wordpress was my answer.  Why did I choose Worpress?

• It was easy to install.
• The  interface made it easy for anyone to post news or information.
•  There are an abundance of plugins to extend the functionality.
• Check out the free themes.
• Abundant support at WordPress.org
•  Best of all –  it is free and open source.

I host with Bluehost but there are many good hosting services available. 

Click on the link for WordPress in cpanel and you will be redirected to Simple scripts. Click the install button and you are ready to go.

One of the great things about WordPress is the amount of themes available. WordPress installs with 2  default  themes but it is simple to upload and change themes. The harder part is choosing one of the thousand available.  WordPress has the option to show your blog on the first page of your site or to have a static page as the first page.  I chose a magazine style theme that has information on the front page and links to information on other pages. One of my favorite themes is the Revolution Theme by Brian Gardner. The original theme is no longer available but he does have lot of other great themes. His themes are “Premium Themes” meaning they are not free but they come with wonderful support and I thought they were worth every cent. Take a look at the themes and the  theme showcase to see what is available.