Ethan Codes

Install the Flickr module. That’s going to require a Flickr API key, so follow the instructions to set that up. You’ll need to enable the following modules: Flickr, Flickr Filter, Flickr Sets. Then enable the “Flickr linker” filter under Input Formats.

Keep in mind that only “public” photos work with this.

That’s going to let you put something like

[flickr-photoset:id=72157610617588420,size=s]

in the body of your document. When you save and view this document, you should see little thumbnails from your photoset. If you click on one, it’s going to take you to Flickr. We’ll be replacing that with Highslide.

Okay, so that’s nice but that [flickr-] stuff is a little hard to deal with. So what we’re going to do is install flickrset. This is a plug in I wrote for WYSIWYG and TinyMCE. You place it in

/sites/all/modules/wysiwyg/plugins

Then, in Drupal, go to /admin/settings/wysiwyg and edit any input formats that use TinyMCE. This is probably just “Full HTML.” Under the “Buttons and plugins” section you should see a new checkbox at the end labeled “Flickrset.” Turn that on and save it.

Now when you create a new document, you should see a new button in the body. The new button is the Flickr icon. When you click it, you get a pop up with three fields. You paste the URL of your Flickr photoset in there. You pick the size of the thumbnails you want. You pick the size of the “full size” pictures that you want. You click add. It’s going to build that [flickr-] crap for you.

You’ll see there’s a new thing in there, and that’s “class=showsizen.” This is the parameter for the “full size” picture. This isn’t going to work, out of the box. You’re going to need to hack the Flickr module. *gasp* So open

/sites/all/modules/flickr/flickr.module

and find the theme_flickr_photoset function. Change

$output .= theme('flickr_photo', $photo, $size);

to

$output .= theme('flickr_photo', $photo, $size, NULL, $attribs);

This is important because we’re passing the attributes to the theme function. The attributes contain, among other things, the class parameter we set earlier.

The module will let you pick a number of photos to appear in photosets. That’s nice if all your photosets are going to use the same number of photos, but if you want each gallery to display a different number of photos, you’ll need to add some functionality. Here’s how to do that.

In modules/flickr/filter/flickr_filter.module find flickr_filter_callback_photoset()

// change this line
return theme('flickr_filter_photoset', $photoset, $photoset['owner'], $config['size'], $attribs);
// to this
return theme('flickr_filter_photoset', $photoset, $photoset['owner'], $config, $attribs);

In modules/flickr/sets/flickr_set.module replace flickr_set_load() with

function flickr_set_load($sid, $num = 0, $page = 1) {
  // TODO: Not sure why this called for /flickr and does not show for admin role
 
  if ($num == 0) $num = variable_get('flickr_photos_per_page', 20);
 
  if (is_numeric($sid)) {	
    return flickr_request('flickr.photosets.getPhotos',
    array(
      'photoset_id' => $sid,
      'page' => $page,
      'per_page' => $num,
    )
    );
  }
}

In modules/flickr/flickr.module find theme_flickr_photoset()

