Wordpress Themes

A place for my programming projects and the occasional blog about technology related matters.

Integrating ZenPhoto into Wordpress

Author einar

ZenPhoto is a great image gallery written in php that I use on another page I have. It has a great admin interface and themes that are simple to use. I wanted to integrate it into a Wordpress blog so I looked around on the net and found a great article about it by a guy named Steffen Rusitschka. It explains how you can get your ZenPhoto gallery to look like your blog by including some Wordpress pages in your ZenPhoto theme. The article is at http://www.ruzee.com/blog/2006/06/integrating-zenphoto-into-wordpress/.

His method works great but there were a few things that bugged me about it. First, my ZenPhoto javascript didn’t work with it, so the inline editing of album descriptions didn’t work. Also I wanted to be able to edit my ZenPhoto theme files in the Wordpress theme editor. I tweak my theme all the time and I thought it would be much more convenient to be able to do it all in one place. So I figured out a way to make it work. Steffen gets full credit for coming up with the method, my contribution is simply making the javascript and theme editor work correctly, creating a link to the ZenPhoto admin interface from the Wordpress admin interface and packing it all up in a zip file with easy installation instructions. I won’t explain all the code here, it’s done quite nicely in Steffens article but for those interested in the implementation it’s basically this:

  1. Make the files in the ZenPhoto theme basically do nothing but include zp-index, zp-image and zp-album from the current Wordpress theme folder. This allows us to edit the theme using the Wordpress theme editor.
  2. Add hooks in Wordpress so the ZenPhoto stylesheet will be included in the <head> element of the page.
  3. Add hooks in Wordpress so the zenJavascript function from ZenPhoto is called on the pages, so the inline editing will work (see head.php for this).
  4. Create a small Wordpress plugin that creates a link to ZenPhoto from the Wordpress admin interface, and gives the zp files pretty names in the Wordpress theme editor (’ZenPhoto Index’ for zp-index.php, ‘ZenPhoto Image’ for zp-image.php etc.).

For those that just want to get it working, here are the installation instructions:

  1. Download the zip file and unzip.
  2. Copy the wordpress-integration-zp-theme folder into your zenphoto/themes folder.
  3. Go to your ZenPhoto admin web, choose Options and activate the theme called ‘Wordpress Integration Theme’.
  4. Copy the files (zp-index.php, zp-image.php, zp-album.php, zp-style.css) from the wordpress-theme-files folder into your current Wordpress theme folder, /wp-content/themes/yourthemename.
  5. Copy the zen-integration.php file into your Wordpress plugin folder, /wp-content/plugins .
  6. Goto your Wordpress admin interface, choose Plugins, and activate the ‘Zen Integration’ plugin. Note that the plugin assumes that your zenphoto folder is directly below your Wordpress folder and is called ‘zenphoto’, ‘photos’ or ‘gallery’. If it’s not, and you want to get the ZenPhoto link from the Wordpress admin interface working you’ll need to edit the zen-integration.php file, find this line: 
    $zp_admin_url = ''

    And change it to the full url of your ZenPhoto admin page, e.g.

    $zp_admin_url = 'http://example.com/foo/bar/zenphoto/zen/admin.php'
  7. There is no step 7, you’re done!

Now you should be able to go to your Wordpress theme editor and see the files ‘ZenPhoto Index’, ‘ZenPhoto Album’, ‘ZenPhoto Image’ and ‘ZenPhoto Stylesheet’ and you can edit them right there. The files included in the zipfile are meant to be used with the default Wordpress theme, Kubrick, and will probably not look very good on any other theme. It’s the simplest thing I could come up with, I mostly just changed the default ZenPhoto theme a bit. You should change it to fit your current Wordpress theme. In the files, the ZenPhoto part is always wrapped in a <div id=”zenphoto”>, and the ZenPhoto stylesheet prefixes everything with #zenphoto, this is so your ZenPhoto stylesheet won’t start affecting other parts of your blog.

So, that’s it I think :) . You can download the zip file with all the needed file here, let me know if you have any problems with it. You can view it in action at http://tech.einaregilsson.com/photos (Yes, I know it’s the same picture over and over, it’s just for demonstration purposes :) ).

UPDATE 01.09.2007: Fixed bug where error message didn’t appear when comment was invalid on an image page.
UPDATE 02.09.2007: …and now I fixed the fix, because it was displaying the error message even if there was no error!

