drupal recipes: building image galleries with jquery and flickr

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

Upload: ben-shell

Post on 09-May-2015

22.665 views

Category:

Technology


0 download

DESCRIPTION

Covering Flickr, jQuery, and Drupal best practices

TRANSCRIPT

Page 1: Drupal Recipes: Building Image Galleries with jQuery and Flickr

Drupal Recipes: Building Image Galleries

Presented by Benjamin Shell from WorkHabit

Covering Flickr, jQuery, and Drupal best practices

Page 2: Drupal Recipes: Building Image Galleries with jQuery and Flickr

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)

Page 3: Drupal Recipes: Building Image Galleries with jQuery and Flickr

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

Page 4: Drupal Recipes: Building Image Galleries with jQuery and Flickr

My Plan

• Show random image thumbnails on the sidebar

• Show a sliding image viewer on the right

User Experience:

Technical Requirements:

• Download images from Flickr

• Store images as nodes

• Use Views to build queries

Page 5: Drupal Recipes: Building Image Galleries with jQuery and Flickr

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

Page 6: Drupal Recipes: Building Image Galleries with jQuery and Flickr

Implementation

There are essentially two types of Drupal modules:

1. Reusable “ingredients”

2. Complete solutions

(there’s some overlap of course)

Page 7: Drupal Recipes: Building Image Galleries with jQuery and Flickr

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

Page 8: Drupal Recipes: Building Image Galleries with jQuery and Flickr

My ApproachUse common “ingredients” to build what you need.

Page 9: Drupal Recipes: Building Image Galleries with jQuery and Flickr

Building the site

Input OutputStorage Retrieval

start here

Page 10: Drupal Recipes: Building Image Galleries with jQuery and Flickr

Storage

Preferred: CCK + Imagefield

Not-recommended:

• Attach multiple image files directly to a node

• Use a non-CCK node type

Page 11: Drupal Recipes: Building Image Galleries with jQuery and Flickr

StorageNew content type: Image

Page 12: Drupal Recipes: Building Image Galleries with jQuery and Flickr

Data Input

• Millions of people already use it

• Easy to upload photos

Page 13: Drupal Recipes: Building Image Galleries with jQuery and Flickr

Why import to Drupal?

• Theming flexibility

• Integration

• Security

Page 14: Drupal Recipes: Building Image Galleries with jQuery and Flickr

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

Page 15: Drupal Recipes: Building Image Galleries with jQuery and Flickr

The closest I could find...

• Activity Stream

• FlickrRippr

• Emfield/Emfield Import

• Flickr module

Page 16: Drupal Recipes: Building Image Galleries with jQuery and Flickr

Flickr API ModuleNEW M

ODULE

• Loads phpFlickr

• Stores the Flickr API key

• Can be used by other Flickr modules

Page 17: Drupal Recipes: Building Image Galleries with jQuery and Flickr

Flickr API Module

Page 18: Drupal Recipes: Building Image Galleries with jQuery and Flickr

Flickr Sync ModuleNEW M

ODULE

Downloads new Flickr photos to new Drupal nodes

Page 19: Drupal Recipes: Building Image Galleries with jQuery and Flickr

Flickr Sync ModuleSettings page:

• Configure the content fields to use

• Specify batch importing settings

Page 20: Drupal Recipes: Building Image Galleries with jQuery and Flickr

Flickr Sync Module

Every user has Flickr sync settings in their account settings

Page 21: Drupal Recipes: Building Image Galleries with jQuery and Flickr

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)

Page 22: Drupal Recipes: Building Image Galleries with jQuery and Flickr

Thumbnails with a lightbox

Page 23: Drupal Recipes: Building Image Galleries with jQuery and Flickr

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

Page 24: Drupal Recipes: Building Image Galleries with jQuery and Flickr

Lightboxes

Lightboxes typically work using the “rel” attribute of a link:

<a href="images/image-1.jpg" rel="lightbox">image #1</a>

Page 25: Drupal Recipes: Building Image Galleries with jQuery and Flickr

Using the Views UI

Filter for image nodes

Create a block

Page 26: Drupal Recipes: Building Image Galleries with jQuery and Flickr

Lightboxes

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' => "lightbox[sidebar]"), NULL, NULL, FALSE, TRUE); $output .= '<div>' . $link . "</div>\n"; } return $output;}