// change the first two lines to this
function theme_flickr_photoset($ps, $owner, $config, $attribs = NULL) {
  $size = $config['size'];
// then change this line
$photos = flickr_set_load($ps['id']);
// to this
$photos = flickr_set_load($ps['id'], $config['num']);

Okay, so now if we look at our saved document, we see all the thumbnails there. Each image should have the “showsizen” class we specified. It may be “showsizeb” if you chose that size instead- n is normal, b is large. (These are abbreviations from the Flickr module, I didn’t make them up.) It’s still not going to expand to the correct size, we haven’t gotten that far. Just make sure your images have that class when they get displayed.

The last thing is this jQuery. This is going to hijack the resulting HTML so that Highslide can handle the full sized images.

$(document).ready(function() {
  $('.flickr-photoset a').each(function() {
      // we need a slightly different version of the static image url
      var thumb_url = $(this).children('img').attr('src');
 
      var showsize = "";
      if ($(this).children('img').hasClass('showsizeb')) {
        showsize = "_b";
      }
      if ($(this).children('img').hasClass('showsizen')) {
        showsize = "";
      }
 
      var dotpos = thumb_url.indexOf('.jpg');
      thumb_url = thumb_url.substr(0, dotpos - 2) + showsize + ".jpg";
 
      // now replace the a.href with this
      $(this).attr('href', thumb_url);
 
      // and fix it up for highslide
      $(this).addClass('highslide');
 
      this.onclick = function() {  return hs.expand(this); }
  });
});

Recently my brother got a SPOT emergency beacon. One of the features is a non-emergency “check in” feature. He hits a button and it logs his location. Turns out, that log has an RSS feed. So I built an application to take the feed and put the items in a database. Then I build a page with a Google Map. The map pulls coordinates from the database and puts little markers on the map. Each marker is clickable, and a little balloon pops up that says “At such and such a date and time, I was at some address.” The markers are connected chronologically by lines. The most recent marker is a different color, and the map centers on that location.

I want to say a little something about hardcoding values. Don’t.

Here is my example. You have an online application. It has 13 pages. You have a pointed that says what page the user is on. When that pointer gets to 14 it means the user is done and they get a summary page. That’s okay. But then you put something like this throughout the code

if ($ap['pointer'] == 14) { ... }

That may make sense to you in the short run, but eventually it’s going to bite you (or more likely, whatever poor sucker inherits your code) in the ass. What happens when we add/remove a page? I have to go change all of those 14s to something else. Where are all the 14s? How long is it going to take to fix all the values you’ve hardcoded?

I seem to train a lot of our clients in Wordpress, so I thought I’d write something up. Copy/Pasted here, for your entertainment.

In my experience, most people think Wordpress training is going to be terribly complicated. Usually, they don’t “get” computers and don’t expect to understand a content management system, either. Once they see how simple Wordpress is, they can usually take care of their content on their own.

I usually start by explaining that they don’t need to worry about copying down any URLs, usernames, or passwords because I’ll send those by email. This is one of those things that stress people out, so already they don’t have to worry about something.

I explain a little bit about the Dashboard. Usually by this time I have cut out most of what shows up on the Dashboard in order to make their lives easier. Nobody cares about the Wordpress Development Blog, so turn that off before-hand. The Dashboard is nice because there’s multiple ways to get at what you’re trying to get at.

Then I explain that there are two kinds of content: Posts and Pages. I explain what they are. The concepts are pretty simple.

Then I show them Posts. Once they see that it’s just a Title, Body, and a Category, you can watch them relax. This isn’t so hard. The editor is friendly and easy to use. Inserting an image is easy. Uploading a PDF is easy. Links? No sweat. They can do this. I usually ignore everything else on the Post form page because it doesn’t matter to them.

I usually go through the process of editing existing Posts, and then creating new Posts. I show off how creating a Post in the News category automatically shows up on the News page, and the Home page. That sort of thing. People are relieved by automation.

When people see that a Career Opportunity is just a Post in a different category, they see how simple it is.

Ask if there are any questions or if anyone would like to see something again. Take a drink of water.

Then I go through Pages. They like that pages are organized hierarchically. And Pages have fewer fields than Posts, so they can handle this, too.

People are often very concerned about screwing something up. I mention the Preview button. I tell them they can check the front end after they’ve made changes, and if anything is wrong, go back and edit it. And I mention the revisions. Nobody has ever needed the revisions.

Any questions?

That’s usually it. The thing I hear almost everyone say is “that’s really simple” and “I’ll have to get in there and play around.” Even after seeing how easy it is, people think it’s voodoo. But nobody really has any trouble with it once they’ve tried it themselves.

I spent an hour trying to get the jQuery UI accordion to work and it just wasn’t right. So I wrote my own. And then, the next day, I made it simpler.

Get the files here.