[HACK] Integrating FotoBuzz into CPG ( put Comments ON the pictures )

[nol33t]

Hi,
FotoBuzz ( http://2entwine.com/fotobuzz/ ) is a php/flash combination plugin which allow you to put comments ON the pictures!
It is licensed under a Creative Commons License (http://creativecommons.org/licenses/by-nc-nd/2.0/), so no use for commercial purpose

Here is an example of FotoBuzz integrated into CPG:

http://nol33t.free.fr/cpg/displayimage.php?pos=-513

The way it works:

- when there's a bigger picture to display, now it's with a link and not when you click on the picture
- users who are allowed to add comments in CPG can add comments on the pictures too ( by using the USER_CAN_POST_COMMENTS var )
- only the admins of CPG can modify or remove a comment on a picture ( by using the USER_IS_ADMIN var )
- no database modification: FotoBuzz writes comments into the jpeg header ( JFIF ). Drawback, pictures on your site are modified, don't say i did not tell you 

And now here is the way to integrate it:

1/ copy the FotoBuzz files (zip attached) below into your CPG folder:
------
   fbloader.swf
   fotobuzz.swf
   fbIR.js   
   fotobuzz.php
   atomparser.inc
   fbjfif.inc
   fotobuzzxml.inc
   utility.inc
------

2/  modify displayimage.php

line 190, replace

Code Select Expand


            $pic_html .= "<img src=\"" . $picture_url . "\" class=\"image\" border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" /><br />";
            $pic_html .= "</a>\n";
        } else {
            $pic_html = "<img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" /><br />\n";


with

Code Select Expand


            $pic_html .= $lang_display_image_php['view_fs']. "</a><br>\n";
            $pic_html .= "<img src=\"" . $picture_url . "\" class=\"fotobuzz\" border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" /><br />";
        } else {
            $pic_html = "<img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"fotobuzz\" border=\"0\" /><br />\n";


3/ modify script.js:

add this 4 lines at the end of the file

Code Select Expand


  fbViewletPath = "fbloader.swf";
  fbScriptPath = "fotobuzz.php";
  fbShowNotes = true;
  fbShowShadow = true


4/ modify the template.html of the theme you use:

after the line

Code Select Expand


<script type="text/javascript" src="scripts.js"></script>

   
add

Code Select Expand


<script type="text/javascript" src="fbIR.js"></script>
<style type="text/css" media="screen">
<!--
  /* This hides the images before they are replaced */
 
  .fbIR-hasFlash img.fotobuzz  {
    visibility: hidden;
  }
 
  .fbIR-flash {
    visibility: visible !important;
    margin: 0;
  }
-->
</style>


5/ modify fotobuzz.php

replace

Code Select Expand


ALLOW_NEW_ANNOTATIONS = True;

with

Code Select Expand


define('IN_COPPERMINE', true);
require('include/init.inc.php');
$ALLOW_NEW_ANNOTATIONS = USER_CAN_POST_COMMENTS?True:False;


and replace

Code Select Expand


$ALLOW_ONLY_ADD_ANNOTATIONS = False;

with

Code Select Expand


$ALLOW_ONLY_ADD_ANNOTATIONS = !(USER_IS_ADMIN)?True:False;


6/ Done! 

The only troubleshoot i got is when you add two comments in a row on the same pic, FotoBuzz uses locks by creating a folder with the name of the pic and the ".lock" extension, and sometimes the lock tend to don't want to disappear..i think it's because of my website host (www.free.fr), so if someone could try it on it's own server..
(if you got the same prob, just go in ftp in the album folder concerned and delete the lock manually )

Hope you'll like it
-matt-

--edit: corrected a cut & paste syntax error (";" missing  )

[Casper]

In the example you give, all I see is the comment, no picture.

Edit, it works in IE, but not firefox for me.  No pic.

[Tarique Sani]

same here no pic in Mozilla / Firefox

[nol33t]

  Funny cause i tested it with Firefox (Final Release) THEN adapated for IE, and pictures shows up here..(i just cleaned the history , cache etc..and still ok)

--edit: nicer screenshot

[Casper]

My firefox is also 1.0 (not the pr)

[nol33t]

all right can i pm you i'd like a screenshot of how it looks on your comp cause it works for me with firefox so there's no way it doesn't work for other 

[-chicobra-]

hello dudes,
works perfectly using firefox 0.9.3

think I'm gonna set it up for my site, look's wicked !!! 

[Casper]

No pm please.

here's my screenshot.  Firefox 1.0 release. 

note, the egg timer is caused by my screen capture program.  The browser had finished loading.

[nol33t]

Funny...we are using the same browser and we got differents results??

Casper, could you try to go on the "basic" demo page of fotobuzz, to see if the prob come from your browser ( like the flash plugin too old or somethin of that kind ), or from my integration into CPG?

http://2entwine.com/fotobuzz/demo/

thanx
matt

[Casper]

Not my browser, I see that site fine;

[nol33t]

...all right...but if it's not a difference between our two Firefox browsers...how is it that it's working fine for me and -chicobra-, but not for you and Tarique?
ok i keep investigating..

[nol33t]

 i've changed something in the template & css file, could you try again?
and if it's still not showing up i'm open to any suggestions..

[Casper]

Works fine now 

looks good btw.

[nol33t]

Coool!!

I've updated the first post with the corrects steps to install the hack ( no need of editing the style.css anymore )

matt

[Tranz]

I can see the photo as shown in nol33t's screenshot. It did look like Casper's screenshot for a few seconds so I thought it wasn't going to work. But it eventually did. So I guess it's some plug-in or something blocking it because it's flash? I'm using FF 1.0 final release.

It also worked in IE6

WinXP SP2.

Awesome mod.(https://coppermine-gallery.com/forum/proxy.php?request=http%3A%2F%2Ftu2.net%2Fforums%2Fimages%2Fsmiles%2Ficon_thumbs_up.gif&hash=c577483a9e561407c273604320459d4fbbe4c4da)

[nol33t]

So I guess it's some plug-in or something blocking it because it's flash? I'm using FF 1.0 final release.

It was more because i'm pretty bad with css 

Awesome mod.(https://coppermine-gallery.com/forum/proxy.php?request=http%3A%2F%2Fwww.tu2.net%2Fforums%2Fimages%2Fsmiles%2Ficon_thumbs_up.gif&hash=ee29d25d9d04d4afc974f19b461c0e87ec47f7c0)

thanx, like it a lot too

[n704fn]

Hi,

thanks for the mod.  I made all the changes, but I'm getting this error- "Error: Unable to load FotoBuzz data from fotobuzz.php".  One question I had was where exactly to add the lines to scripts.js -  is it at the very end of the file, or before the { ?  I've tried both ways with no difference.

Thanks for any help,

N704FN

[nol33t]

Hi,
I did a quick check on your website...didn't find all of the files needed.
did you put thoses ones too? :

atomparser.inc
fbjfif.inc
fotobuzzxml.inc
utility.inc

-matt-

[n704fn]

Hi Matt,

yeah, I restored the original files last night after I couldn't get it to work properly.  I have all the changes back in place now if you have a chance to check it out.

Thanks

Mark

EDIT:  Just talked to the wife at work and she is only seeing the regular images- none of the fotobuzz stuff appears.

[nol33t]

Mark
i sent you a pm about the ".inc" files that i don't see at your coppermine root directory,

and it looks like you didn't do step 3/ (4 lines to add in script.js ), or maybe you add them somewhere else?

-matt-