ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

Integrating a Picasa/Jquery Photo Gallery into EE

March 10, 2010 11:13am

Subscribe [2]
  • #1 / Mar 10, 2010 11:13am

    dotnetster

    22 posts

    Hi all,

    I am trying to integrate a Picasa photo gallery into my EE website.  The Nettuts article explaining how to do this using JQuery can be found here: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-an-image-gallery-powered-by-picasa/

    The reason that I am using Picasa rather than the EE Gallery is because the client already has a Picasa account and has uploaded several hundred photos. Plus, I don’t want to have to worry about running out of space on my hosting account.

    The solution works fine outside of EE.  However I am having trouble integrating it into an EE template.

    I created a new template group called “photos” and am using the default index template to display the Picasa photo gallery.

    I began by making sure that “Allow PHP” was set for the photos/index template in “Template Preferences Manager”.  I wasn’t entirely sure what to set for “PHP Parsing Stage”, so I went with “Output”.  I then submitted my changes, and got the “Preferences Updated” message.  So I thought, great.  When I went back in to check that it had been saved, I was expecting to see “Allow PHP” set to “Yes”, and “PHP Parsing Stage” set to “Output” for that tmplate.  But instead they were both set to the original “Do not change” value.

    To test if I could execute some php from my template, I added some very simple echo commands, and was able to see them appearing in my template.  OK so far.  I then decided to go ahead and began to add code from the nettuts article (above) into my photos/index template.  At the head of their index.php page was the following code:

    <?php
    include './_conf.php'; // getting constants
    
    $file = file_get_contents("http://picasaweb.google.com/data/feed/api/user/".$uName."?kind=album&access=public&thumbsize;=".$tSize);
    $xml = new SimpleXMLElement($file);
    $xml->registerXPathNamespace('gphoto', 'http://schemas.google.com/photos/2007');
    $xml->registerXPathNamespace('media', 'http://search.yahoo.com/mrss/');
    
    if($gTitle == null){ // if empty Gallery title will be "user id's  Photo Gallery"
        $nickname = $xml->xpath('//gphoto:nickname');
        $gTitle =$nickname[0]."'s Photo Gallery";
    }
    ?>

    This is pretty basic stuff.  It’s simply calling out to picasa and attempting to retrieve album/photo details for a given user.  The user is defined in the _conf.php.  This _conf.php file is located in the “photos” template group folder.

    To make life easier on myself and to make sure that this bit was working properly before moving on, I just added some very simple html to the template.  I figured that if my page rendered correctly, then I could move on and get the other bits working.  The rest of my photos/index template looked like this:

    <html>
    <head>
    <title>My Title</title>
    </head>
    <body>
    My sample text
    </body>
    </html>

    However, when I went to view the rendered template, the page was blank.  When I went view the page source, it was blank too. 

    I reckon I am having trouble with the include part at the top of my template.  Am I doing this correctly?  Should the _conf.php (gallery configuration file) be stored in the template group folder alongside my index template?

    Thanks in advance for your help,

    Ross

  • #2 / Mar 10, 2010 11:26am

    dotnetster

    22 posts

    Update
    ================
    I decided to copy the contents of the include file (_conf.php) into my photos/index template page, and hey presto, I could see my sample text.  My new code looked like this:

    <?php
    
    $gTitle="My Title"; // title of your gallary, if empty it will show: "your nickname' Photo Gallary"
    $uName= "myusername"; // your picasaweb user name
    $tSize="72c"; // thumbnail size can be 32, 48, 64, 72, 144, 160. cropt (c) and uncropt (u)
    $maxSize="720u"; // max image size can be 200, 288, 320, 400, 512, 576, 640, 720, 800. These images are available as only uncropped(u) sizes 
    
    $file = file_get_contents("http://picasaweb.google.com/data/feed/api/user/".$uName."?kind=album&access=public&thumbsize;=".$tSize);
    $xml = new SimpleXMLElement($file);
    $xml->registerXPathNamespace('gphoto', 'http://schemas.google.com/photos/2007');
    $xml->registerXPathNamespace('media', 'http://search.yahoo.com/mrss/');
    
    if($gTitle == null){ // if empty Gallery title will be "user id's  Photo Gallery"
        $nickname = $xml->xpath('//gphoto:nickname');
        $gTitle =$nickname[0]."'s Photo Gallery";
    }
    ?>

    Still not sure why the “include” bit did not work.  What is the correct way to use php includes in templates?

    Regards, and thanks

    Ross

  • #3 / Mar 10, 2010 3:59pm

    ChiefAlchemist

    913 posts

    Actually, I think you can just use an EE embed. If the PHP process is set to On Output then EE will insert the (PHP) code from the embed. And then process it as PHP once it get to that.

    Right?

  • #4 / Mar 11, 2010 8:47am

    dotnetster

    22 posts

    Cheers.  I’ll give that ago.  What’s the difference between the “Input” and “Output” PHP Parsing Stage?  I read the docs on here, but they didn’t really make a whole lot of sense.

    Thanks

  • #5 / Mar 11, 2010 1:48pm

    ChiefAlchemist

    913 posts

    Hey Dot!

    Don’t quote me on this but…

    On Input is kinda like as EE fields the request for the page. In other words, the PHP is done first such that it might actually “construct” EE code, variable values for EE, etc. once the PHP parsed then the EE code is parsed.

    On Output is kinda the opposite… EE does it’s thing (e.g. embeds a chunk of code) and then the PHP scripts are run.

    Sometimes you might want the PHP done upfront, other times you might wanna wait.

    That’s how I understand it loosely.

  • #6 / Mar 11, 2010 1:51pm

    ChiefAlchemist

    913 posts

    btw, I did see how you/the client didn’t want to have to reupload all their images. None the less the thought these might be of interest to you

    http://speckyboy.com/2009/12/03/20-professional-jquery-image-gallery-plugins/

    http://speckyboy.com/2009/06/03/15-amazing-jquery-image-galleryslideshow-plugins-and-tutorials/

    And just for good measure…

    http://speckyboy.com/2010/03/01/25-amazing-and-fresh-jquery-plugins/

    😊

.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases