Drupal Recipes: Building Image Galleries with jQuery and Flickr

  • 22,540 views
Uploaded on

Covering Flickr, jQuery, and Drupal best practices

Covering Flickr, jQuery, and Drupal best practices

More in: Technology , Sports
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 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/
    Are you sure you want to
    Your message goes here
  • Nice slides, thanks a lot!
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
22,540
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
355
Comments
2
Likes
18

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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