As you probably know, the Icon Module has been accepted as a Summer of Code project. Thanks a lot for the support and enthusiasm you've already shown! Quicksketch and yoroy will be my mentors this summer (thanks!), and I hope everybody else interested in getting icons into Drupal will help out by sharing their views and knowledge. The project affects themers, icon designers, developers and end users - so any form of feedback is appreciated!
Here is the SoC application, so that you can get a better understanding of the scope of this project, if you haven't already read it..
BENEFITS TO DRUPAL
Administration tasks in the Drupal CMS are currently performed by wading through a series of text-heavy and confusing pages. Most tasks lack any sort of graphical representation, causing users to spend an unnecessary amount of time searching for specific options, even if they've performed that particular task before. This was evident in the usability testing conducted at University of Minnesota.
Icons would make the administration pages easier to use, especially for users new to Drupal. It is faster for the brain to process images than text, and icons are easily recognized at a glance, making for improved scannability - perhaps most so on the main administration page.
Icons may also be used to draw the user's attention and to better indicate the types of status messages displayed. Simply using colors (as is current practice) makes it hard for visually impaired users to understand the nature of the status message.
The framework provided by this project will also benefit module developers and themers, allowing them to easily incorporate icons without having to reinvent the wheel. The concept of icon packs will make for better consistency with themes.
PROJECT DETAILS
The idea for this project was presented by Nathan Haug (quicksketch), who has written an excellent development plan outlining the creation of this module (http://groups.drupal.org/node/9830). I consider it a big asset and will use it as a basis for this project.
The Icon module will be somewhat similar in function to the implementations of modules and themes in Drupal. Just as a theme or module is represented in the file system by a folder with an .info file, icon packs will follow this same structure.
There will be an administration page where the user can manage icon packs and choose which icons to use per theme. The development plan suggests using the settings page for each theme at admin/build/themes/settings/your-theme. Instead, I'd prefer to create a new admin page at admin/build/icons, similar to the Themes admin page, allowing the user to choose icons on a per theme basis there, instead of polluting the theme settings pages. Nathan has already agreed that this could be a more appropriate option.
To install an icon pack, the user would first download it from the web (ideally from drupal.org), then extract the compressed folder into an icons folder in the Drupal installation. On admin/build/icons, the user would see a list of all available icon packs and be able to activate the icon pack just downloaded, just like with themes and modules. The next step would be to go to the Configure tab, then the tab for the user's chosen theme. On this page, the user would be presented with a table of all available icons and choose which icons to use from which icon pack. This way, users will always be able to choose an icon even if their favorite icon pack doesn't provide one. If the user does not select icons manually, a fallback mechanism based on a standardized naming scheme will be used to automatically select the most suitable icons from the available ones.
Because icons are displayed on the theme level, themes will have to conform to the new icons framework if they wish to use icons. An icons-enabled theme would present in its .info file a list of icons that it supports. This will again determine the interface for the theme at admin/build/icons. The theme would then place the icons in its template files using class names and the background-image CSS property, alternatively using
tags and the $icon_ array that will hold the URLs of all selected icons.
Module developers may also provide icons for their own modules. If a module contains new icons, it must expose those to the Icon module through its .info file.
Any icon may also be placed directly into HTML output using something like a theme('icon', $icon_name) call. Using this call, developers may take advantage of the available icon packs' existing icons, without having to provide their own. This is particularly useful on action links such as View, Edit and Delete, but the use cases are endless.
There will be many issues to tackle along the way, and the devil is in the details. To better understand how to solve a certain problem, I will look at how other Drupal developers have solved similar issues in the past. I think the theme system in particular may provide some answers. Looking at the code of core developers is always a good way to learn.
The Icons for Drupal group on groups.drupal.org will be used to discuss the project with members of the community and to post updates of my progress.
DELIVERABLES
- Create a working module as specified above.
- The finished solution should work in all A-Grade browsers and be accessible.
- Adhere to Drupal's coding standards and "the Drupal way". Consistency is important, and my goal is for this module to be as robust and elegant as Drupal's core.
- Build a strong relationship with the Drupal community, through which development can continue beyond this Summer of Code.
Feel free to share your thoughts on this. Do you disagree with something? Is there anything I've forgotten? Give it to me :)
The main goal is for the result of this project to be included in Drupal's core. It's ambitious, but not impossible. First, I'll make a contrib module as described above. Once that's done (and thoroughly tested), I'll begin work on a core patch and write a proposal for core inclusion. Hopefully, the module will prove to be useful and worthy of inclusion.
For the project schedule and up to date status on the development, see the Icon Module wiki page. I'll also be posting updates and thoughts on my blog.
Comments
Other projects doing roughly the same
I googled for other CMS like projects that support icon packs/sets, and I didn't find much at all. One obvious explanation is that most CMSes provide a frontend and a backend separate of eachother, whereas Drupal's admin pages are very much part of the frontend themeing system. The icons of other CMSes are therefore part of the backend theme, and can't easily be changed.
The old PostNuke CMS did allow for the default icons to be replaced by icon sets thorugh the PNIcon module, but not at all on the same level as we're envisioning.
Plone displays icons only using
<img>tags, although they used the CSS method earlier. I'll have to look more closely into how Joomla and others do it. While none of them seem to support icon packs/sets, it may be interesting to see how they display the icons (css or img tags, what logic lies behind, etc.). I'll also have a look at how FOSS desktops like KDE and Gnome implement icon sets.Licensing issues
There may be some concern about third party icons and how this may work with Drupal's strict GPL policy (if it's not GPL, it can't be hosted on drupal.org).. First, if the module is to provide a default set of icons, they have to be GPL. Any icon packs to be hosted on drupal.org have to be GPL licensed as well. However, as far as I know (IANAL), a Drupal user that has the module installed on his/her site, may download non-GPL icons and use them with the module.
The thing is, most free icon sets out there aren't GPL licensed. We're limiting ourselves a lot by not allowing anything else. One way to allow the use of non-GPLed icon packs, is what yoroy and others suggested here, to have something like a .info file in icon packs that maps icon instances to icon files. The icons themselves have to be downloaded from a third party website and dropped into place. This way, the icon pack can be hosted on drupal.org, providing instructions for downloading the third party icons.
Some loose thoughts
This is just a first round of questions and issues I came up with when thinking about how this would work:
How to actually attach and style an icon to an existing text-element:
Look at the (?)-icon for Avanced Help module. So far we haven't found a nice way to attach that one on the right side of the text, where it (probably) belongs.
Will the icons be actual images in the foreground, or background sprites with hover- & active- states? Actually, is this something the module should sort out at all?
Options to define it as a button? It might be useful to make the distinction between 'icons as actions' and 'icons as badges':
Will it be possible to cater for using different sizes of the same icon in different places? Would the UI let me specifiy where would I'd like to use the large size, where the small one?
How far do you think the administration of this could go within the module <> Where do you leave it to the theme is probably an important high-level decision.
Loose thoughts are also good
The module will in the end provide alternative ways of displaying icons, so it's up to the themer or module developer how the icon should be displayed.
These are the methods I'm thinking of providing:
<?phptheme('icon', 'name-of-icon-according-to-naming-specs', 'px size here', array('img attributes here'));
?>
As for sizes, see this issue. I'm not sure it should be up to the user to select sizes, but it could. I thought it should be left to the theme to decide. So the theme can define a preferred size, but it can at any time override that when it displays an icon in the theme layer (using any of the above methods).
Exactly, that's something we need to decide on sooner than later. I wouldn't want too much switches and knobs in the UI, that will only be confusing in the end. What about starting with as much default mechanisms as possible to begin with, then add manual overrides wherever there's a real need for it as we go along?
I've developed my own icons module
I use icons extensively on http://www.empowerthyself.com.
I'd like to help with this module's development.
I'm using the background-image aligned left method for icons because it has the most consistent formatting compared to img tags which conflict with line heights and such.
My module currently uses a hard-coded block of assigned path-icon class relationships and it uses an input filter to add icons in page content and a l() override to inject icons throughout the menus and site interface.
Icons rock. How can I help?
Great!
We need some more example-implementations of icon module e.g. for the Zen theme. That would be nice. Or you could look at providing the css-way of attaching icons. Please put any code-ideas in the issue queue for the module: http://drupal.org/project/issues/icon?states=all
I'm sure ximo would love to see somebody jump in and work on this.