Drupal image attach block module

Written at 17:28, on Friday 14 September 2007. Tags: drupal .

I recently created several PHP blocks for a Drupal website that made heavy use of the image module and the image_attach module. While the block creation wasn’t very difficult, it was still a process that took me a long night of researching api.drupal.org and fiddling with SQL queries. (It was a great exercise though, since I hadn’t practiced my PHP/MySQL skills since I followed a basic course at C-MD last spring. It’s amazing how much you forget if you don’t keep practicing… )

Anyway, the website I created these blocks for has an extensive product database set-up as custom nodes in Drupal. Besides presenting plain text information on their products, they also wanted to easily maintain their product photo’s, and present them in galleries. To make this possible, I set up the image module. All photographs were imported at once via FTP, and attached to individual product nodes through the image_attach module. This proved to be very useful, since they could attach the same image to various products, e.g. for variants of the same product, and also multiple images to one product.

The challenge was for product pages to display the images in the sidebar. In Drupal, there is a clear seperation between node content and all other content, and they don’t mix very well. So it’s very difficult to display a piece of content in another place on your website without resorting to hacks or writing checks in your theme display logic. After Googling for a while, I took it upon myself to write two PHP blocks: one that displayed the attached images to the currently viewed node, and one block that displayed the nodes attached to the currently viewed image. This established the relationship between image and product, and allows users to click through the photo album to products, and vice versa.

Setting up these blocks wasn’t particularly hard with the great example of the hook_block function provided with the Drupal API documentation. With this template, it was mostly a matter of copying the provided code, and filling in the blanks for displaying my own queries. I spent a lot of time investigating Drupal’s query functions, and searching for ways to access node information in a block context. For that, the following snippet proved very handy:


<?php 
if (arg(0) == 'node' && is_numeric(arg(1))) {
  $node = node_load(arg(1));
  // Rest of the code here...
}; ?>

This loads the node object, the concept in Drupal for a content page (as opposed to dynamically generated pages, such as listings of pages). Knowing what piece of content a user is currently viewing is essential for determining if the block needs to do something with it.

While the PHP blocks work great, I decided to go the extra mile and create modules of them. This has numerous advantages. By creating a module, the functionality can be easily deployed on other Drupal installations. For this customer, several localized product databases will be set-up. In a multi-site setup, this will mean that the codebase can be maintained and updated from one codebase. Also, the block can then have it’s own theming, instead of the generic block theming. And it’s possible to define addtional defaults or configuration settings.

I’m sure there are lots of improvements that could be made to this module (and I’d love to hear about them!), but it’s quite usable based on my own tests. I’m not sure if it should have a long live, since it would be perfectly acceptable for the Image module maintainers to integrate this in their own module. Nevertheless, I’ve attached the current code for you to download. Please leave a message if you find it useful, or if you have any suggestions for improvements!

Update: the code is now included in the Image module, thus obseleting this module!

Comments closed |

From the portfolio

  • Grasscity producten pagina

About this website

My name is Jeroen Coumans, I'm a freelance web designer, front-end developer and Drupal ninja from the Netherlands. I love to create beautiful, usable and accessible websites. On this website, you can find my portfolio as well as my personal weblog. Interested in hiring me? I'd love to hear from you.

After completing my BA in Arts and Culture I'm now doing a MA in Communication and Multimedia Design. More …

Elsewhere

Issuu and Smart Look for a better PDF viewing experience

A plugin that embeds PDF's, Word and Powerpoint files in a very cool, usable and fast Flash interface.

Visit site …

Palm Pre: everything you ever wanted to know - Engadget

This is the only device I would consider as replacement for my iPhone. Palm seems to have done some essential things right, like contact management by pulling data from various services in the cloud. I love the zoomable UI and the card metaphor for app switching.

Visit site …

Release:jQuery 1.3 - jQuery JavaScript Library

Some very nice features and performance improvements in this release, among which the Sizzle CSS selector engine (currently fastest avaiable), live events and much faster HTML injection.

Visit site …

jQuery API Browser v1.3

Improved and also available offline as AIR app.

Visit site …

A List Apart: Articles: Return of the Mobile Style Sheet

"What can be done for mobile browsers that do not read handheld style sheets, or parse CSS Media Queries? Short of ignoring them, there are two options."

Visit site …

Mapeed.AddressChooser API documentation | Home

Cool Javascript component that can be used for address collection in forms, combining HTML form and Google Maps for dynamic place retrieval and auto-completion.

Visit site …

Digital Ethnography

Blog of Michael Wesh, cultural anthropologist, professor of the year, and creator of the video "Web 2.0 … The Machine is Us/ing Us".

Visit site …

Components Versus Patterns

Analysis on the differences and commonalities between components and patterns. "Although the two concepts are strongly related, their differences warrant consideration to ensure you are building the type of library that’s right for you."

Visit site …

The State of the Web 2008 | Web Directions

"Welcome to this detailed report from our first “State of the Web” survey of professional web designers and developers. It includes details and analysis of all the responses to over 50 questions covering technologies, techniques, philosophies and practices that today’s web professionals employ."

Visit site …

The Curious Case of Twply and Twitter - Bokardo

Excellent interface analysis of twply: "Moral of the story? Design can effectively be used to deceive people. Deal only with those services you know and trust. "

Visit site …

Subscribe

Or choose one of the single feeds:
Journal feed | Elsewhere feed