Covering Flickr, jQuery, and Drupal best practices

1. Drupal Recipes:
Building Image Galleries
Covering Flickr, jQuery, and
Drupal best practices
Presented by Benjamin Shell from WorkHabit

2. Start with a plan, and make
Drupal work for you.
(don’t limit your imagination to what Drupal
and existing modules do out of the box)

3. Planning
Remember that most*
people don’t think like a
relational database
*Disclaimer: I recently used database concepts
in an unrelated discussion with my wife...

4. My Plan
User Experience:
• Show random image thumbnails on the
sidebar
• Show a sliding image viewer on the right
Technical Requirements:
• Download images from Flickr
• Store images as nodes
• Use Views to build queries

5. 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.)

6. Implementation
There are essentially two types of Drupal
modules:
1. Reusable “ingredients”
2. Complete solutions
(there’s some overlap of course)

7. My Approach
Use complete solutions if appropriate, BUT:
• DON’T spend too long finding them
• DON’T spend too long forcing them to
work for you
• DON’T load 2000 lines of code if you’re only
using 50

8. My Approach
Use common “ingredients” to build what you need.

9. Building the site
start here
Input Storage Retrieval Output

10. Storage
Preferred: CCK + Imagefield
Not-recommended:
• Attach multiple image files directly to a node
• Use a non-CCK node type

11. Storage
New content type: Image

12. Data Input
• Millions of people
already use it
• Easy to upload
photos

13. Why import to Drupal?
• Theming flexibility
• Integration
• Security

14. Flickr Import
Plan:
• Automatically download new photos from
Flickr
• Create Drupal nodes with attached images
• Import Flickr tags to taxonomy terms
Problem: I couldn’t find a module to do this

15. The closest I could find...
• Activity Stream
• FlickrRippr
• Emfield/Emfield Import
• Flickr module

16. LE
U
D
O
M
EW
Flickr API Module
N
• Loads phpFlickr
• Stores the Flickr API key
• Can be used by other Flickr modules

17. Flickr API Module

18. LE
U
D
O
M
EW
Flickr Sync Module
N
Downloads new Flickr photos
to new Drupal nodes

19. Flickr Sync Module
Settings page:
• Configure the
content fields to use
• Specify batch
importing settings

20. Flickr Sync Module
Every user has
Flickr sync settings
in their account
settings

21. Flickr Sync Module
Performing an import manually
(cron will keep things up-to-date, but the manual
process is nice for the impatient among us)

22. Thumbnails with a lightbox

23. Lightboxes
• Popular replacement for popup windows
• Comparison of “lightbox” type modules:
http://www.drupal.org/node/266126
• I used jLightbox for it’s simplicity, but
Lightbox 2 is another great module

24. Lightboxes
Lightboxes typically work using the “rel”
attribute of a link:
<a href=quot;images/image-1.jpgquot;
rel=quot;lightboxquot;>image #1</a>

25. Using the Views UI
Create a block
Filter for image nodes

26. Lightboxes
Theming the view
function phptemplate_views_view_imagelist($view, $type, $nodes) {
foreach ($nodes as $n) {
$node = node_load($n->nid);
$original_file = $node->field_image[0]['filepath'];
$lightbox_file = imagecache_create_url('lightbox', $file);
$img_tag = theme('imagecache', 'sidebar', $original_file);
$link = l($img_tag, $lightbox_file, array(
'rel' => quot;lightbox[sidebar]quot;), NULL, NULL, FALSE, TRUE);
$output .= '<div>' . $link . quot;</div>nquot;;
}
return $output;
}

27. No more hunting for a module to
do exactly what you want -- with
just a little view theming code the
possibilities are endless!

28. Building an image slider

29. LE
U
D
O
M
EW
N
Image Slider Module
Concept based on jQuery slideViewer 1.1

30. Building a new module can
be easier than building a
complex theme

31. Building the image slider
• Setup a new View (just like before)
• Call the View from your module:
$view = views_get_view('imageslider');
• Render the View from your module:
$output = views_build_view('block', $view, array(), false);
• Theme the View (just like before)

