Home Contact Sitemap Todo Money

Alan K Holden

Accomplished Internaut

Getting Mura CMS to Display Picasa Photo Albums

Getting Mura CMS to Display Picasa Photo Albums

Mura is the freely available content management system (CMS) available from Blue River - to run on CFML engines like Adobe ColdFusion and Railo*.

Picasa is Google's online service for storing and hosting user pictures.

* Open Blue Dragon (OpenBD) - another open-source CFML engine - currently lacks a working "read" attribute in the <cffeed> tag, which is required for the code below to work. One could wite a rss feed reader by hand, but that's beyond the scope of this article.

While Mura has a robust image gallery feature built-in, using it can be a hassle for users who use a hosting service like Picasa - and have already uploaded their album there. To ask them to re-upload the photos all over again seems to be a waste of time and space. So why not just fetch the photo data from Picasa's rss feed - and render the images within their Mura site automatically?

What follows is a developer's recap of the steps I followed to accomplish this.

NOTE: Don't bother starting until your Mura site client has a Google/Picasa account - and at least one album saved with some photos. Albums must be set "public" at the Picasa site by the album's owner. Otherwise the feed will not work. All the photos in one album will be used. If one wishes to use a sub-set of photos, they only need to create another Picasa album, containing the smaller selection.

New Page Field

First, you'll be adding another field to Mura's Page form, using the Class Extension Manager in Mura's admin pages. This is so the author can easily speficy which Picasa album to show in the finished page. Here's a synopsis of those steps:

  • Click "Site Settings | Edit Current Site | Class Extension Manager"
  • Click "Add Class Extension". Select a Base Type of "Page" and leave the Sub Type as "Default". Leave Active checked as "Yes".
  • (A Page/Default Extension may already exist if you have installed certain plug-ins or done customization before. If so you can just use that)
  • Click "Add Atribute Set". I called my set "Picasa" and placed my new field in the "Extended Attributes Tab".
  • You can finally click "Add new Atrribute" and add the details for your new page field!
    • Use a Name of "albumid" and a Label of "Album ID". Hint is optional, mine was: "Number found towards the end of a Picasa album URL" ("albumid" is the name used in the custom code listed below)
    • Make sure Input Type is "TextBox", Required is False and Validate is None. Leave everything else blank and press the "Add" button.

OK, we've provided a place where Mura admin's can specify a Picasa album ID. This is the last of some long numbers that show up in the url - when browsing a Picasa album. One long number identifies the Picasa user and does not change. The other one changes with each album, THAT'S the one that admin's should copy and paste into this field. In 99% of the issues where the gallery did not appear, incomplete or incorrect album id number has been the cause.

Go find your client's Picasa album!

Find the clients Picasa album online. Because it's marked "public", you should be able to search and find it - without being logged in to Google+. Your goal here is getting the [PICASAUSERID] number, a long number just after "...//plus.google.com/photos/" in your client's "albums" member page. Next you'll want to note the [ALBUMID], so view the client's album and copy the long number after ".../albums/" in the Picasa album URL.

Custom CFML snippet

Now to whip up a little CFM file to fetch and render the album feed. Create a file named "picasaGallery.cfm" in the following location on your Mura server: .../[SITEID]/includes/themes/[THEME]/templates/components/ (replace [SITEID] and [THEME] with the appropriate names in your environment. If the /components/ directory does not exist yet, feel free to create it). Insure your sever has permissions to execute it. For starters, place the following code in your new file:

<cftry>
    <cfparam name="picAlbum" default="#$.content("albumid")#" />
    <cfif len(picAlbum)>
        <cffeed action="read" source="https://picasaweb.google.com/data/feed/base/user/[PICASAUSERID]/albumid/#picAlbum#?alt=rss&kind=photo&hl=en_US" name="pixFeed" />
       
        <cfoutput>
            <cfloop from="1" to="#ArrayLen(pixFeed.item)#" index="recordNo">
                <a href="#pixFeed.item[recordNo].group.content.url#"><img alt="" src="#pixFeed.item[recordNo].group.thumbnail[2].url#" /></a>
                <br />
            </cfloop>
        </cfoutput>
    </cfif>
    <cfcatch><cfoutput>#cfcatch.Message#</cfoutput></cfcatch>
</cftry>
 

Now replace the part that says [PICASAUSERID] with the number you found in the step above. You should never need to change this number again, unless your client starts using an entirely new Google membership! Save your new picasaGallery.cfm file.

New Mura Component

Now (assuming you have permissions to see it) click the Components link in the left-hand nav column of Mura's admin site and create a new Component titled "Picasa Component". Don't enter any text in the Content area. Instead, click the Advanced tab and select your newly created "picasaGallery.cfm" file from the Layout Template dropdown (If it's not there, make sure you saved the file in the correct place).

Now you can place your new Component in a test page, using the Content Objects tab. Before you save your test page, be sure to click the Extended Attributes tab and enter that [ALBUMID] number you found in the step above. Now you can save your test page and view it on your client's Mura site.

The page should now include the nw component, and the cfm snippet should pull the Picasa feed and display all the album's thumbnail images. Click here to see an example.

Look! Just Pictures?

If you got this far, and everything seems to work, that's great! But I'm sure you'll agree that this is not much of a photo gallery. It's just a list of photos! From this point forward, you may have your own favorite framework for displaying pictures in a. Hard core coders may want to go back and modify the CFM snippet to dump the contents of the entire feed, to see what other content they can leverage within.

Adding a Real Gallery

To continue the demonstration, we're going to further customize the component to use one of the Spry Gallery Demos from Adobe Labs. First, download the Spry Framework for Ajax. Unzip the package and place the following files in .../[SITEID]/includes/themes/[THEME]/js/ (replace [SITEID] and [THEME] with the appropriate names in your environment.). We'll be using the "Static Photo Gallery" demo, so you can find these files in the /includes/ or /demos/gallery_pe/ folder of the archive:
gallery_static.css
SpryEffects.js
SpryDOMUtils.js
SpryImageLoader.js
SpryNotifier.js
SpryThumbViewer.js
SpryImageViewer.js
SprySlideShowControl.js
gallery_init.js
gallery_static.js

 

Comments

Post a Comment

Required Field

My Details
Subscription Settings

Hear about status updates or new posts.