Drupal + Flickr + jQueryThe process of building a module to pull images from

Flickr and present them using jQuery.

Presented by Benjamin Shell from WorkHabit

Why Flickr?

• Millions of people already use it

• Easy to upload photos

Why import to Drupal?

• Theming flexibility

• Integration

• Security

Demo

The Process of Developing a Module

Development Process

• Have a plan

• Evaluate existing modules

• Reconsider plan

• Outline what’s still needed

• Develop new module(s)

The Plan

• Automatically download new photos from Flickr and create Drupal nodes with attached images

• Use Views to select nodes based on tags and other photo attributes

• Render output as a sliding image viewer

Looking for Modules

• drupal.org

• drupalmodules.com

• CVS checkout of all contributions (grep search for keywords)

• Asking around (drupal.org, IRC, co-workers, conferences, etc.)

Existing Modules

Maybe:

• Activity Stream

• FlickrRippr

• Emfield/Emfield Import

• Flickr module

Definite:

• CCK

• Views

• Imagefield

• Imagecache

The Problem

• None of the Flickr modules worked the way I wanted them to

• I couldn’t find a Drupal module for rendering a sliding image viewer

The Options

• Reconsider the plan?

• Patch existing modules?

• Build new modules?

Building new modules

• Use existing modules as a starting point

• Collaborate with others

• Credit others in your documentation

• Share with the community

Data in / Data out

Input OutputStorage Retrieval

developersstart here

Module Development• Data Storage (CCK + Imagefield)

• Input mechanism (new module)

• Input some data (run cron)

• Select the data to be output (Views)

• Render the data with HTML (new module)

• Style with CSS (new module)

• Enhance with JavaScript (new module)

Three new modules:

1) Flickr API

2) Flickr Sync

3) Image Slider

Development Plan

Using an API

• Register for an API key

• Use a helper class or module

• Cache results

phpFlickr

• An open source PHP class for easily using Flickr API methods

• Handles caching

Flickr API Module

NEW M

ODULE

Flickr API Module

• Loads phpFlickr

• Stores the Flickr API key

• Can be used by other Flickr modules

Flickr Sync Module

NEW M

ODULE

Flickr Sync Module

Downloads new Flickr photos to new Drupal nodes

Image Slider Module

NEW M

ODULE

Concept based on jQuery slideViewer 1.1

HTML Output

<div class="imageslider" style="width: 500px; height: 300px"> <ul style="width: 1500px"> <li><img src="..." alt="" title="" /></li> <li><img src="..." alt="" title="" /></li> <li><img src="..." alt="" title="" /></li> </ul></div>

CSS and JavaScript

Load only where needed.

Adding CSSdiv.imageslider { overflow: hidden; position: relative;}

div.imageslider ul { list-style-type: none; position: relative; left: 0; top: 0;}

div.imageslider ul li { float: left;}

Change left value to move

the slider

Adding JavaScript

JavaScript should be unobtrusive

Adding JavaScript

Follow good naming conventions

Naming Conventions

var box = getBox();

var newBoxHeight = 20;

box.setHeight(newBoxHeight);

Typically lower/upper , but just be consistent with Drupal and jQuery, or whatever JS libraries you work with.

Adding JavaScript

Use proper namespacing

JavaScript Namespacing

What’s wrong with this?

for (i = 0; i < 5; i++) {

// do something

}

JavaScript Namespacing

Using undefined variables clutters the global namespace!

JavaScript Namespacing

Define every variable!

for (var i = 0; i < 5; i++) {

// do something

}

JavaScript Namespacing

Namespace everything. Even JavaScript functions will overwrite each other:

function test() { alert('foo');}

function test() { alert('bar');}

test();

overwritten!

JavaScript Namespacing

var Drupal = Drupal || {};

Drupal.extend = function(obj) { ... }

Drupal.dimensions = function (el) { ... }

An example of proper namespacing:

Adding JavaScript

Learn to understand scope

Understanding Scope

function autoAttach() { var settings = { foo: 'bar' };

jQuery("a").mouseover(function() { alert(settings.foo); });}

Simple Example of jQuery scope:

Understanding Scope

function autoAttach() { var settings = { foo: 'bar' }; jQuery("a").mouseover(function() { onOver.call(settings); });}

function onOver() { // 'this' is the settings object alert(this.foo);}

Using a separate function for handlers

Understanding Scope

function autoAttach() { var settings = { foo: 'bar' }; jQuery("a").mouseover(function(evt) { onOver.call(settings, evt); });}

function onOver(evt) { // 'this' is the settings object alert(this.foo);}

Passing additional variables with ‘call’

Debugging JavaScript

http://getfirebug.com/

Drupal.org Releases

• http://drupal.org/project/flickrapi

• http://drupal.org/project/flickrsync

• http://drupal.org/project/imageslider

Questions?