Reader's Comments

  1. tech.einaregilsson.com » Blog Archive » Using Wordpress authentication in Zenphoto | August 8th, 2007 at 8:18 am

    […] a previous post I talked about how to integrate ZenPhoto into Wordpress. After I had done that for my own site I still wasn’t happy. I didn’t like the fact […]

  2. Amy | August 20th, 2007 at 1:28 pm

    hi I followed your steps and I get error

    /amy/zenphoto/themes/wordpress-integration-zp-theme/head.php on line 2

    what did I do wrong? thanks

  3. einar | August 20th, 2007 at 4:54 pm

    Hi Amy

    Did you get a specific error message, or just the line number?

    I am currently on vacation but I will take a look at it when I get back, around Aug 25th.

    -einar

  4. einar | August 24th, 2007 at 5:40 pm

    I’ve looked at line 2 and it’s:

    <?php require($_SERVER['DOCUMENT_ROOT'].'/wp-blog-header.php'); ?>

    The $_SERVER[’DOCUMENT_ROOT’] doesn’t work on some servers it seems. Can you try changing it to:

    <?php require('../wp-blog-header.php'); ?>

    And see if that works? If not you can also email me and give me some more info about your setup and I’ll try to help you out.

    -einar

  5. Hank | August 31st, 2007 at 3:55 pm

    Thanks for your additions on Steffen’s work! I am a happy user. However, unfortunately the error detection is not working when adding a malicious comment. It does work in this example http://www.ruzee.com/photos/060729%20-%20Party%20Stefan/DSCF0152.JPG.php Do you have any clue on how to fix this in your adpated script?

  6. einar | August 31st, 2007 at 4:13 pm

    Hmmm, I’m not sure, because I have no idea what constitutes a malicious comment. Could you give me an example of a comment that triggers the error detection on his page but not mine? (Or send it to me if Wordpress eats it here, the address is tech@einaregilsson.com)

  7. Hank | August 31st, 2007 at 5:15 pm

    Ok. What I mean is when you e.g. enter nothing at all, and enter the “Add Comment” button. I am expecting the errormessage saying: “There was an error submitting your comment. Name, a valid e-mail address, and a comment are required.”. I think it has to do with some sort of variable-conflict between Wordpress and Zenphoto.
    Also the remember-input-after-submitting functionality is not working: your name and email address being prefilled for future comments-submits. Probably same cause.

  8. einar | September 1st, 2007 at 10:58 pm

    Ok, I’ve found the bug. You need to put 

    global $error, $stored;

    in your zp-image.php file. Or you can just download the package again, I’ve fixed it there. Thanks for pointing out this bug :)

  9. Hank | September 2nd, 2007 at 7:53 am

    You’re welcome. Thanks for the fix!

  10. Hank | September 2nd, 2007 at 12:06 pm

    Hmm. The error message now comes up in all cases. Looks like $error is not cleared. Any clue on how to do this smartly?

  11. einar | September 2nd, 2007 at 2:15 pm

    Think I’ve fixed it for good now. It seems that because I was including the zp-* files inside my own function the scoping issues somehow prevented the global variables from working properly. That’s what I think anyway, I really don’t know much about php. I’ve changed the include now, but still the isset($error) call always returns true, even if $error is empty. So I changed that check to (isset($error) && $error) and now it seems to work. I’ve uploaded the new version so you can get it now. Hopefully this will work properly :)

  12. Hank | September 2nd, 2007 at 2:43 pm

    It works alright now. Thanks for your effort and time.

  13. barnabas | September 4th, 2007 at 5:22 pm

    Hi, GREAT work thanks so much.
    I have everything working and it looks great, but i wanted to tweak around with how the navigation of previous and forward collided with the page numbers, but as well as making the album thumbnails float left, but nothing i did altered anything! After a few hours i tried erasing the entire z-stylesheet file through wordpress, so it was just blank (of course i had a copy of it) and miraculously, nothing happened either.
    Any idea what’s going on?

  14. einar | September 4th, 2007 at 8:45 pm

    Hi

    No, can’t say that I understand what’s going on. Maybe some caching issues? Try pressing Ctrl+F5 on the page you’re viewing and see if that has any effect. Alternately, try going directly to http://yoursite.com/wp-content/themes/default/zp-style.css and see what .css file is served there. That’s about all I can think of.

  15. jared | September 23rd, 2007 at 6:55 pm

    Great plugin. Weird issue. When I upload the plugin it works, but it totally messes up my plugins page in the WP admin. It is basically showing the whole contents of the plugin and the files that it calls in the WP admin plugins page. Any thoughts?

  16. einar | September 23rd, 2007 at 7:13 pm

    Hmmm, that’s very strange. I just looked at the plugin file again and it’s quite small and straight forward. Only one thing I could think of, did you by any chance modify the $zp_admin_url variable?

  17. jared | September 24th, 2007 at 12:09 am

    I did. Do you think that is it?

  18. einar | September 24th, 2007 at 12:55 am

    Yes, probably. Is it possible that you ended the path with a \ just before the final ‘ ? Or just show me the line and I’ll tell you if there’s something wrong with it.

  19. jared | September 25th, 2007 at 8:11 pm

    Thanks for working through this with me. Here is the line:

    $zp_admin_url = ‘http://www.mydomain.com/gallery/zen/admin.php’;

    Obviously I substituted “mydomain” for my real domain.

    Thanks,

    Jared

  20. Jae | September 26th, 2007 at 8:53 pm

    I’m getting the following error:
    MySQL Query ( SELECT folder, sort_order FROM `zen_albums` ORDER BY sort_order ) Failed. Error: Table ‘word_wordpress.zen_albums’ doesn’t exist.

    If I understand this correctly somehow it its looking for zen_albums in the Wordpress Database? (Though my Zen tables are all in their own Zen Database).

    Any ideas how I fix this?
    Cheers

  21. einar | September 26th, 2007 at 9:14 pm

    If you have your zenphoto install in a different database you’ll have some trouble. But if you look at the original article by Ruzee (there’s a link at the beginning of this post) I think he covers how to switch between databases.

  22. Jae | September 28th, 2007 at 3:42 pm

    You were correct. I reinstalled Zenphoto using the same db as wordpress, and followed your instructions again. Voila! It worked.

  23. Jeffu-san | October 1st, 2007 at 1:31 pm

    Hey Einar, great stuff. I hope you plan on implementing this with a zenphoto theme that is subalbum enabled! At the moment I can’t use your approach because I really want subalbums.

    There are several subalbum enabled themes available at:
    http://www.chilifrei.net/downloads/zpthemes/Subalbum_Themes/

    Also, I might suggest that, if possible, the zen theme files be placed in the same directory as as the plugin if possible, so that the integration works across all wp themes.

  24. einar | October 1st, 2007 at 2:50 pm

    Hi Jeffu-san

    I probably won’t change the current implementation, at least for now, since I don’t really have time for it. The actual theme that comes with my implementation is crap anyway, the main point of this integration was just to show people how to make themes integrate with Wordpress, and they could then modify their own ZP themes the same way. You can try just copying the main parts from the themes you’re interested in and pasting them into the zp-*.php files in your wordpress theme dir and see if they come out correctly.

    As for keeping the zen theme files in the plugin directory, it’s certainly possible, all you would have to do is change the include function in the image.php, index.php and album.php files from the wordpress-integration-theme folder. But the whole point is kind of that you want your zenphoto album to match your wordpress theme, so if you change your wordpress theme but are still using the same zen-photo files they probably won’t match your new theme very well.

  25. Jeffu-san | October 2nd, 2007 at 4:55 am

    Well, Einar…I just took your advice and tried transplanting the code from a sub-album enabled theme into your zp-index,zp-album and zp-image files…all worked perfectly!

    So, to recap for anyone who is interested:
    1. Install Einar’s wp-zen-integration theme into zenphoto and activate.
    2. Find a sub-album enabled theme, open index.php, copy the code from the first ‘div’ to the last ‘/div’ and paste it into the zp-index.php file, replacing everything from the first ‘div’ to the last ‘/div’.
    3. Do the same for album.php and image.php.
    4. Place the modifed zp-index,zp-album, zp-image and zp-style.css files into your wordpress theme folder.
    5. Paste the zen.css style in it’s entirety into zp-style.css file.

    That worked for me! I also had to fiddle with the zp-style.css to make the font colors and such match my wordpress theme. I used a relatively neutral zen theme so not much was required.

  26. Blair | November 22nd, 2007 at 12:01 pm

    Hi einar

    Thanks to you I got my Zenphoto gallery working with Wordpress, just like that. I like it when I find something that works.. :)

    One small question if you find the time, I’ve tried but its beyond me..

    Q: Is there an easy way to get the gallery titles to show up as a list in Wordpress with the version you have showed?
    I’ve looked at the Zenphoto forums but I think it would mean undoing what I’ve done so far?

    I’ll keep looking in the meantime and if I find a solution will post it.
    my gallery is at wiredkiwis.com/photos

    btw: I like finding people like you, its the whole point of it eh :)

    Thanks again & keep up the good work

  27. einar | November 22nd, 2007 at 4:57 pm

    Hi Blair

    Nice that it helped you :) I’m not sure I understand what you want. As for as I can see on your page, you have a list with the gallery titles. Or is gallery somehow different than album? It’s been a while since I played with ZenPhoto so I’m a bit rusty.

  28. Blair | November 23rd, 2007 at 7:48 am

    ahh sorry about that einar, I forgot to mention that the current menu is for zenpress but I’m wanting to change it…

    What I’m wanting to do is pull a list of the Zenphoto Album Titles and display them as a list menu in place of the current menu…. so that when your in the gallery you can just jump to another album..

    thanks for the quick response :)

    Blair

  29. wiredkiwis.com » Blog Archive » Zenphoto album titles into a wordpress sidebar | November 29th, 2007 at 9:37 pm

    […] found a way of intergrating Zenphoto into Wordpress from tech.einaregilsson.com which worked and which I am happy with so am just trying to get this sidebar thing […]

  30. Integrating ZenPhoto into Wordpress | Adventures of a Wannabe Geek | December 1st, 2007 at 9:53 pm

    […] Now how to make the two work together well? Einar Egilsson provides a surprisingly easy solution!read more | digg […]

  31. danny | December 17th, 2007 at 6:56 am

    I just can’t get this sucker to work =/ . . . I’ve got zenphoto installed in a different directory and I’m just not sure how to implement this in my wordpress site. My site is http://www.dannyrod.com/blog and my photos are at http://www.dannyrod.com/photo/zenphoto . . . anyway you could help me set it up so I can have my photos integrated into the body of my WP page when I click a “Photos” link in the top navigation?

  32. Jeff U | December 20th, 2007 at 6:06 pm

    This seems to be broken with the latest zenphoto, 1.1 is that the case with anyone else?

  33. Blair | December 21st, 2007 at 12:33 pm

    Looks like elnar might be busy….

    Jeff U:
    I’ve got it working fine….
    Wordpress 2.2.1 installed under wiredkiwis.com and ZenPhoto 1.1.2 under wiredkiwis.com/photos

    Just havn’t found the way to display zenphoto functions in my Wordpress sidebar yet…but I’ll get there sometime

    Danny: Did you do all the steps above from elnar?

  34. Jeff U | December 22nd, 2007 at 3:06 am

    Hmm… my zenphoto pages are just blank.. (like completely… nothing even if i view source) … and no errors show up in my apache logs :(

  35. Jeff U | December 22nd, 2007 at 8:19 pm

    I found that if i comment out line 3 of zp-config.php:

    #define(”DEBUG”, false);

    It works fine… i think the DEBUG values from zenphoto and wordpress were conflicting.

  36. Max | January 21st, 2008 at 10:14 pm

    Hi - just wanted to say good design and blog - cu!

  37. blair | February 21st, 2008 at 3:56 pm

    I just tried to get this working and came across an error that was mentioned earlier, but I cannot seem to resolve it…

    Warning: require(/home/bfarley/public_html/blairfarley/wp-blog-header.php) [function.require]: failed to open stream: No such file or directory in /home/bfarley/public_html/blairfarley/gallery/themes/wordpress-integration-zp-theme/head.php on line 2

    Fatal error: require() [function.require]: Failed opening required ‘/home/bfarley/public_html/blairfarley/wp-blog-header.php’ (include_path=’.:/usr/lib/php:/usr/local/lib/php’) in /home/bfarley/public_html/blairfarley/gallery/themes/wordpress-integration-zp-theme/head.php on line 2

    Any thoughts?
    //blair

  38. einar | February 22nd, 2008 at 10:26 pm

    Try to change this line in head.php:
    < ?php require($_SERVER['DOCUMENT_ROOT'].'/wp-blog-header.php'); ?>

    to

    < ?php require('../wp-blog-header.php'); ?>

    If that doesn’t work, try to just change it to use the absolute path to your wp-blog-header.php file, something like

    < ?php require('/home/yourname/somefolder/wordpress/wp-blog-header.php'); ?>

    (Obviously substitute with the correct path from your own folder

  39. darrell | February 25th, 2008 at 1:50 am

    Hi, thanks for the plugin. However, did I miss something? Is it supposed to show up somewhere on my wordpress blog? Do I need to create a page or something? I didn’t seem to get any errors, as far as I know. I just don’t know where the gallery is supposed to show up in wordpress. Thanks.

  40. einar | February 25th, 2008 at 10:50 am

    What folder is your zenphoto installation in? For example, my demo album is in a folder called ‘photos’ under my wordpress folder, then the path to my album is http://tech.einaregilsson.com/photos/

    The plugin itself doesn’t do much, it just allows you to edit your zenphoto files in the wordpress editor and gives you a link to the zenphoto admin interface.

  41. darrell | February 25th, 2008 at 11:55 am

    I think I may have found what the problem may be. I used a different db for each wordpress and zenphoto (I did follow your instructions and added the admin in zen-integration.php file). In zenphoto, I noticed it showed up in the Themes menu but when I tested it I get the same errors as others are getting here. Obviously, I’m not placing the correct absolute path so I’m waiting for the hosting people to send it to me since it’s different from what you mentioned. Here’s my error:

    Warning: main(../wp-blog-header.php) [function.main]: failed to open stream: No such file or directory in /mnt/w0004/d09/s17/b01414e4/www/gallery/themes/wordpress-integration-zp-theme/head.php on line 2

    Warning: main(../wp-blog-header.php) [function.main]: failed to open stream: No such file or directory in /mnt/w0004/d09/s17/b01414e4/www/gallery/themes/wordpress-integration-zp-theme/head.php on line 2

    Fatal error: main() [function.require]: Failed opening required ‘../wp-blog-header.php’ (include_path=’.:/usr/local/nf/lib/php’) in /mnt/w0004/d09/s17/b01414e4/www/gallery/themes/wordpress-integration-zp-theme/head.php on line 2

    Once I get the absolute path, I would hope it would work then.
    Also, my question is - how do I get the link to the zenphoto admin interface? Does it automatically place it on my wordpress site? Thanks.

  42. einar | February 25th, 2008 at 7:34 pm

    Yes, you should get a link called ZenPhoto in your WP admin panel. Although as explained in the article it will only work out of the box if your folder is in the correct place, otherwise you’ll need to make some modifications. See step 6 in the explanation.

  43. darrell | April 7th, 2008 at 11:05 am

    Hi Einar,

    I finally got the integration working well with the blog, however, there is only one more thing that I couldn’t get to straighten out - the “next” and “prev” link when it gets to the single image area. Take a look at this link:
    http://www.mlownie.com/gallery/index.php?album=retrospective&image=flying_2.jpg

    I’m not exactly sure how to separate them - take a look at the code

    /* Page Navigation
    —————————— */
    #zenphoto .pagelist { text-align:center; }
    #zenphoto ul.pagelist {
    clear: both;
    padding: 0;
    margin: 20px 0 0 0;
    list-style-type: none;
    }
    #zenphoto ul.pagelist li {
    display: inline;
    }
    #zenphoto ul.pagelist li a, #zenphoto ul.pagelist span.disabledlink {
    padding: 4px;
    }
    #zenphoto ul.pagelist li.current a {
    font-weight: bold;
    text-decoration: none;
    cursor: default;
    color: #5A5A4B;
    }
    #zenphoto ul.pagelist li.prev {
    margin-right: 10px;
    }
    #zenphoto ul.pagelist li.next {
    margin-left: 10px;
    }
    #zenphoto .disabledlink {
    color: #ddd;
    cursor: default;
    }
    #zenphoto .pagenav {
    clear: both;
    }

  44. sezer | May 2nd, 2008 at 6:50 pm

    CSS “Cascading Style Sheets” LessoNs - WeB DesigN LessoN - - Web site : http://WWW.css-lessons.ucoz.com/index.html

CommentComment

For spam detection purposes, please copy the number 8195 to the field below:



© 2007 tech.einaregilsson.com
Design by Luka Cvrk. Wordpressed by EGO