This tutorial is sponsored by the Save Joseph campaign, a grassroots effort to find a good friend, stellar artist and all around amazing person a satisfying, creative job in the next 8 days. I know the Drupal community could use this kind of talent. Learn more about the effort at savejoseph.org. If you have any ideas on how I can get the word out about this, let me know!

My use case was that I wanted to be able to use social media icons for menu items so that we could re-arrage, add or remove items directly from the menu management interface:. The result is what you see below:

To use images for menu items in Drupal, the first step is to create an override theme function for theme_menu_item_link() in your theme's template.php file. The idea is to first run your image handling bit to switch out text for images, and then hand it over to the parent theme to do the rest. In my case, I'm using the Zen theme.

/**
 * Implements theme_menu_item_link()
 */
function yourtheme_menu_item_link($link) {
  // Allows for images as menu items. Just supply the path to the image as the title
  if (strpos($link['title'], '.png') !== false || strpos($link['title'], '.jpg') !== false || strpos($link['title'], '.gif') !== false) {
    $link['title'] = '<img alt="'. $link['description'] .'" title="'. $link['description'] .'" src="'. url($link['title']) .'" />';
    $link['localized_options']['html'] = TRUE;
  }
  return zen_menu_item_link($link); // Let Zen take over from here.
}

Be sure to change the yourtheme in the function to the name of your theme. Also note that this only checks for .png files. If you want to use a jpeg or a gif, you will need to modify the code slightly.

Next, clear the theme registry (CTFC).

Now, you can use image paths instead of text for the image, as seen below:

This tutorial is sponsored by the Save Joseph campaign, a grassroots effort to find a good friend, stellar artist and all around amazing person a satisfying, creative job in the next 9 days. I know the Drupal community could use this kind of talent. Learn more about the effort at savejoseph.org.

Views Slideshow is a nice module that leverages the jQuery Cycle plugin to create a highly-customizable, attractive slideshow. It comes with an option to display simple text controls to go forward or back through the slides. What I wanted was to customize this experience with images instead of the Previous and Next links.

The first step is create a view using Views Slideshow and enable the controls on the top of the slideshow. This is done via the Views style settings dialog:

Once this is set, you should see some links above the slideshow:

To turn these links into images, we first need to find a unique identifier for each one. Views Slideshow adds a unique ID, so we can use that. Here's what I see in Firebug when I inspect the element:

You can see there is a unique ID for each element. Now, all we need to do is set a number of styles for the link.

First, we need to set the background of the element to use our image:

background:url('images/left-button-on.png');

Next, we need to set the dimensions of the element to match our image, which is 71 pixels by 71 pixels. If we didn't have to worry about the text, we would just set the width and height. But, we need to hide the text, so we're going to set the height o 0, and the top padding to 71, which will bump the text out of view:

width:71px;
height:0px;
padding-top:71px;

If you refresh your page at this point, you'll still see some text:

This is because we need to explicitly set any the element to hide any content that's outside of it's bounds. We do so by defining the overflow property to hidden:

overflow:hidden;

Finally, I didn't want a pause button, so I set to not display:

display:none;

The final result looks like this:

By the way, the artwork you see is produced by Joseph Cowman, if you haven't seen his stuff, it's brilliant.

And the code, with some particular styles for what I needed, is this:

#views_slideshow_singleframe_prev_gallery-block_1, #views_slideshow_singleframe_next_gallery-block_1 {
  width:71px;
  height:0px;
  padding-top:71px;
  position:absolute;
  top:100px;
  overflow:hidden;
}
#views_slideshow_singleframe_prev_gallery-block_1 {
  background:url('images/left-button-on.png');
  left:0px;
}
#views_slideshow_singleframe_next_gallery-block_1 {
  background:url('images/right-button-on.png');
  right:0px;
}
#views_slideshow_singleframe_playpause_gallery-block_1 {
  display:none;
}

The story

In 10 days, an amazingly talented artist and friend, Joseph Cowman, will be forced to choose between a full time position building false teeth factory-style for the financial security it will bring has family OR possibly lose his current part-time position, straining his family but opening up the possibility of spending more time on creative work.

I think there's a third choice, but it will require a grassroots effort to make happen. I'm certain that there are positions available out there that will allow someone as skilled as Joseph to practice art and be creative but still earn a good livelihood. So, I'm tapping into my network and cashing in favors to see if I can find Joseph a job where he can really flex his skills.

If you want to learn a bit more about Joseph, keep reading. Or, you could jump straight to how you can help. This a grassroots effort, and there's something YOU can do!

Links

• Visit Joseph Cowman's web site
• Learn about how YOU can help
• A referral
• Add a countdown banner on your web site
• Follow the Save Joseph campaign on Twitter
• Interesting things Joseph has done outside of art (robotic arms, unibody sunglasses, costumes)

A few examples of Joseph Cowman's work

A referral

Joseph is probably the most capable person I know, and I think the only two reasons he hasn't landed a fulfilling position is that 1) he lives in a small town, which makes networking in the art world difficult and time-consuming and 2) between work, family, and practicing his art, doesn't have much time to get his work out there. For years I (and most people who know Joseph) have felt like there's this huge talent going to waste, like the world is just a little lamer because Joseph is building teeth instead of really pushing the boundaries of what he can do.

Anyone who has ever hired Joseph has loved working with him, and from knowing him on a personal level, I can understand why. In addition to being able to pick up anything, figure it out and then push it beyond what most people would, he's incredibly patient and empathetic, making him sensitive to other people and what they need. It's an interesting combination, one I don't run across very often.

