Thursday, August 25, 2011

Image Handling in Drupal

Aug. 25, 2011

Note: We recommend sticking with Drupal 6 for these modules. While it might be nice to have a look at a way of doing all of this in 7, we have found that the lack of support and modules makes it too difficult to recommend using 7 for media-heavy sites at the current time.

We all know that Drupal's true power lies in its extensibility. Out of the box, Drupal only comes with a simple upload module and no easy way to dig right in and start building rich media sites. Looking at the module list can be a daunting task because of the sheer number of options that you have. Today we're going to look at some of the nicer ways of handling and displaying media on your site. This post will be broken down into 3 parts: Image, Video, and Audio. Today we're starting in with several awesome ways of dealing with images.

Getting started

We will need ways of easily inserting images into our content. To do this we are going to need a few key modules: Views, CCK (along with FileField and ImageField), and some sort of WYSIWYG editor (FCKeditor / CKEditor is a popular choice but you can get access to many options with the WYSIWYG module). CCK will basically allow us to implement images in a consistent way directly from the theme TPL files. Views will allow us to build nice grid layouts of things like galleries. Finally, a WYSIWYG takes care of everything else, allowing us to format and upload images on the fly and move them around content such as blog posts.

Many of the modules featured here will need support from other modules like Image, ImageAPI, and ImageCache. These support modules work behind the scenes to augment image support and allow Drupal to do some pretty powerful processing.

File management

The key to maintaining any media-rich site is being able to archive and review all of your images easily. Many WYSIWYG modules come packaged with their own file management solutions that will display everything in your Drupal files directory. However, let's take a look at some contributed modules that make things really simple for image handling.

Image browser module: 
This module has a really nice, clean, compact interface. It is compatible with many WYSIWYG modules like CKeditor, FCKeditor and TinyMCE. It displays uploaded images in a grid and allows you to quickly sort through images by user. The lack of complexity makes Image Browser the ideal solution for sites that don't need the added weight of a multi-directory management system like IMCE. One additional thing I really like Image Browser because it has functionality that will help you align and size images as well as adding your own CSS styles directly from the interface if needed. It is a great no frills / no fuss image management module that you can customize to work perfectly with your theme.

Image Browser

FileField Paths module: 
This module is crucial if you are going to be using Filefield, especially on more than one content type. What it essentially does is automate the placement of files within your directory structure. Let's say we have 2 content types: Blog post and Portfolio Image. Each of these has an image field that displays a small thumbnail on the front page so that the user can click and go to the  content page. Normally, the uploader would just place these images into the main Drupal files directory. After 20 blog posts and 15 portfolio images, combined with any other uploads you have done, this directory will become a huge mess of files. FileField Paths allows us to specify criteria for directory creation. I could use this to set all blog-related images to go into the /files/blog directory and the portfolio images into /files/portfolio. I could even get more specific than that, allowing Drupal to create a new folder for each specific node. This is a must for keeping your files organized.

Image Display

CCK is only capable of displaying your images either inline or linked in the actual node. Without modifying the TPL files of your theme, this will become limiting for a site that wants different ways of displaying images. What if we want ways of freeing the display of images, separating the display from the bounds of our current theme?

Lightbox 2: 
Lightboxes have been around for a few years, but they are worth a mention. Frequently people forget that their media need not be restrained by their current design. Not all Drupal themes were designed from the ground-up to account for rich media use. In those cases you cant get really nice, large photos. Another side effect is that media embedded directly into the node can suffer from screen resolution limitations. Lightbox solves these problems by making your media show up in a modal window within the browser. The image is sized to the max resolution, and in the instance that the browser window is smaller than that, it resizes the image automatically. There is also the option for the user to make the image max resolution, so you're never limiting the display of your content to any constraints. One further benefit is that since it uses a modal window, your user never has to leave the current page or load a new URL. They can always get back to where they started simple by closing the image. Combine that with other types of media support and the ability to create galleries, Lightbox is the magic bullet of themes with media display problems.


Colorbox is another lightbox module that is more lightweight than Lightbox 2. It also has an official Drupal 7 release, so if you are going to run a production site, this might be a good alternative.

