Teddy.fr

Improving the file attachments form in Drupal

As I already explained in a previous post, I am very fond of spending time improving things that don't usually get a lot attention from Drupal developers and themers. Even if many of the interfaces shipped by default in Drupal provide a very systematic and procedural environment for administrating the content, you sometimes need to add a bit of gloss to make things prettier and easier to use for your clients. When I start a project, I invariably add a bunch of theme overrides, CSS files and small scripts that help me reach that goal. This time I am going to expose the technique I use to beautify the upload form for file attachments. Here is what it looks like when I am done: Read more »

Let's shake our nerdy muscles!

So it's been nearly a month and a half and I didn't find time to write anything, nor did I show any major activity on Drupal.org. I still managed to commit a new module, but beyond this I've mainly dedicated my time to a couple things off-scene that I will hopefully share here very soon; this includes launching my own company, Wiredcraft, with a small (but growing!) team of Drupal experts here in Shanghai. Read more »

Theming the (almost) hidden...

Most of developers I have seen working on Drupal projects mainly focus their design effort on the front end, what most of end users will see; there is often very few energy put into making the parts that the administrators will be using sexier, may this be node entry forms or the numerous admin pages. Among all those "details" that fail to catch the designer's attention, I have a few ones that I usually try to deal with right away when I start a project, one of them being the whole set of "notifications" you can see displayed through Drupal; system messages, status report, update report and logs. Read more »

Coder Sprint, or how to have a healthy DrupalCon

One thing I realized in DC is that I am not the only geek around concerned about my health; I am vegetarian, exercise every day, run 3 to 4 times a week and overall try to find balance in my life. I love working in the Web industry, however for me and almost everybody else I know working in the same field it means having to spend a huge amount of time sitting in front of a computer (and, for most of my friends, drinking a lot of beer too).

The latest DrupalCon had its King of Parties in charge of making sure geeks would see some action along the week. Although I enjoy sharing a couple drinks from time to time with other Drupalers, I must say that I am no more the geek I used to be; I don't drink as often as before and when I do, I usually don't need much before hitting the bed. On the plus side, I get much more done in the morning while others are still sleeping they beer off.

So, for all the Drupalers out there that are willing to socialize outside of the bars and wish to stay in shape through the DrupalCon, I propose the "Coder Sprint" group; meeting in the morning for an early run, yoga session, or whatever you want to practice, followed by a healthy breakfast before we all hit the sessions. We'll sort out the logistic later on, but from what I have heard it should be easy to find areas around the venue to exercise.

Anybody else interested in having a healthy DrupalCon in Paris? If so, I'll post this information on the DrupalCon website as soon as it is up. Read more »

Drupal and project management

I just made it back from DC and I must say it feels good to be back home in Shanghai. I won't go through the usual review of sessions and congratulations; enough people already gave that kind of feedback for everybody to know it was a blast. This was my first event of that kind and I had the opportunity to chat with a lot of smart people of the industry; a lot of good things came out of it, including the common need for resources related to project management. I hope to find more people interested in helping on that very issue and in the meantime I will do my best to help initiatives such as The CivicActions Estimating Worksheet (thanks a lot Gregory Heller to enlighten me on this) and my very own Project Management tool aka "Ren" (人) that I plan to release soon. I'll try to sum up what I think would be a good direction to head to. Read more »

Leaving notes on pictures a la Flickr with Drupal

I just released the first official version of my Image Annotate module; in a nutshell it allows users to select an area on a picture and associate a note to it. Flickr has been doing it for a while and Facebook uses the same kind of system for allowing its users to tag friends in pictures. This module uses the jQuery UI library and works with Imagefield for the moment. If you want to see it in action, go have a look on the test website. Read more »

A featured content slideshow with Drupal

We already saw how to build a simple slideshow with NodeQueue and a bit of jQuery magic. This is perfect for exposing a product's main features for example, however it requires somebody to manually select the content that goes into it. Now what happens if you are looking to build such a slideshow for, say, a magazine's website that publishes a certain amount of content every day? Some editorial staff could be in charge of editing the list of content to appear in the slideshow, but automating things a bit would not be a bad thing... Well, let's see how to do so with the help of Views, Teaser Thumbnail and, one more time, a bit of jQuery and theming overriding. For those impatient to see what we are going to build, go have a look at the slideshow in action. Read more »

Easy and maintainable slideshows in Drupal

I received that request for most of my projects in the past year: the client wants a slideshow promoting either some of the content or the main features of the website. I have seen this implemented in many ways; from static Flash animations, to very dynamic, but very heavy, custom modules. I usually like to strip down the concept of a feature to its simplest form, then implement it the easiest way (usually a contributed module). In the end I just hack my way through a couple theme overrides and I'm done.

I am going to explain how to build a promotional slideshow (I will leave the featured content slideshow for a future blog post). The idea is that the client wants to be able to add a slideshow of pictures associated with some text that advertises the main features of his website: "Connect with 10,000 thousands professionals", "Manage your accounting online", "Share your videos easily with your friends"... The only thing is that the client is usually willing to update that information over time and, as far as I like receiving new work, this is not the kind of thing I would enjoy doing.

For those impatient to see what we're going to build Read more »

Organized developments with Drupal

As any other geek, I have spent a fair amount of time since I started coding looking for an efficient process when developing websites. After working for about a year leading Raincity Studios' team in Shanghai, the thing that I most enjoy is the technical side of the development process. The following is a rough idea of how we organize our work for our clients; I have already seen people discussing their own SVN structure or workflow when dealing with Drupal projects, but never did I see a complete overview of their process. Read more »

Beautify your Drupal forms