Theming the view

Page 27: Drupal Recipes: Building Image Galleries with jQuery and Flickr

No more hunting for a module to do exactly what you want -- with just a little view theming code the

possibilities are endless!

Page 28: Drupal Recipes: Building Image Galleries with jQuery and Flickr

Building an image slider

Page 29: Drupal Recipes: Building Image Galleries with jQuery and Flickr

Image Slider Module

NEW M

ODULE

Concept based on jQuery slideViewer 1.1

Page 30: Drupal Recipes: Building Image Galleries with jQuery and Flickr

Building a new module can be easier than building a

complex theme

Page 31: Drupal Recipes: Building Image Galleries with jQuery and Flickr

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)

Page 33: Drupal Recipes: Building Image Galleries with jQuery and Flickr

Image slider 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

Page 34: Drupal Recipes: Building Image Galleries with jQuery and Flickr

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)

Page 35: Drupal Recipes: Building Image Galleries with jQuery and Flickr

Add module settings

Easy to add, easy to change

Page 36: Drupal Recipes: Building Image Galleries with jQuery and Flickr

Tips for using CSS and JavaScript with Drupal

Page 37: Drupal Recipes: Building Image Galleries with jQuery and Flickr

CSS and JavaScript

Load only where needed

Page 38: Drupal Recipes: Building Image Galleries with jQuery and Flickr

Adding JavaScript

JavaScript should be unobtrusive

Page 39: Drupal Recipes: Building Image Galleries with jQuery and Flickr

“Auto Attach”

// Global Killswitch

if (Drupal.jsEnabled) {

$(document).ready(Drupal.imageslider.autoAttach);

}

Runs your JavaScript if JavaScript is available and when everything is ready.

Page 40: Drupal Recipes: Building Image Galleries with jQuery and Flickr

Use Drupal.settingsDrupal can output settings that can

be easily read in your JavaScript:

drupal_add_js(array( 'imageslider' => array( 'easeFunc' => variable_get('imageslider_ease_func', ''), 'easeTime' => variable_get('imageslider_ease_time', 750) ) ), 'setting');

In PHP:

In JavaScript:var easeTime = Drupal.settings.imageslider.eastTime;

Page 41: Drupal Recipes: Building Image Galleries with jQuery and Flickr

Adding JavaScript

Follow good naming conventions

Page 42: Drupal Recipes: Building Image Galleries with jQuery and Flickr

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.

Page 43: Drupal Recipes: Building Image Galleries with jQuery and Flickr

Adding JavaScript

Use proper namespacing

Page 44: Drupal Recipes: Building Image Galleries with jQuery and Flickr

JavaScript Namespacing

What’s wrong with this?

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

// do something

}

Page 45: Drupal Recipes: Building Image Galleries with jQuery and Flickr

JavaScript Namespacing

Using undefined variables clutters the global namespace!

Page 46: Drupal Recipes: Building Image Galleries with jQuery and Flickr

JavaScript Namespacing

Define every variable!

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

// do something

}

Page 47: Drupal Recipes: Building Image Galleries with jQuery and Flickr

JavaScript Namespacing

Namespace everything. Even JavaScript functions will overwrite each other:

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

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

test();

overwritten!

Page 48: Drupal Recipes: Building Image Galleries with jQuery and Flickr

JavaScript Namespacing

var Drupal = Drupal || {};

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

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

An example of proper namespacing:

Page 49: Drupal Recipes: Building Image Galleries with jQuery and Flickr

Adding JavaScript

Learn to understand scope

Page 50: Drupal Recipes: Building Image Galleries with jQuery and Flickr

Understanding Scope

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

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

Simple Example of jQuery scope:

Page 51: Drupal Recipes: Building Image Galleries with jQuery and Flickr

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

Page 52: Drupal Recipes: Building Image Galleries with jQuery and Flickr

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’

Page 53: Drupal Recipes: Building Image Galleries with jQuery and Flickr

Tools

• Firefox with Firebug

• Aptana Studio

• Opera Developer Tools

• IE Developer Toolbar

• Windows (for testing)

Page 54: Drupal Recipes: Building Image Galleries with jQuery and Flickr

New Drupal.org Releases

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

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

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