06 Aug 07 Integrating ZenPhoto into Wordpress
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:
- 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.
- Add hooks in Wordpress so the ZenPhoto stylesheet will be included in the <head> element of the page.
- 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).
- 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:
- Download the zip file and unzip.
- Copy the wordpress-integration-zp-theme folder into your zenphoto/themes folder.
- Go to your ZenPhoto admin web, choose Options and activate the theme called ‘Wordpress Integration Theme’.
- 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.
- Copy the zen-integration.php file into your Wordpress plugin folder, /wp-content/plugins .
- 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'
- 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
Leave a Comment
Hi,
I am succesfully integrate your method on my site, however when I clicked “page 2″, “page 3″,etc..the page go “redirecting to my wordpress “login page”.
Do you know whats the problem?
I cannot see page 2, page 3 ,etc
Heres my site :
http://www.newyorkglamz.com/babes/index.php?album=celebrities
Try to click page 2,3,4 or next and you will see the problem..
Any fix?
[...] tutorial is already from 2007 but still applicable: http://tech.einaregilsson.com/2007/08/06/integrating-zenphoto-into-wordpress/ 1 [...]
[...] A third way would be to use one of these methods: http://www.ruzee.com/blog/2006/06/integrating-zenphoto-into-wordpress/ (We basically use this on zenphoto.org) or http://tech.einaregilsson.com/2007/08/06/integrating-zenphoto-into-wordpress/ [...]
Thank you very much took time for something like that.
[...] Einar Egilsson took this a couple of steps further in his August 2007 post ‘Integrating ZenPhoto into Wordpress’. Einar had two issues, first his Zenphoto JavaScript was not being loaded and second he wanted to [...]
I had my own site integrated fine (and still do) I have another site using zen photo 1.2 and wordpress 2.8.5 and it looks like the function getAnnotatedAlbumTitle() causes an error.
Has any one else had this problem?
If I comment out that function (for the index it passes the thumbnail function the value to use) the site will render fine but without images.
Cheers.
[...] tutorial is already from 2007 but still applicable: http://tech.einaregilsson.com/2007/08/06/integrating-zenphoto-into-wordpress/ No [...]
[...] This provides special bare bones themes for Wordpress and Zenphoto and a plugin for integration: http://tech.einaregilsson.com/2007/08/06/integrating-zenphoto-into-wordpress/ [...]
Has anyone been able to integrate lightbox to this plugin? I have lightbox as a plugin for wordpress but it didn’t work, so I used prettyPhoto close on the zp-album.php page but still doesn’t work.
When I look at the source code, the link to script and rel=”" tags are there but it isn’t working. Any ideas?
BTW, I included the gallery name in the rel=”"
Nevermind I figured it out! If curious, check out: http://www.pixelerium.com/wordpress-zenphoto-lightbox/
[...] [...]
Hi,
great work here.
I did all, but at the 6. I have a small problem: the link in the wp admin interface to the Zp admin does not work. When we click it shows:
“Zenphoto Error: the requested object was not found.
Album: zen
Image: admin
Page:
Return to Gallery”
Any help, please?
Your test site seems to be suffering from the “page not found” problem, reference here:
http://www.zenphoto.org/support/topic.php?id=252
The solution seems to be to include the following line
in index.php.
Sorry, the line did not show up in the post above. It is (without the // marks):
//
I give up. Just look at the link I posted.
Einar, apologies for messing up your blog with a series of unhelpful comments. Delete them if you like. The solution I mention above to the “page not found” issue doesn’t seem to work anyway. The following is much more useful:
http://www.sparkhunt.co.uk/2009/11/404-errors-when-integrating-zenphoto-with-wordpress/
@Rob: Thanks for the info. I’m not really using ZenPhoto as part of Wordpress anymore but this post gets a fair amount of traffic so it’s good that people can get answers to some of their problems here in the comments
oh!!! good post!!!Chanel Vogue a great place you worth to visit!!!!
хорошо , важнецки
I wondered if this was updated for wordpress 3.x and ZenPhoto 1.3.x. I am getting an error:
Fatal error: Call to undefined function printsortablealbumlink() in /wp-content/themes/zenphoto/zp-album.php on line 20
Also the Admin link doesn’t print below the sortable albumlink if I comment it out. I think ZenPhoto may have updated things and these functions are working anymore.
@Geoff: Sorry, I haven’t used ZenPhoto in years now, so I have no idea what has happened in their API. Very likely that the function has just been renamed, perhaps you can find something about it in ZP’s release notes.