There are a lot of small details that reveals if a website has been built with Drupal; I often detect them pretty quickly when landing on a page. The URL structure, the search form, the user login page... all of these tend to be pretty Drupal-ish, except when some time has been spent in theming and styling.

Most of my clients are expecting to have their website looking the least Drupal-ish possible: they want the nice CMS engine but appreciate having something as customized as possible when it comes to the appearance. I recently had to spend a bit of time tweaking forms to give them a "sexier" look. Among the many modifications and enhancements we did, two hacks may be of some interest for some of the folks out there.

"Nicer" buttons

I am not a huge fan of adding markup for the sake of design; I am actually pretty picky when it come to semantic, standard and the need for keeping styling as unobtrusive as possible (I actually spend half of my time annoying my staff with these concepts, the other half being dedicated to define how many 饺子 (jiaozi) fit in a Chinese developer's stomach).

Anyway, there come times when the design needs to have those "rounded buttons" ("Must... control... fist of death"). Here is how you can have all of your form buttons to be styled at once; we first need to add a few lines to the template.php file of our theme to override the theme_button function:

// Override theme_button
function phptemplate_button($element) {
  // Make sure not to overwrite classes.
  if (isset($element['#attributes']['class'])) {
    $element['#attributes']['class'] = 'form-'. $element['#button_type'] .' '. $element['#attributes']['class'];
  }
  else {
    $element['#attributes']['class'] = 'form-'. $element['#button_type'];
  }

  // We here wrap the output with a couple span tags
  return '<span class="button"><span><input type="submit" '. (empty($element['#name']) ? '' : 'name="'. $element['#name'] .'" ')  .'id="'. $element['#id'].'" value="'. check_plain($element['#value']) .'" '. drupal_attributes($element['#attributes']) ." /></span></span>\n";
}

The last line is the only part we actually modify; we wrap our buttons with a pair of <span> tags that we are going to style.

Now we need to style it, that means as well preparing the pictures. These are the left and right part of the button, though we double the pictures to use a sprite effect when the user click on the button (pseudo class :active):

bg-button-left.png

bg-button-right.png

We combine this with the following CSS code that we add to one of our stylesheets (style.css from your theme for example):

/**
 * Form buttons
 */
span.button {
  background: transparent url('bg-button-right.png') no-repeat right top;
  padding: 4px 10px 5px 0;
}
span.button:active {
  background-position: right -36px;
}

span.button span {
  background: transparent url('bg-button-left.png') no-repeat left top;
  padding: 4px 0 5px 10px;
}
span.button span:active {
  background-position: left -36px;
}

span.button span input {
  background: transparent;
  border: 0;
  color: #494949;
  font-size: 12px;
  padding: 0;
}

Download the CSS file

Here is an example of the display you should have:

Now, you can easily use the same kind of method on many other elements, including menus, like the local tasks. Let me illustrate this with a screenshot from a recent project:

Field descriptions as popups

This is another one I thought of while working on a previous project; the user found the content submission forms way too cluttered. It was mainly due to the fact that all the contributors had been attributed the administrator role, thus displaying a lot of unnecessary fields and options (Authoring information, URL path settings, Menu settings, ...). We changed them to the contributor role that was designed for their use of the website and everything was fine. However, I wondered how we could make the forms even cleaner; a lot of the content forms the contributors were going to use displayed a lot of descriptions below the field. I think it's important to add this information when creating custom types with CCK, though it can add a lot of unnecessary information when either the field label already gives enough information (the Username field is indeed pretty straight forward) or the user is very familiar with the interface, which is the case when for example a contributor is creating new entries everyday.

What about then, simply hiding these bits of information and displaying them as a helper popup when the field is hovered or gain the focus? Well that's exactly what were going to do.

Once again, we need to override something. Since we want this to happen when we have a form (thus fields) we are going to use the theme_form function. We just need to load a jQuery script, we do so by adding the following to our template.php file in our theme:

function phptemplate_form($element) {
  // Add a jQuery script for the popups
  drupal_add_js(path_to_theme() .'/popup.js');

  // Anonymous div to satisfy XHTML compliance.
  $action = $element['#action'] ? 'action="' . check_url($element['#action']) . '" ' : '';
  return '<form '. $action .' accept-charset="UTF-8" method="'. $element['#method'] .'" '. 'id="'. $element['#id'] .'"'. drupal_attributes($element['#attributes']) .">\n<div>". $element['#children'] ."\n>/div></form>\n";
}

Now let's have a look at this popup.js script:

$(document).ready(function() {
  $('form .form-item input + .description').hide().prev('input')
  .hover(
    function() {
      $(this).next('.description').show();
    },
    function() {
      $(this).next('.description').hide();
    }
  );
});

Download the JS file

This will hide input descriptions and show them when hovering the input. In terms of usability, it would be better to ensure the descriptions are displayed when the input gain focus as well, but I will keep things simplehere.

Now, we style a bit the description layers:

/**
 * Form descriptions popups
 */
form .form-item .description {
  background: #FFE8B1;
  border: 1px solid #FFD571;
  border-width: 1px 2px 2px 1px;
  color: #A16400;
  font-size: 11px;
  padding: 7px;
  position: absolute;
  width: 250px;
}

Download the CSS file

And here is the expected result (just hover the field):

What then?

Well, as I said before these are simple examples:

• when you style buttons as explained earlier you have quite some special cases to deal with: buttons displayed on a layer that has a background will need specific pictures that takes it into account, inline forms need a bit of styling as well...
• the popup script works fine but need a bit of customization to take textareas, radios and checkboxes into account, the behavior could be improved to take the field focus into account, the style of the popup could be improved as well...