How to Make WordPress Photo Galleries With WebExport

Let's Say you have a standard WordPress PHP WebLog running on your server. It looks a little like mine, but you've got a different template and a few other details.

You are happy with this setup, but you want to share more than just text, and have a ton of pictures in your iPhoto library, and want to get them out, and onto your webpage. There are two ways to do this, by hand, or with some software. Clearly, you don't want to do it by hand.

Enter WebExport 1.0IconTemplate.jpg, specially designed to do just this, on my machine (you can check out my photo galleries at mountainmandan.net). Here's how to do it yourself:

First, download WebExport and the WordPress template, which is designed to work with the default WordPress theme and comes in the same tarball. Picture-2.jpg It is easy to modify the WebExport templates to work with other themes. Install the theme by double-clicking it, or moving it to ~/Library/Application Support/WebExport (which you may have to create).

Boot up iPhoto and select the photos you want to export. Select "WebExport" from the choices at the top of the window, and you will be greeted by a potentially scary looking window. Picture-1.jpg Don't panic! Select the wordpress template from the drop-down, and see the "pathToRoot=../../" pop up. This string tells the template how to get to your main wordpress directory from the directory it lives in. You can edit the titles/authors of the images in the "Metadata" tab (you can save it back to iPhoto for easier editing).

Now you're ready to export. Picture-3.jpg Click "Export" at the bottom of the page, and navigate either to the location you have WordPress installed in (it should have all kinds of wp-stuff.php files in it), you can also export to a temporary directory, and upload it to your website. Create a folder inside the wordpress directory called "galleries", and another one inside that one with a UNIX-ized version of your gallery name (My Favorite Photos -> my_favorite_photos). Select this directory and click "OK". Wait while WebExport does it's thing, and when it's done, open up that page on your webserver (local viewing won't let the PHP work).

Great, now you have a website, but nothing links to it. You can either manually add a link to your sidebar.php theme file, or you can make some PHP code that automatically does that, like in my sidebar.

The final product:

Picture-7.jpg

13 Responses to “How to Make WordPress Photo Galleries With WebExport”

  1. Kevin Schneider Says:

    would you share the php code to add the Photo Galleries section to the side bar? I'm not a PHP guru.

  2. Daniel Staudigel Says:

    Here is a copy of my sidebar file:

    sidebar.phps

  3. Kevin Schneider Says:

    Thanks!

  4. Mark Says:

    thx a lot!

  5. Daniel Markham Says:

    Cool! Do you have any suggestions on implementing lightbox functionality into the PHP code for your sidebar?

  6. Daniel Staudigel Says:

    What is lightbox functionality? Is that where it cycles through a series of images, or picks a random one from a library to stick in the sidebar every time the PHP renders? That would be reasonably easy, just make a separate thumbnail folder for sidebar-sized thumbnails, and have the PHP sidebar tool pick a random one in that folder. Or you could have WebExport create an XML file with links to the files, with metadata that the PHP could also display.

    All in all… a great idea! I should work up some mockups. I also should start working on some cooler JavaScript like the ones I've been seeing around. Well, I have this weekend pretty free, I may just get around to that.

  7. Daniel Markham Says:

    Lightbox is a cool javascript (I believe) that opens an image in the same window as the thumbnail but places an translucent layer between the page and the image.

    Here is the website for it:
    http://www.huddletogether.com/projects/lightbox2/

    Here is the Wordpress plug-in:
    http://www.4mj.it/lightbox-js-v20-wordpress/

  8. Daniel Staudigel Says:

    Ooooh. I see what you're getting at! I'd install the Wordpress plugin, and then modify the code slightly to use the rel="lightbox" bit. That should do it, this weekend I'll probably get around to making a lightbox demo.

  9. jameswillisisthebest Says:

    This is my first post
    just saying HI

  10. Duffy Says:

    This plugin rocks! THank you so much!

  11. lospericos Says:

    So perfect it was what i was looking for.
    Thank you so much.

  12. Rocky Keaton Says:

    Thank you for sharing this one!

  13. Casey Says:

    Seriously, I have no idea how to do this. I'm not a beginner, but the installation instructions do not seem clear with the separate templates and where exactly to upload to. Please help. This is how my site looks after I have finished what I thought I was suppose to do:

    http://www.lannalife.org/new/galleries/dts/

    HELP!

Leave a Reply