1 (edited by chalkjockey 2014-06-08 12:06:00)

Topic: Google Photos Stream

I have a vision...

I'l teaching a digital photography course and will use a Google+ page for the classes where students can upload images to albums for given assignments. In turn, I would like these images to feed into an HTML5 gallery I can embed in our school's Moodle site. I know Juicebox can be fed from Flikr, but is it possible from Google Photos?

In my research, http://www.plusgallery.net has a tool that does this, but having been a SV Pro user, and now JuiceBox, I'm not as pleased with the plusgallery CSS and UI.

In a perfect world (which assumes considerable coding ability I simply do not possess), I would use a modified Google Form with a file upload hack (http://www.labnol.org/internet/receive- … ive/19697/) for students to submit their work. This would then populate/update the gallery.xml file in my gallery folder (hosted in Google Drive) and all I have to do in Moodle is embed adjacent to a critique form.

I've looked at some previous posts and haven't had much luck in producing a working configuration:
http://juicebox.net/forum/search.php?se … =438907449
http://juicebox.net/forum/viewtopic.php?pid=2422#p2422

Should these cover what I'm looking for, or am I missing something critical?

Re: Google Photos Stream

Juicebox-Pro provides built-in support for displaying local images or images from a Flickr account only (and not other sources such as Google+).
It is certainly possible to pull in images from a custom source but you would need to use the method outlined in this FAQ:
Can Juicebox handle a custom data source, for example RSS or Instagram?

You can use the Picasa Web Albums API to fetch images from a Google+ Album.

Try the following (I have already tested it and found it to be working):

(1) In your gallery's embedding code, set the configUrl to be configUrl: 'config.php'. For example:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    new juicebox({
    configUrl: 'config.php',
    containerId : "juicebox-container",
    galleryWidth: "100%",
    galleryHeight: "100%",
    backgroundColor: "#222222"
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

(2) Create a new file named 'config.php' in your gallery folder containing the following code:

<?php

header('Content-type: application/xml');

$dom_doc = new DOMDocument('1.0', 'UTF-8');
$dom_doc->formatOutput = true;

$settings_tag = $dom_doc->createElement('juiceboxgallery');

$picasa_user_id = ''; // Enter your Google+ User ID here
$picasa_album_name = ''; // Enter your Google+ Album ID here

$attachments = array();
$picasa_feed = 'http://picasaweb.google.com/data/feed/api/user/' . $picasa_user_id . '/albumid/' . $picasa_album_name . '?kind=photo&imgmax=1600';
$entries = simplexml_load_file($picasa_feed);
if ($entries) {
    foreach ($entries->entry as $entry) {
        $attachments[] = $entry;
    }
}

if ($attachments) {
    foreach ($attachments as $attachment) {
        $media_group = $attachment->children('http://search.yahoo.com/mrss/')->group;
        $image_url = $media_group->content->attributes()->{'url'};
        $image_element = $dom_doc->createElement('image');
        $image_element->setAttribute('imageURL', $image_url);
        $image_element->setAttribute('thumbURL', $media_group->thumbnail[1]->attributes()->{'url'});
        $image_element->setAttribute('linkURL', $image_url);
        $image_element->setAttribute('linkTarget', '_blank');
        $title_element = $dom_doc->createElement('title');
        $title_text = $dom_doc->createCDATASection($attachment->title);
        $title_element->appendChild($title_text);
        $image_element->appendChild($title_element);
        $caption_element = $dom_doc->createElement('caption');
        $caption_text = $dom_doc->createCDATASection($attachment->summary);
        $caption_element->appendChild($caption_text);
        $image_element->appendChild($caption_element);
        $settings_tag->appendChild($image_element);
    }
}

$dom_doc->appendChild($settings_tag);

echo $dom_doc->saveXML();

?>

You will need to enter your Google+ User ID and Album ID in the 'config.php' file where indicated.
Make sure your Google+ Album is made public ('Sharing options -> Visible to -> Public -> Save').
When you view a Google+ Album, the URL will look something like:
https://plus.google.com/photos/012345678901234567890/albums/9876543210987654321
The User ID is the number which comes after '/photos/' and the Album ID is the number which comes after '/albums/'.

Alternatively, if you wanted to pull in images from a Google Drive folder (rather than a Google+ Album), then you would need to find a way to fetch a list of files from the Google Drive folder and build the gallery's XML file in a manner similar to the example above.

I hope this points you in the right direction.

Re: Google Photos Stream

I appreciate your very prompt and thorough response. I'll work on those suggestions and get back if I hit another wall. Cheers!

Re: Google Photos Stream

Wondering if anyone has this working. 

I am using the Drupal 8 Juicebox module.  I've uploaded a gallery created by JuiceboxPro and have that running, though it's showing just 50 pictures.  Drupal knows I have the Pro version because it let's me set the configuration options for that. 

I put my galleries in a folder right under Drupal 8, so:
public_html/drupal8/jboxgalleries/jboxaust

where jboxaust is the first gallery I created with jboxbuilder.  Thought was I could create other galleries at that same level.

However, getting back to the point, when I follow the instructions in the original post in this thread I get no results.  I am creating a Drupal article with the embed code as per:

<!--START JUICEBOX EMBED--><script src=""/drupal8/sites/all/libraries/juicebox/juicebox.js"></script><script>
    new juicebox({
    configUrl: '/drupal8/jboxgalleries/config.php',
    containerId : "juicebox-container",
    galleryWidth: "100%",
    galleryHeight: "100%",
    backgroundColor: "#222222"
});
</script>
<div id="juicebox-container">&nbsp;</div>
<!--END JUICEBOX EMBED-->

I also have created a config.php in the jboxgalleries directory with this in it:

?php

header('Content-type: application/xml');

$dom_doc = new DOMDocument('1.0', 'UTF-8');
$dom_doc->formatOutput = true;

$settings_tag = $dom_doc->createElement('juiceboxgallery');

$picasa_user_id = '113264882166353967951'; // Enter your Google+ User ID here
$picasa_album_name = '6218251177877809633'; // Enter your Google+ Album ID here

$attachments = array();
$picasa_feed = 'http://picasaweb.google.com/data/feed/api/user/' . $picasa_user_id . '/albumid/' . $picasa_album_name . '?kind=photo&imgmax=1600';
$entries = simplexml_load_file($picasa_feed);
if ($entries) {
    foreach ($entries->entry as $entry) {
        $attachments[] = $entry;
    }
}

if ($attachments) {
    foreach ($attachments as $attachment) {
        $media_group = $attachment->children('http://search.yahoo.com/mrss/')->group;
        $image_url = $media_group->content->attributes()->{'url'};
        $image_element = $dom_doc->createElement('image');
        $image_element->setAttribute('imageURL', $image_url);
        $image_element->setAttribute('thumbURL', $media_group->thumbnail[1]->attributes()->{'url'});
        $image_element->setAttribute('linkURL', $image_url);
        $image_element->setAttribute('linkTarget', '_blank');
        $title_element = $dom_doc->createElement('title');
        $title_text = $dom_doc->createCDATASection($attachment->title);
        $title_element->appendChild($title_text);
        $image_element->appendChild($title_element);
        $caption_element = $dom_doc->createElement('caption');
        $caption_text = $dom_doc->createCDATASection($attachment->summary);
        $caption_element->appendChild($caption_text);
        $image_element->appendChild($caption_element);
        $settings_tag->appendChild($image_element);
    }
}

$dom_doc->appendChild($settings_tag);

echo $dom_doc->saveXML();

?>

I know that the Google userid and albumid are correct because I can use them standalone in the address bar of a browser window and see the album.  For instance I can do:

http://picasaweb.google.com/data/feed/a … mgmax=1600

and get a list of photos in an album named 2015_Corning (which of course has that albumid).

I'm also a bit unsure about what the config.php program is doing.  Is it outputting an xml file to a browser window or saving one?

Re: Google Photos Stream

There are a couple of small errors in the code you posted above.

In your embedding code, change:

<script src=""/drupal8/sites/all/libraries/juicebox/juicebox.js">

... to:

<script src="/drupal8/sites/all/libraries/juicebox/juicebox.js">

In your 'config.php' file, change the opening:

?php

... to:

<?php

I'm also a bit unsure about what the config.php program is doing.

The 'config.php' file generates XML code (using the required syntax for a Juicebox gallery) and feeds it directly to the browser (without actually saving anything to your web server).

I have just tried using the 'config.php' file with the user information you posted above and it works fine, displaying a gallery with 32 images so once you make the small corrections I noted above, it should work fine for you, too.

6 (edited by fkelly12054 2015-12-25 14:31:02)

Re: Google Photos Stream

Sorry for the typo.  I had the opening < in my config.php, just didn't copy it into the code I posted.  I'll post again because I'm now getting a juicebox gallery with a juicebox error:  config xml file not found.  Here's config.php:

<?php

header('Content-type: application/xml');

$dom_doc = new DOMDocument('1.0', 'UTF-8');
$dom_doc->formatOutput = true;

$settings_tag = $dom_doc->createElement('juiceboxgallery');

$picasa_user_id = '113264882166353967951'; // Enter your Google+ User ID here
$picasa_album_name = '6218254396969323729'; // Enter your Google+ Album ID here

$attachments = array();
$picasa_feed = 'http://picasaweb.google.com/data/feed/api/user/' . $picasa_user_id . '/albumid/' . $picasa_album_name . '?kind=photo&imgmax=1600';
$entries = simplexml_load_file($picasa_feed);
if ($entries) {
    foreach ($entries->entry as $entry) {
        $attachments[] = $entry;
    }
}

if ($attachments) {
    foreach ($attachments as $attachment) {
        $media_group = $attachment->children('http://search.yahoo.com/mrss/')->group;
        $image_url = $media_group->content->attributes()->{'url'};
        $image_element = $dom_doc->createElement('image');
        $image_element->setAttribute('imageURL', $image_url);
        $image_element->setAttribute('thumbURL', $media_group->thumbnail[1]->attributes()->{'url'});
        $image_element->setAttribute('linkURL', $image_url);
        $image_element->setAttribute('linkTarget', '_blank');
        $title_element = $dom_doc->createElement('title');
        $title_text = $dom_doc->createCDATASection($attachment->title);
        $title_element->appendChild($title_text);
        $image_element->appendChild($title_element);
        $caption_element = $dom_doc->createElement('caption');
        $caption_text = $dom_doc->createCDATASection($attachment->summary);
        $caption_element->appendChild($caption_text);
        $image_element->appendChild($caption_element);
        $settings_tag->appendChild($image_element);
    }
}

$dom_doc->appendChild($settings_tag);

echo $dom_doc->saveXML();

?>

and the corrected article with embedding code:

<!--START JUICEBOX EMBED--><script src="/drupal8/sites/all/libraries/juicebox/juicebox.js"></script><script>
    new juicebox({
    configUrl: '/drupal8/jboxgalleries/config.php',
    containerId : "juicebox-container",
    galleryWidth: "100%",
    galleryHeight: "100%",
    backgroundColor: "#222222"
});
</script>
<div id="juicebox-container">&nbsp;</div>
<!--END JUICEBOX EMBED-->

Just noticed the single quotes around the configUrl and changed them to double.  Recleared cache, still getting missing xml file message.

Also tried in Internet Explorer,  Same error.  Double, triple checked userid and album id ... tried a different album ID.  Here's a url to see the message:

http://fkelly.org/drupal8/node/20

Thanks.

Re: Google Photos Stream

As I noted in my last post, I have used your 'config.php' file without modification (just correcting the typo) in a test gallery and it works fine so the code is OK (including your user id and album id) and it looks like the problem may lie somewhere on your web server.

If you try to open your 'config.php' file (http://fkelly.org/drupal8/jboxgalleries/config.php) directly in your browser, you should see the XML code generated by the script.
Instead, an error 403 (forbidden) is displayed.

It looks like the permissions of the file might be too restrictive.
Please check the permissions of the 'config.php' file on your web server and those of its parent folders ('drupal8' and 'jboxgalleries'). Default permissions of 644 for files and 755 for folders should be fine.

Also, please check to see if you have an entry such as the following in an .htaccess file on your server.

<Files *.php>
    deny from all
</Files>

If you find such an entry, either comment it out or remove it.

Hopefully this will help.

8 (edited by fkelly12054 2015-12-25 19:54:18)

Re: Google Photos Stream

RewriteCond %{REQUEST_URI} !/jboxgalleries/config.php$

in the drupal htaccess did the trick.  Thank you!


For what it's worth, I'm thinking that from a design, operations, and performance standpoint I may be better off putting the files on my own (hosted, inmotion,) server rather than drawing them from Google each time a Gallery is accessed.  I have >6000 photos on google divided in 88 albums (folders).  I have the same photos neatly arranged on my home PC and can use juiceboxbuilder to generate galleries quickly.  This way too all thumbnail generation is done once on the PC, which has plenty of resources and won't incur server overhead other than for presentation.  It's easy enough to set up menus listing the galleries with Drupal.  With ftp I can go from creating a gallery in builder to accessing it on the server in probably 10 minutes or less.  It's terrific.

I basically have set up a custom content type in Drupal just for juicebox galleries.  I can put the listing in a special menu just for galleries.  Eventually I can tag the individual galleries and use Drupal views to slice and dice however I want.

For what it's worth, Drupal has long been a dead end for galleries.  There are a couple of contributed modules I've used on Drupal 7 but (a) they are buggy and not supported and (b) there's little prospect they will be updated to run in Drupal 8. I think juicebox could be just a GREAT solution and I'll post this over in the Drupal forums when I get a few more examples done.

Re: Google Photos Stream

RewriteCond %{REQUEST_URI} !/jboxgalleries/config.php$

in the drupal htaccess did the trick.  Thank you!

You're welcome.
I'm glad I was able to point you in the right direction and that you're getting on well with Juicebox.

I think juicebox could be just a GREAT solution and I'll post this over in the Drupal forums when I get a few more examples done.

Thank you for spreading the word!