Drupal Recipes: Building Image Galleries with jQuery and Flickr

60 %
40 %
Information about Drupal Recipes: Building Image Galleries with jQuery and Flickr

Published on October 18, 2008

Author: benshell

Source: slideshare.net


Covering Flickr, jQuery, and Drupal best practices

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

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)

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

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

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

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

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

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 node type

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 • Import Flickr tags to taxonomy terms Problem: I couldn’t find a module to do this

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 key • Can be used by other Flickr modules

Flickr API Module

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

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 nice for the impatient among us)

Thumbnails with a lightbox

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

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

Using the Views UI Create a block Filter for image nodes

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; }

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

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_view('imageslider'); • Render the View from your module: $output = views_build_view('block', $view, array(), false); • Theme the View (just like before)

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>

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; }

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)

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 Killswitch if (Drupal.jsEnabled) { $(document).ready(Drupal.imageslider.autoAttach); }

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;

Adding JavaScript Follow good naming conventions

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

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'); } overwritten! function test() { alert('bar'); } test();

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

Adding JavaScript Learn to understand scope

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

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); }

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); }

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/project/imageslider

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

BADCamp 2008 presentation slides, recordings and ... - Drupal

BADCamp 2008 presentation slides, recordings and ... Creating Smarter Interfaces with jQuery: ... Drupal Recipes: Building Image Galleries with Flickr ...
Read more

Adding Images to your text | Drupal.org

A number of modules and methods exist for adding images to your Drupal ... you will need to use CSS or jQuery to ... Creating image galleries; Flickr; ...
Read more

Album Photos | Drupal.org

Album Photos module page The Album Photos module ... Creating image galleries; Flickr; ... and "Reviving" in Drupal 7; Views tips and recipes for image ...
Read more

Drupal 7 Business Solutions | PACKT Books

Drupal 7 Business Solutions will give you ... Image Galleries and ... Create complex websites quickly and easily using the building blocks of Drupal ...
Read more

Drupal.org wishlist | Drupal Groups

drupal image module 966 0 %. ... drupal flickr 231 0 %. ... Higher profile and richer recipes for assembling "building block" modules like Views, ...
Read more

WordPress 2.8 Themes Cookbook | PACKT Books

Over 100 simple but incredibly effective recipes ... Styling image galleries. ... Adding an interactive Facebook-style wall to a sidebar by using jQuery. ...
Read more

Simple Auto-Playing Slideshow | CSS-Tricks

Code Snippets » jQuery » Simple Auto-Playing Slideshow. ... src="//farm6.static.flickr.com/5230 ... the image with a simple auto-playing slideshow of ...
Read more

Galleries | LinkedIn

View 265404 Galleries posts, presentations, experts, and more. Get the professional knowledge you need on LinkedIn. LinkedIn Home What is LinkedIn?
Read more