32. Theming output
<div class=quot;imagesliderquot; style=quot;width: 500px; height: 300pxquot;>
<ul style=quot;width: 1500pxquot;>
<li><img src=quot;...quot; alt=quot;quot; title=quot;quot; /></li>
<li><img src=quot;...quot; alt=quot;quot; title=quot;quot; /></li>
<li><img src=quot;...quot; alt=quot;quot; title=quot;quot; /></li>
</ul>
</div>

33. Image slider CSS
div.imageslider {
overflow: hidden;
position: relative;
}
div.imageslider ul { Change left
list-style-type: none;
position: relative; value to move
left: 0; the slider
top: 0;
}
div.imageslider ul li {
float: left;
}

34. Image slider JavaScript
• Get the image slider container
• Find out how many images there are
• Get the width of the images
• For each button click, move the slider to
the proper position:
(current image number) x (width of images)

35. Add module settings
Easy to add,
easy to change

36. Tips for using CSS and
JavaScript with Drupal

37. CSS and JavaScript
Load only where needed

38. Adding JavaScript
JavaScript should be unobtrusive

39. “Auto Attach”
Runs your JavaScript if JavaScript is
available and when everything is ready.
// Global Killswitch
if (Drupal.jsEnabled) {
$(document).ready(Drupal.imageslider.autoAttach);
}

40. Use Drupal.settings
Drupal can output settings that can
be easily read in your JavaScript:
In PHP:
drupal_add_js(array(
'imageslider' => array(
'easeFunc' => variable_get('imageslider_ease_func', ''),
'easeTime' => variable_get('imageslider_ease_time', 750)
)
), 'setting');
In JavaScript:
var easeTime = Drupal.settings.imageslider.eastTime;

41. Adding JavaScript
Follow good naming conventions

42. Naming Conventions
Typically lower/upper , but just be consistent
with Drupal and jQuery, or whatever JS
libraries you work with.
var box = getBox();
var newBoxHeight = 20;
box.setHeight(newBoxHeight);

43. Adding JavaScript
Use proper namespacing

44. JavaScript Namespacing
What’s wrong with this?
for (i = 0; i < 5; i++) {
// do something
}

45. JavaScript Namespacing
Using undefined
variables clutters
the global
namespace!

46. JavaScript Namespacing
Define every variable!
for (var i = 0; i < 5; i++) {
// do something
}

47. JavaScript Namespacing
Namespace everything. Even JavaScript
functions will overwrite each other:
function test() {
alert('foo');
}
overwritten!
function test() {
alert('bar');
}
test();

48. JavaScript Namespacing
An example of proper namespacing:
var Drupal = Drupal || {};
Drupal.extend = function(obj) { ... }
Drupal.dimensions = function (el) { ... }

49. Adding JavaScript
Learn to understand scope

50. Understanding Scope
Simple Example of jQuery scope:
function autoAttach() {
var settings = {
foo: 'bar'
};
jQuery(quot;aquot;).mouseover(function() {
alert(settings.foo);
});
}

51. Understanding Scope
Using a separate function for handlers
function autoAttach() {
var settings = {
foo: 'bar'
};
jQuery(quot;aquot;).mouseover(function() {
onOver.call(settings);
});
}
function onOver() {
// 'this' is the settings object
alert(this.foo);
}

52. Understanding Scope
Passing additional variables with ‘call’
function autoAttach() {
var settings = {
foo: 'bar'
};
jQuery(quot;aquot;).mouseover(function(evt) {
onOver.call(settings, evt);
});
}
function onOver(evt) {
// 'this' is the settings object
alert(this.foo);
}

53. Tools
• Firefox with Firebug
• Aptana Studio
• Opera Developer Tools
• IE Developer Toolbar
• Windows (for testing)

54. New Drupal.org Releases
• http://drupal.org/project/flickrapi
• http://drupal.org/project/flickrsync
• http://drupal.org/project/imageslider