I recently started using the Nextgen Gallery on a project I just completed at exquisitecutandfashion.com.  If you haven’t used Nextgen before, it’s an excellent image organizer that let’s you do things like automatic thumbnails, gallery metadata, and more.  Have a look at some samples to get a better idea.

I have come to love Nextgen so much, I decided to use the plugin once again with another client, coastexpressions.ca because it supposedly gave me flash gallery capabilities. Integrating both together is normally a straightforward process inside a blog post.   According to instructions, all you are supposed to do is use [simplegallery id=x] and you should be able to show the flash viewer.  That wasn’t working for me.  When I tried that same short code in the page header of a site nothing happened, and I wasn’t surprised. I assume it’s because the above short code only works inside the Wordpress loop (and probably where the plugin does some run time magic).  Anyways, I found a different approach that works outside the Wordpress post loop and will almost certainly work for you anywhere on your site (including inside a Wordpress loop or in your blog post/page.  Below are complete instructions:

What you will need

• Wordpress web site
• Wordpress Admin access and advanced coding skills
• Nextgen Gallery
• Nextgen Flash Plugin
• Flash Photo viewer from AirtightInteractive

Step 1 – Install the Nextgen Gallery Plugin

Go to Wordpress admin, click Add Plugins, search for “Nextgen”, and Install the Nextgen Gallery plugin.  If you haven’t installed a Wordpress plugin before, the rest of these instructions here aren’t going to make any sense to you at all.  I suggest, you put this tutorial on hold, and learn a bit more first from here, here, and here.

Download the 1st plugin

Step 2 – Create a Gallery and add some Images

Once the plugin is installed and activated, find the new Gallery menu in your Wordpress admin. Create a new gallery (name it whatever you like), and add as many images as you like.  Click the image above if you need some help.

Step 3 – Install Flash plugin

If you haven’t seen it before, a company called AirtightInteractive has some really great flash photo viewers you can get for free.  In combination with one of those flash photo viewers (I’m using Simpleviewer in this example), we can show our Nextgen gallery on our site.  In order to do that, we need a second plugin.  Download and activate it.

Download the 2nd plugin

Step 4 – Download and Install the Flash files

Now that you have the 2nd plugin installed, you will need some flash files installed in your Wordpress Plugins folder.  See below for detailed instructions (original instructions located here)

1. Create a folder in your Wordpress plugin folder called “nggflash-swf”. 

2. Go to the web page http://www.airtightinteractive.com/ and download the SimpleViewer & Tiltviewer & AutoViewer & PostcardViewer

3. If you intend to use PostcardViewer, rename viewer.swf in the PostcardViewer folder to pcviewer.swf

4. Upload the file viewer.swf, TiltViewer.swf, autoviewer.swf and pcviewer.swf to the wp-content/plugins/nggflash-swf folder

5. Activate the plugin

6. Go to Gallery->FlashViewer.  Enter the location of your SWF file.

Step 5 – Embed your Gallery

If you have gotten this far, you are doing well. You should have the following done:

• Nextgen Gallery plugin installed, activated, and at least one gallery populated with images
• Nextgen Flash plugin installed, activated, and configured (see Gallery->FlashViewer in Wordpress admin for configuration)

1. Now, get the ID of your Nextgen gallery as show below

   

2. Using the above ID, enter the code below anywhere on your site where you want the Flash viewer to appear. 

   1: <div id="gallery">

   2: <object height="480" width="950" type="application/x-shockwave-flash" class="simpleviewer" name="so1" data="/wp-content/plugins/nggflash-swf/viewer.swf" id="so1_1" style="visibility: visible;"><param name="wmode" value="opaque"/><param name="allowFullScreen" value="true"/><param name="bgcolor" value="#E2F0FD"/><param name="flashvars" value="preloaderColor=0x999999&amp;xmlDataPath=/wp-content/plugins/nextgen-flashviewer/xml/simpleviewer.php?gid=1"/></object>

   3: </div>

3. In your code above, change gid=1 to the number of your Nextgen Gallery ID where 1 is replaced by your gallery id.

   1: ....php?gid=1"/></object>

   2: </div>

4. Change your flash object width and height as well.  I tried a few different sizes, and it seems that Simpleviewer doesn’t like anything smaller than 480 pixels in height.

   1: <object height="480" width="950"

5. If you are using Simpleviewer as I am, change your background color as well

   1: <param name="bgcolor" value="#E2F0FD"/>

If all goes, well you should have a functional flash photo viewer connecting to your Nextgen gallery.  Got problems?  Let me know.

Demo my Gallery

Tweet This Post

I’m writing this post for a client I have just started working with in the hopes that it clears up some of the mystery around this topic and perhaps you will also learn a thing or two from my 2+ years of working with Wordpress.

If you spent any time at all with Wordpress, you eventually run into the dilemma of When to use Posts vs Pages for new content.  Sometimes the path is very clear when your theme design makes the choice self-evident (as with this blog theme for example where every content item is a Post).  Other times, it’s not as clear-cut (like with some of themes at Woothemes like The Station)  When it’s not as clear-cut, and your theme design doesn’t necessarily dictate which one you should use, you need a framework like the one I describe below.

Now, before we go any further, let’s learn about the differences between posts and pages for our less experienced users.

Difference between Post and Page from a Wordpress point of view

Well, let’s consider the possible areas that the Posts and Pages might differ:

• Editing and Embedding Content?  Definitely not.  Both are equal in their ability to render HTML.
• Commenting?  Nope, both can accept them and you can turn commenting and pinging off any any page/post you feel like (including adding aging rules with various plugins so that commenting eventually gets turned off on schedule)
• Publish Date?  Nope, both have this too
• Content Hierarchy?  Well, yes and no. You can’t say for certain really without considering your theme and how you implement the site.  For instance with pages, hierarchy is clear-cut with page and sub-page inheritance and that’s easy to put into a menu structure with just a few lines of code.  However, with posts, you can implement hierarchy as well via categories and sub-categories and creating a menu system to display this hierarchical structure.  I would caution that you face more constraints this way (especially if you implement page and post hierarchy on the same menu). Let’s just say for now, that content hierarchy is more suited to page content and if a deep menu structure is called for in your design, consider using pages for easier coding of your menu system, or (god forbid!), use a different content management system more suited to complex content hierarchy like Joomla or Drupal.
• Tags?  Only with posts (well unless you install a Technorati plugin for your pages but that’s another discussion). Tagging is something that accompanies all posts nicely and can be accessed in the Wordpress loop for each post entry.  It’s meant to be used with Posts alone and if you need tagging on your page content, consider some custom programming or re-thinking your content strategy
• Categories?  Again, only with posts.  If you want to implement categories with your page content, you are likely going to face an uphill battle and will eventually resort using posts anyways.

Tags and Categories are the difference

Yep, tags and categories.  So now that you know, we are done right?  Not so fast.  You see, what you also need to understand is that both tags and categories can be implemented freely during content writing.  They can both be created on the fly with each of your posts and if you don’t consider the implications on your theme, you might run into troubles. 

For example, let’s say you have a design from your client that requires the following:

• Spa Services (not added to often, but updated sometimes)
• Hair Services (not added to often, but updated sometimes)

Now there is nothing inherently wrong with the structure here.  The client needs the ability to update different areas of their site and they want the menu system to show content in each area respectively.  Nothing wrong with that.  However, as the designer it’s my job to implement their goals in an effective way, and that means understanding how the menus are meant to look and what kind of content belongs where. 

Thinking a little further ahead into the challenge presented to me, I already know that some of the menu items are going to be pages and some are going to posts. 

• Spa Services (Page)
• Hair Services (Page)

Update Frequency

In addition to Tags and Categories, Update Frequency plays an important role in the decisions I made above.  When there are areas of your site that need content updates on a regular basis, Posts are almost always the way to go, not Pages.  Posts are easier to constrain within the confines of a Wordpress theme in regards to menu and content hierarchy because you can shunt all Post content off into a specific area of your site quite easily.

Finally, a Decision Matrix

So in summary, I think your best bet when you don’t know is to follow some simple rules below:

If you don’t know when to use posts vs pages, do this:

1. If you haven’t picked a theme, think about the kinds of content you want to produce. Consider your update frequency, whether you would like freeform categories and tags, and what types of content will be where. Make those decisions first.  Any good designer or programmer that knows their stuff can bring your ideas into reality.
2. If, however, you already have a theme (and are limited to working within it), look at your theme design first to determine what type of content fits where.  Like this theme for example where all content is clearly a Post. Of course, themes can be changed (again, like I did here), and if necessary, you can always hire an engineer like me.
3. If you need freeform categories and tags, you can ONLY do that with Posts
4. If you have a section of the site that is added to frequently (like a News area), it’s better to use Posts
5. If you have a section where new content is only updated but not created (like for example a list of your clients on one page, or your about page like I have here), that may actually be done using a Page.
6. If your content has no requirement for tags and categories, it’s probably telling you that you need a Page, not a Post (again like my about page)

Tweet This Post