Using WordPress as an Inventory Catalog Pt.6

Adding a photo gallery for each inventory item goes like this:

  1.  Upgrade to Wordpress 2.7 or later.
  2. Install http://www.jarinteractive.com/code/photoJAR/photojar-base/
  3. Install http://www.jarinteractive.com/code/photojar/photojar-post-thumbnailer
  4. Install http://stimuli.ca/lightbox/
  5. Replace all HTML for the image you have in your inventory posts with , or to make it square and cropped.

Now all the images in the Wordpress gallery are in a pop-up slideshow-like gallery when you click on the image in your inventory post.  Also, since I am using RapidWeaver as mentioned before you must add a little more code.

  1.  In RapidWeaver, for each inventory page, click Page Info.
  2. Click the Header button.
  3. Under the Header tab below add <?php wp_head(); ?> on a new line in the text box.
  4. Remove the line “<div style=”clear:both”></div>” from “yoursite.com/yourwordpressdir/wp-content/plugins/photojar-post-thumbnailer/default-theme.php”

I’m not positive but I think this gets code from all your plugins and puts it in the <head>.  I noticed after adding it, there was a section called “lightbox script” in the source code when viewed online.Basically, the that you added to the post HTML is called a shortcode in Wordpress lingo.  The plugins you install modify what those shortcodes mean from the default in Wordpress.I noticed that my custom fields now fall below the image.  My next venture will be to try and change the CSS for Lightbox or photoJAR to keep the custom fields to the right of the photo.

Comments (0)