Your SlideShare is downloading. ×
0
Drupal Recipes:
Building Image Galleries
     Covering Flickr, jQuery, and
       Drupal best practices


    Presented by...
Start with a plan, and make
   Drupal work for you.
(don’t limit your imagination to what Drupal
  and existing modules do...
Planning

Remember that most*
people don’t think like a
relational database



  *Disclaimer: I recently used database con...
My Plan
User Experience:
  • Show random image thumbnails on the
    sidebar
  • Show a sliding image viewer on the right
...
Looking for Modules
• drupal.org
• drupalmodules.com
• CVS checkout of all contributions
  (grep search for keywords)
• As...
Implementation

There are essentially two types of Drupal
modules:
1. Reusable “ingredients”
2. Complete solutions
(there’...
My Approach
Use complete solutions if appropriate, BUT:
• DON’T spend too long finding them
• DON’T spend too long forcing ...
My Approach
Use common “ingredients” to build what you need.
Building the site

              start here



Input    Storage           Retrieval   Output
Storage
Preferred: CCK + Imagefield
Not-recommended:
  • Attach multiple image files directly to a node
  • Use a non-CCK no...
Storage
New content type: Image
Data Input

      • Millions of people
        already use it
      • Easy to upload
        photos
Why import to Drupal?

         • Theming flexibility
         • Integration
         • Security
Flickr Import
Plan:
•  Automatically download new photos from
   Flickr
•  Create Drupal nodes with attached images
•  Imp...
The closest I could find...

• Activity Stream
• FlickrRippr
• Emfield/Emfield Import
• Flickr module
LE
      U
     D
     O
    M
EW




         Flickr API Module
N




     • Loads phpFlickr
     • Stores the Flickr API...
Flickr API Module
LE
      U
     D
     O
    M
EW




         Flickr Sync Module
N




     Downloads new Flickr photos
     to new Drupa...
Flickr Sync Module
Settings page:
 • Configure the
   content fields to use
 • Specify batch
   importing settings
Flickr Sync Module

Every user has
Flickr sync settings
in their account
settings
Flickr Sync Module
      Performing an import manually
(cron will keep things up-to-date, but the manual
   process is nic...
Thumbnails with a lightbox
Lightboxes

• Popular replacement for popup windows
• Comparison of “lightbox” type modules:
  http://www.drupal.org/node/...
Lightboxes

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

<a href=quot;images/image-1.jpgquot;
rel=quot;...
Using the Views UI

     Create a block

     Filter for image nodes
Lightboxes
                         Theming the view

function phptemplate_views_view_imagelist($view, $type, $nodes) {
  ...
No more hunting for a module to
 do exactly what you want -- with
just a little view theming code the
      possibilities ...
Building an image slider
LE
      U
     D
     O
    M
EW
N




        Image Slider Module
         Concept based on jQuery slideViewer 1.1
Building a new module can
 be easier than building a
      complex theme
Building the image slider

• Setup a new View (just like before)
• Call the View from your module:
  $view = views_get_vie...
Theming output
<div class=quot;imagesliderquot; style=quot;width:   500px; height: 300pxquot;>
  <ul style=quot;width: 150...
Image slider CSS
div.imageslider {
  overflow: hidden;
  position: relative;
}

div.imageslider ul {        Change left
  ...
Image slider JavaScript
• Get the image slider container
• Find out how many images there are
• Get the width of the image...
Add module settings

            Easy to add,
            easy to change
Tips for using CSS and
JavaScript with Drupal
CSS and JavaScript


  Load only where needed
Adding JavaScript


JavaScript should be unobtrusive
“Auto Attach”
      Runs your JavaScript if JavaScript is
      available and when everything is ready.


// Global Killsw...
Use Drupal.settings
          Drupal can output settings that can
           be easily read in your JavaScript:
In PHP:
dr...
Adding JavaScript


Follow good naming conventions
Naming Conventions
Typically lower/upper , but just be consistent
with Drupal and jQuery, or whatever JS
libraries you wor...
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() {
  ale...
JavaScript Namespacing

An example of proper namespacing:


  var Drupal = Drupal || {};

  Drupal.extend = function(obj) ...
Adding JavaScript


 Learn to understand scope
Understanding Scope
       Simple Example of jQuery scope:

function autoAttach() {
  var settings = {
     foo: 'bar'
  }...
Understanding Scope
    Using a separate function for handlers
function autoAttach() {
  var settings = {
     foo: 'bar'
...
Understanding Scope
     Passing additional variables with ‘call’
function autoAttach() {
  var settings = {
     foo: 'ba...
Tools
• Firefox with Firebug
• Aptana Studio
• Opera Developer Tools
• IE Developer Toolbar
• Windows (for testing)
New Drupal.org Releases

 • http://drupal.org/project/flickrapi
 • http://drupal.org/project/flickrsync
 • http://drupal.org...
Upcoming SlideShare
Loading in...5
×

Drupal Recipes: Building Image Galleries with jQuery and Flickr

22,736

Published on

Covering Flickr, jQuery, and Drupal best practices

Published in: Technology, Sports
2 Comments
18 Likes
Statistics
Notes
  • I found a great informative presentation for this 'Building Image Galleries'. I am very impressive from this slide presentations. Great Job very nice present information. I like very much this 'Building Image Galleries'. I have more interest in Dinosaurs gallery field. my dinosaurs gallery related blog is http://dinosaurs-video.blogspot.com/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice slides, thanks a lot!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
22,736
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
356
Comments
2
Likes
18
Embeds 0
No embeds

No notes for slide

Transcript of "Drupal Recipes: Building Image Galleries with jQuery and Flickr"

  1. 1. Drupal Recipes: Building Image Galleries Covering Flickr, jQuery, and Drupal best practices Presented by Benjamin Shell from WorkHabit
  2. 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. 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. 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. 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. 6. Implementation There are essentially two types of Drupal modules: 1. Reusable “ingredients” 2. Complete solutions (there’s some overlap of course)
  7. 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. 8. My Approach Use common “ingredients” to build what you need.
  9. 9. Building the site start here Input Storage Retrieval Output
  10. 10. Storage Preferred: CCK + Imagefield Not-recommended: • Attach multiple image files directly to a node • Use a non-CCK node type
  11. 11. Storage New content type: Image
  12. 12. Data Input • Millions of people already use it • Easy to upload photos
  13. 13. Why import to Drupal? • Theming flexibility • Integration • Security
  14. 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. 15. The closest I could find... • Activity Stream • FlickrRippr • Emfield/Emfield Import • Flickr module
  16. 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. 17. Flickr API Module
  18. 18. LE U D O M EW Flickr Sync Module N Downloads new Flickr photos to new Drupal nodes
  19. 19. Flickr Sync Module Settings page: • Configure the content fields to use • Specify batch importing settings
  20. 20. Flickr Sync Module Every user has Flickr sync settings in their account settings
  21. 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. 22. Thumbnails with a lightbox
  23. 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. 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. 25. Using the Views UI Create a block Filter for image nodes
  26. 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. 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. 28. Building an image slider
  29. 29. LE U D O M EW N Image Slider Module Concept based on jQuery slideViewer 1.1
  30. 30. Building a new module can be easier than building a complex theme
  31. 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. 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. 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. 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. 35. Add module settings Easy to add, easy to change
  36. 36. Tips for using CSS and JavaScript with Drupal
  37. 37. CSS and JavaScript Load only where needed
  38. 38. Adding JavaScript JavaScript should be unobtrusive
  39. 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. 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. 41. Adding JavaScript Follow good naming conventions
  42. 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. 43. Adding JavaScript Use proper namespacing
  44. 44. JavaScript Namespacing What’s wrong with this? for (i = 0; i < 5; i++) { // do something }
  45. 45. JavaScript Namespacing Using undefined variables clutters the global namespace!
  46. 46. JavaScript Namespacing Define every variable! for (var i = 0; i < 5; i++) { // do something }
  47. 47. JavaScript Namespacing Namespace everything. Even JavaScript functions will overwrite each other: function test() { alert('foo'); } overwritten! function test() { alert('bar'); } test();
  48. 48. JavaScript Namespacing An example of proper namespacing: var Drupal = Drupal || {}; Drupal.extend = function(obj) { ... } Drupal.dimensions = function (el) { ... }
  49. 49. Adding JavaScript Learn to understand scope
  50. 50. Understanding Scope Simple Example of jQuery scope: function autoAttach() { var settings = { foo: 'bar' }; jQuery(quot;aquot;).mouseover(function() { alert(settings.foo); }); }
  51. 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. 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. 53. Tools • Firefox with Firebug • Aptana Studio • Opera Developer Tools • IE Developer Toolbar • Windows (for testing)
  54. 54. New Drupal.org Releases • http://drupal.org/project/flickrapi • http://drupal.org/project/flickrsync • http://drupal.org/project/imageslider
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×