ImageField Crop:
Okay, so I have thumbnails for a particular node appear in a view (e.g a list of blog posts with a uniform thumbnail display). Your default options are pretty limited if you want things to look uniform: pre-format and export all your images using a program like Photoshop (time consuming and limited by users' access to the program), or CSS styling (can result in weird aspect ratios or warped images). You could also install and configure a module like ImageCache, but if you want to allow other users to have some degree of freedom then this can be limiting. Enter ImageField Crop. This modules allows you to upload and image and then crop and resize it to fit within a specific area. Let's say that our blog view has posts with thumbnail preview that are 150px by 150px. After ImageField Crop uploads my selected image (let's say the original is 450px by 280px), I can move and resize the bounding box and get a live preview of the resulting output. The module even saves the original image so you can go back and edit it later.

ImageField Crop

Image Manipulation

We don't always consider some of the amazing things that can be accomplished with PHP modules these days. Drupal has a few modules hanging around that can actually assist and automate some image manipulation tasks. With these, you might just be able to cut Photoshop out of your update rotation...

ImageCache Actions
If you've ever wanted to add borders, watermarks, transparency, or various other tweaks to your images, then this is the module you need. The "Actions" part of this module means you can set up powerful automatic image processing to your uploaded images. This module works best when you want uniform processing on a whole series of images. For example, your users upload images which automatically get a customized site watermark, resized, then placed within a poloroid frame, and placed within a view. In this way you can collect all this content yet ensures uniform display within your theme.
ImageCache Actions
There are a lot of different techniques for working with images within Drupal. I would encourage anyone to go to and check out these modules as well as some of the other offerings from the community. If you find something you like please leave a comment and I'll check it out as well!

Adapted from Awesome ways of handling media on your Drupal site, part 1: Images,  

For more information on Drupal Development, Drupal Expert, Drupal Developer and Drupal Programmer visit DCKAP

Thursday, August 18, 2011

Drupal-7 for Tate Museum's "Social Platform" on Revamped Site

The Tate museum group is scrapping the use of HTML code in favour of open source content management platform Drupal and has adopted cloud hosting as part of an overhaul of its website. [Drupal, as a Content Management System, outputs HTML. -Ed.]

The ten-year-old Tate website, which receives over 18 million visitors a year, currently uses hand-coded HTML files. This will be replaced with a Drupal 7-based platform to move the site from a "brochure approach" to a social platform, encouraging debate and interaction about art as well as supporting user-generated content.

John Stack, head of Tate online, said the project to completely overhaul the site has already been two years in the making.

"Tate's website is ten years old and has never had a website re-design. We're in the process of overhauling, updating and re-designing every page and every system powering it," he said.

Stack said a lot of the website is based on hand-coded HTML files, meaning website updates are done manually, which is time-consuming and means only skilled personnel can make changes.

The organization has also made changes to its hosting capabilities to cut costs.

"Previously, we would want to deploy pre-supplied software, such as e-learning and open source software, only to find that we needed specific versions of PHP or MySQL. As it wasn't in the package, we faced additional costs and had to go round the houses to find money. We had no time to wait around, working out what to do with hosting," said Stack.

Tate used "bits of cloud hosting" and decided to re-launch with a new hosting package from service provider NTT Europe called Compute Cloud.

Rob Gethen Smith, information systems director at Tate, said, "The decision to move into the cloud was sparked by plans to refresh the front-end of the main website and ambitious plans to increase online interactions and discussions about art. We wanted a solution that would support our growth and innovation."

Stack believes the changes to Drupal and cloud hosting will help the organization provide a sustainable service for visitors, despite costing "quite a lot of money" in the face of budget cuts.

"The website gets bigger and yet we have less money after the [government's] Comprehensive Spending Review. With the ambition to do more and more, we need a more sustainable solution," he said.

"The choice of NTT and Drupal was all focused on making these things sustainable. The reason for that was Drupal is very mature and has a large community so it's easy to find people to work on the site. It also has a lot of community features for blogging, commenting and user profiles."

The move will also allow Tate to change the focus of its website.

"The site has acted as a brochure for marketing as well as the digitization of 68,000 artworks in the Tate collection. It also provides learning resources and research materials, including audio visual and videos. That's been the focus for four years," said Stack.

He said the museum is now aiming to respond to rapid developments in mobile technology. Visitors will shortly be able to access the site when inside museums. The group hopes to launch a mobile version of its website after the main launch at the end of October, and to add to its portfolio of mobile apps for Apple's iPhone, including games and photos themed around particular exhibitions.

Stack said the organization plans to produce apps for Google's Android operating system in the near future.
"At the moment we have to outsource because our web department specializes in web technologies. It's expensive because the skills are high in demand. But we'll think about bringing [mobile development] skills in-house in the future," he said.

The Tate has a web department of twelve people, six of whom are working on temporary contracts for the website re-launch.

Tate also announced a sponsorship partnership with Vodafone to support a new platform called Tate Debates - a weekly online discussion platform on Tate's blog.

Marc Sands, director of Tate Media, said, "Engaging with a global online audience, as well as our millions of gallery visitors, is an increasingly important part of what Tate does and I am sure our work with Vodafone will open up even more exciting and diverse ways to make this possible."

Adapted from Tate Museum Group Chooses Drupal, Jenny Williams, 26 July 2011 14:00

For more information on Drupal Development, Drupal Expert, Drupal Developer and Drupal Programmer visit

Wednesday, August 10, 2011

Rooms: Travel Market Solution in Drupal-7

Drupal Rooms is a booking and room management solution for hotels, vacation rentals and B&Bs

August 10, 2011

Drupal Rooms is a solution for the travel market.

It is a booking and room management solution for hotels, vacation rentals and B&Bs. Rooms is being developed as Drupal 7 only solution.
Drupal Rooms allows an accommodation owner to:
  • Create rooms and assign availability (or on hold states) via a calendar.
  • Define seasons and assigned prices for rooms based on seasons.
  • Create bookings and keep customer records.
  • Make rooms available for booking with a availability search functionality and/ or calendar - handling both immediate bookings and bookings following owner confirmation. 


    The aim of Drupal Rooms is to make Drupal the go-to platform for building a hotel, bed and breakfast, or vacation rental site. Drupal offers a host of powerful features (media management, social media integration, multi-lingual support, commerce, and others) and the aim is to integrate all those in a package that suits and empowers accommodation owners.

    The first step towards that path is resolving the booking issue itself and development on the Rooms module is moving forward at a good pace. Rooms will offer an easy way for accommodation owners to set up rooms, define pricing rules across many variables, as well as accept and manage bookings and payments directly on their website.

    Compiled from,

    For more information on Drupal Development, Drupal Expert, Drupal Developer and Drupal Programmer visit 

    Thursday, August 4, 2011

    Trends in Content Management Systems

    In an effort to cater to customer needs, content programs are changing in new ways thus creating new trends.

    Content management systems were developed to make publishing content on a website easy through streamlined automation. However, as content management systems become more complicated, users are realizing that these systems are capable of more than just posting web content. In an effort to cater to customer needs, content programs are changing in new ways thus creating new trends. 

    The Four Developing Trends
    There are four developing trends in the content management system industry that are furthering along software advances. These include:
    •  Merge of Themes with Extensions
    • Interoperability
    • RDFa
    • Market Fracturing

      Merge of Themes with Extensions
      Although the merge of themes with extensions has been slowing developing for many years, the industry is at the point where the combination makes applications run much more smoothly. Design is melting with functionality resulting in there being less of a chance of a content management system becoming too disjointed during development and in the eyes of the end-user. 

      As cloud-based computing and semantic architectures become more widely used, interoperability is becoming more feasible. Users demand that websites interact and are compatible with one another. Internet users want to be able to log in with accounts created on other sites and thus access data from other sites within a specific web page. This creates an actual web of content versus a series of tunnels. 

      Another trend is the creation of programs that automate exactly how data is being structured. Drupal recently launched RDFa into their primary source code so any site running Drupal 7 will be able to take advantage of the flexibility of the new code. Other content management systems are create extensions that automate data structuring. More businesses will take advantage of semantic crawlers and easier organization. 

      Market Fracturing
      Finally, as themes and extensions become one, talented web designers will begin building their own content management systems. Designers will need to be knowledgeable in design and function. Therefore, once designers realize the amount of potential behind the combination of cloud and semantic architectures, the market will become fractured.

      The noticeable trend amongst content management systems is the merging of all aspects to truly create a world wide web. Improving code and automating specific functions will certainly further develop this trend in future platforms. Content management systems are continuously developing projects that help to expand the Internet while further connecting its users to one another.


      For more information on Drupal Development, Drupal Expert, Drupal Developer and Drupal Programmer visit 

      Monday, August 1, 2011

      Facebook-style Statuses: Submodules

      Facebook-style Statuses has several submodules specifically for integration with other modules:
      • Activity: Record activity messages for various status-related events.
      • Domain: Allows posting status messages to specific domains or all domains controlled by the Domain Access module.
      • Flag: Flag status updates. A "like" flag is built in.
      • Mollom: Allows screening status updates to prevent spam.
      • Notifications: Allows receiving notifications via email or other methods when status updates or comments on status updates that are relevant to you are posted.
      • Pathauto: Allows automatically setting nice URL aliases for individual status pages.
      • Rules: Allows performing various actions on status-related events, and performing status-related actions on various events.
      • Services: Allows third-party services to CRUD status messages (making third-party apps possible).
      • Twitter: Allows posting status messages directly to Twitter.
      • Userpoints: Allows awarding points to users when they take status-related actions.
      FBSS also integrates with many other modules without using separate modules for them. Integration with the above modules is more complicated and usually requires separate settings or default configurations.
      Additionally, FBSS has three submodules that provide extra features:
      • Tags: Allows using #hashtags and @mentions in status updates.
      • Comments: Allows commenting on status updates.
      • Privacy: Allows users to send private status messages to each other.