Feb - 2012
Written by Tim Wuyts
Drupal is a very powerful and flexible Content Management System (CMS) that is used worldwide as the driving force behind numerous websites, from small companies to giant multinationals.
Something I – and many other front-end developers – always try to accomplish is keeping the code as clean & compact as possible. This doesn’t only look better, but also works a lot easier.
It irritates me immensely that Drupal generates a tangle of (mostly superfluous) HTML code – this as opposed to some other CMSs, like Wordpress. But how can this code be reduced to a minimum?
The power of CSS
Drupal allows you to set up a dynamic website out-of-the-box using modules (CCK, views, panels, …) and a basic theme (ZEN, basic, …). You can actually do this without writing a single line of code. Mostly we want a website with a customized look & feel. We will without a doubt have to use CSS. Because Drupal by default generates a big pile of HTML code and CSS is a pretty powerful markup language, you can achieve a pretty good result in a fairly short amount of time.
With a little bit more effort you can generate tidier HTML. Because your HTML is a lot slimmer then, you’ll have to be creative with the available CSS selectors. But isn’t that what makes it challenging? And what’s more, your work looks a lot cleaner too.
Every Drupal theme consists of a collection of template (tpl) files. These files describe how your content will be generated and rendered. At the start of every project you’ll place the global layout in page.tpl.php and put the content markup in de respective template files (node.tpl.php, block.tpl.php, …). We’ll try to trim these files down and keep them like that. Since most elements in these files are mostly superfluous, we can already cut back here. In some cases you don’t have a choice but to keep some elements, but in this case the principle is: “The lesser, the better”.
In many cases the files, such as node.tpl.php, contain only the following line:
- Search a function in the Drupal API;
- Place it in your template.php;
- Delete what you don’t find necessary.
Depending on the complexity and structure of your website, you might have to retrieve some of the tags, CSS classes or elements, but in any case your code will look much better. Offcourse this has to be considered case by case.
Example: Menus in Drupal.
To illustrate, I will explain in detail how you can provide the different Drupal menus with their own layout. First, override the following functions in template.php:
When you strip these functions of the redundant elements, you get something like this:
But how can you select your menu in CSS when the list doesn’t contain a class or id? First you can where possible use the above-mentioned elements (e.g. #header, #footer, …). This is not always the way to go. In that case, try to find a work-around or retrieve some of the necessary elements.
Some disadvantages & points of attention.
- Don’t always delete everything with the risk of throwing overboard some necessary functionalities. Try to find a golden mean depending on the project’s kind and necessities.
- If you use a WYSIWYG editor, a bad and superfluous markup is almost inevitable. Try to limit or even avoid its use as much as possible.
What you want to do with this, how far you want to go and how much importance you attach to this is entirely your choice. The end user won’t notice that big of a difference. But for me it’s always a worthy challenge to keep the code as clean & compact as possible.
(The examples in this post were based on Drupal 6.20)
Feb - 2012
Written by Bert Goossens
Sometimes you have to make a list in an app in which the position of the items is important. For example, if you easily want to change the position of articles on a webpage, you can use a list in a Content Management System (CMS) and just drag the articles to the right position.
You can easily make a list drag & droppable with some jquery UI plugins, but actually storing the position of the article/item in a database is more complex.
An easy, but not optimal way to rearrange objects in a database is to reset all positions. You loop through the rearranged list and update the position of each item equal to the position in the loop. This is a fairly good approach for very small lists, but not an option when you‘re looking at a list of a few hundred items. Let’s say you move an item from position 54 to position 53. What do you think is going to happen? Every single item is updated which also means a query each. Is this really necessary for the change of just one position?
After some long and hard thinking we came up with a solution that only affects items that need to change position. This way we can bring the number of processes to a minimum. After dragging & dropping we send only the changed item to the backend. Also here we gain on performance, because we only send one item instead of a whole list of items.
Now this is the cool part….
If the new position is lower than the old position, then we have to move up all positions of the items where the position is higher or equal to the new position and lower than the old position. In the other case we have to move down the position of all items where the position is higher than the old position and lower than or equal to the new position.
Another approach is working with abstract positions. For example, working with decimals. After dragging & dropping you have to change the position number to a number between the numbers of the items before and after. But this is not a readable way and doesn’t work forever. Especially if you want to display the position of the items.
So this is my solution - not one I found somewhere, but one that arose by logic thinking. I hope you can use it. And if you have other techniques, just share them in the comments below!
Jan - 2012
Written by Kristof Orts
When dealing with the content of your site—especially a large one—it is often painful to edit and maintain all the information without drowning in its complexity. Areas of your site may become outdated or difficult for users to find, simply because you—or your team—are trying to avoid this tedious chore. Luckily, there is an antidote to all your content management headaches, and its name is Drupal.
Drupal is one of the most flexible content managers on the web, and like the best things in life, it’s free. Drupal is open source and maintained by an active community.
Open Source content management
Open source means it is free to use. There are no license fees. Mozilla (keeper of the code that makes the browser Firefox), Chrome (Google’s browser), and computer operating systems like Linux are just a few of the many open source projects. Some of the benefits of using open source are: source code remains available to everyone, system integration is a piece of cake, and changes are allowed, too. A content management system, or CMS, is a way to rapidly create, manage, and organize all your content.
What is Drupal
Drupal was created by a fellow Belgian, Dries Buytaert. The Drupal software first materialized in 1999, as a message board. Within a year, the board’s members became interested in using and contributing to Drupal and the project was made open source.
Drupal.org came online in 2001 and gained serious momentum in 2005 with several code sprints and conferences. The community is currently home to 630,000 users and developers and this number continues to grow each year. DrupalCon is the biggest Drupal conference on the planet. It is held every year in the U.S. and in Europe. Last year’s San Francisco conference welcomed 3,000 attendees.
One of the reasons Drupal is so powerful is that it offers thousands of free themes and modules—plug-ins you can download and install in order to customize functionality—that are easily accessible. If building a website is like building a house, modules are the high-tech gadgets you outfit it with, and a theme is the final aesthetic touch—like a fresh coat of paint. You can also create your own theme using HTML, PHP, and CSS.