The dream job

After talking with Joseph for a bit to figure out what kind of position he's looking for, he said anything that would be artistically challenging that has good variation. He said doing character work or design for games would be perfect, and he's also capable of working in a variety of styles. The bottom line is that he wants to leverage his work time to help hone his craft and improve his skills as an artist. Challenge and variety are key.

Joseph has been building false teeth for the last 7 years, and I anticipate him really exploding into whatever work that he takes on next. If it's artistic, he's going to do a fantastic job because he'll be so enthusiastic about it.

How YOU can help

Here's what you can do to help:

1. Follow the campaign on Twitter
2. If you know of any job opportunities along these lines, send them to me or directly to Joseph through his web site.
3. Pass this story on to anyone you know who might be able to help with this effort. Anyone in any art-related industry, artists, empathetic people, sneezers, anyone. This is grassroots, and every root counts.
4. Tweet about the campaign, and re-tweet!
5. Give us any ideas you have on how we can improve the campaign, techniques we can use, tactics we can exploit
6. Add the image countdown code to pull in the countdown box you see below to your web site, MySpace or Facebook page.
7. Add comments to this post about interesting things that you know Joseph has done, any praise, whatever. If you take a look at his art and like it, mention it.
8. Refer us to any artists you know who might have ideas on how to break into the biz
9. Add a small amount to the Save Joseph Bounty that will be be awarded to the individual that provides the lead that lands Joseph a job

The bounty

We're raising money for a bounty that will go to the individual that provides the lead that lands Joseph a job. You can help by contributing a small amount to the bounty using the widget below:

You can also add the widget to your site by using the code below:

<object width="250" height="250"><param name="movie" value="http://widget.chipin.com/widget/id/7bbef482d9a36166"></param><param name="allowScriptAccess" value="always"></param><param name="wmode" value="transparent"></param><param name="event_desc" value="Raising%20prize%20money%20for%20the%20individual%20that%20privides%20the%20lead%20that%20lands%20Jopseph%20a%20creative%20job.%20See%20http%3A//savejoseph.com%20for%20more%20details."></param><param name="color_scheme" value="red"></param><embed src="http://widget.chipin.com/widget/id/7bbef482d9a36166"; flashVars="event_desc=Raising%20prize%20money%20for%20the%20individual%20that%20privides%20the%20lead%20that%20lands%20Jopseph%20a%20creative%20job.%20See%20http%3A//savejoseph.com%20for%20more%20details.&color_scheme=red" type="application/x-shockwave-flash" allowScriptAccess="always" wmode="transparent" width="250" height="250"></embed></object>

The Save Joseph countdown box 

To add the countdown image below to your web site, use the following code:

<a href="http://savejoseph.org"><img id="save_joseph" title="" alt="" src="http://josephcowman.impliedbydesign.com/sites/josephcowman.impliedbydesign.com/files/imagecache/save_joseph_box/sites/josephcowman.impliedbydesign.com/themes/jc/images/save-joseph.png"></a>

<script type="text/javascript">document.getElementById("save_joseph").src = document.getElementById("save_joseph").src + "?unique=" + new Date().valueOf();</script>

Note that even though the image will work in sites like Facebook and MySpace, the little script that's added to it which refreshes the image regularly to reflect the countdown change won't work. In those cases, you can use the static image which doesn't use a countdown:

<a href="http://savejoseph.org"><img id="save_joseph" title="" alt="" src="http://josephcowman.impliedbydesign.com/sites/josephcowman.impliedbydesign.com/themes/jc/images/save-joseph-static.png"></a>

Some of the interesting things Joseph has done outside of fine art.

Joseph has focused a lot on his artwork the last several years, but his creative prowess extends in a lot of other directions. He's the kind of guy I am always telling other people about because the interesting things he's done. I'd like to get these a lot more coverage, and I'll add pictures as I get them, but here are just a few of the ones that have impressed me the most:

• When I met Joseph, he was 17. One of the first things he did was show me a fully functioning robotic arm he had built entirely out of scrap wood, hypodermic needles and IV tubing. No metal, no batteries, the whole thing ran off of the hydraulic pressure between two needs hooked up with the tubing. It was one of the coolest things I had ever seen.
• The next thing he showed me was a robotic hand, complete with 3 fingers and an opposable thumb, that connected to a glove you could put on your own hand to move the robot hand. It used bike cables as tendons. It was made out of a box of old random parts that his family had laying around. Also one of the coolest things I've seen.
• Then, he showed me a graphics program he had programmed on his computer in order to create graphics for a video game he wanted to make. It was more functional than any of the graphics-oritented programs I had on my computer.
• He built a series of didgeridoos out of driftwood with awesome artwork around it. He had to use a drill to hollow out the entire thing, using old tools. They're the prettiest didges I've ever seen.
• Back in the day when cool looking Oakley sunglasses were beyond his ability to purchase, he and a friend made their own pairs from thick aluminum sheet metal and cut their own lenses. At the time, they were really impressive.
• Every Halloween Joseph puts together a stellar costume. Stuff that could win prizes. Last year he built a realistic ogre head out of cardboard and vinyl. The year before, he built a costume that made him look like he was riding a dinosaur. It was really effective.
• Joseph and his wife completely renovated their entire home. When you walk through the house you can see the creative touch, and it looks beautiful.