Ennovy.org

Update 04/17/05: Instructions are updated for Fotobuzz 0.2.

Thanks to BlogExplosion, I came across jluster.org which then led me to FotoBuzz. FotoBuzz is this flash/javascript/php viewlet that allows you to add annotations to your jpg images. I had to try it out on my screenshots gallery. It was really easy to install and didn’t take long to integrate it into ExpressionEngine.

I wrote up a little tutorial on how to get it working with an EE photo gallery.

Getting Fotobuzz to work

First, download the zip file listed on the fotobuzz site. Follow the instructions included in the readme file include in the zip, to make sure that it works on your server first. (Fotobuzz works in both php and python, and I used the php install instructions). If all is well, follow the setup instructions.

Note: Step 1 of the Setup Instructions
If you're installing this in the EE photo gallery, you should edit your image_full template. In that template, find the line
<img src="{image_url}"  class="border" width="{width}" height="{height}" border="0" title="{title}" />
(assuming you haven't changed the default template code) and replace it with:
<img src="{image_url}"  class="fotobuzz" width="{width}" height="{height}" border="0" title="{title}" />

That's it! Fotobuzz should work now. Since EE requires the photos in the gallery (and the folder containing the photos) to be writable, there shouldn't be any problems with adding or deleting comments to the image.

JPG Files Only

Fotobuzz only works with jpg images. However, your photo gallery might have gif images, or png images or some other image format. If so, you can use a little php to check whether the image is a jpg file before applying Fotobuzz to it. If you know that you're only going to upload jpg images, then skip this part.

In the template preferences, set the image_full template to allow php, and set the php parsing stage to output. Then, find the line
<img src="{image_url}"  class="fotobuzz" width="{width}" height="{height}" border="0" title="{title}" />

again and replace it with this:

<?php
$image = "{image_url}";
if ( stristr($image, ".jpg") != false ) {
?>
<img src="{image_url}"  class="fotobuzz" width="{width}" height="{height}" border="0" alt="{title}" />
<?php } else { ?>
<img src="{image_url}"  class="border" width="{width}" height="{height}" border="0" alt="{title}" />
<?php } ?>
This bit of code checks the file extension of the image. If it is a jpg image, then it'll apply Fotobuzz to the image. Otherwise, it will display the image as normal.

You can see the difference this makes when viewing this image (gif) as opposed to this one (jpg).

Restricted User Mode

You may not want all viewers to add or delete comments to your images. You may want to restrict this ability to a certain member group, such as admins only. To do this, make a duplicate copy of the fotobuzz.php file. Upload this duplicate file into another folder. For example, if you installed the original fotobuzz.php file at the location http://www.domain.com/fotobuzz/fotobuzz.php, upload the duplicate to http://www.domain.com/fotobuzz/restricted/fotobuzz.php. If you want, you can additionally password protect the folder using htaccess or some other method.

Next, open up the duplicate file and find the lines
include_once 'fbjfif.inc';
include_once 'atomparser.inc';
include_once 'fotobuzzxml.inc';
include_once 'utility.inc';

You'll need to edit the paths to the location of these files. If you have it set up the same way as in the previous paragraph, then you would edit the lines to:
include_once '../fbjfif.inc';
include_once '../atomparser.inc';
include_once '../fotobuzzxml.inc';
include_once '../utility.inc';

Now, open up the original fotobuzz.php file. Find the line
$READ_ONLY = False;
and replace it with
$READ_ONLY = True;

Go back to the image_full template, and look for the lines you added in Step 2 of the how to instructions. Find the line that looks like
fbScriptPath = "http://www.domain.com/fotobuzz/fotobuzz.php";
Replace the line with the following:
{if group_id!="1"}fbScriptPath = "http://www.domain.com/fotobuzz/fotobuzz.php";{/if}
{if group_id=="1"}fbScriptPath = "http://www.domain.com/fotobuzz/restricted/fotobuzz.php";{/if}
Substitute in the appropriate URLs and group id number as necessary.

The whole point of this is to have two sets of the fotobuzz.php file. One of the files (in the password protected folder) allows you to add, view, and delete comments. When the image gallery loads, only the admins can access this file. The other file allows you to only view the comments, and non-admins can only access this file.