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!

AttachmentSize
image_attach_block.tgz7.41 KB

Add comment. (5 total) |

5 Comments so far

I really like this idea and it can be very usefull for a site I’m developing. One question though, you are talking about attaching multiple images to a node. Maybe I’m missing something, but how do you do that with just the image module installed?

You’re right, you need to patch the image module to use multiple images. See eg. http://drupal.org/node/81102.

Jeroen Coumans on

Please note that my code was integrated into the new stable release of the image module, thus obseleting this module!

Jeroen Coumans on

Do you think that this module could be adapted to list in a block the anchors present in another one (and make the links to them ) ? It would be very useful for me.
Thanks for your answer
Misange

Many thanks for this! Saved me hours.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • You can use Textile markup to format text.
  • SmartyPants will translate ASCII punctuation characters into “smart” typographic punctuation HTML entities.
  • Insert Flickr images: [flickr-photo:id=230452326,size=s] or [flickr-photoset:id=72157594262419167,size=m].
  • Web page addresses and e-mail addresses turn into links automatically.

From the portfolio

  • Moulin Blues 2007

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

Script to update Drupal teasers | be fused

"One of the annoying things about changing the number of characters for teasers in Drupal is that you have to edit and save every single node (page, story etc) for the change to take effect. Well, it doesn't have to be that difficult, because here is a nice little script that will update all of the teasers at once."

Add comment | Visit site …

Degrading Script Tags

Reducing the number of tags required for loading an external javascript library by combining them into one tag. "Only one tag – and the semantics would work like this: The external script would attempt to be loaded (as normal). If the load and execution was error-free then the internal script would be executed as well. If the load or execution failed then the internal script would not be executed. "

Add comment | Visit site …

Aurora: What Is Internet’s Atomic Level?

"For Aurora we saw an opportunity to change the browser’s focus from the page to the individual “object”. Giving users the ability to interact directly with the atomic parts of a given web page offered greater personalization of their Internet experience. " This has interesting repercusions for webdesign as well.

Add comment | Visit site …

The Joker Action Figure

These toys set a new bar for realism.

Add comment | Visit site …

Google Chrome Process Manager

John Resig, jQuery creator & Mozilla hacker, writes about the significance of the process manager in Google Chrome: "The blame of bad performance or memory consumption no longer lies with the browser but with the site."

Add comment | Visit site …

Surface: een Natural User Interface

(dutch) An overview of the Natural User Interface, a term coined by Microsoft for their Surface concept.

Add comment | Visit site …

Official Google Blog: A fresh take on the browser

Should be released any time now, curious if the screenshots in the comic are like the browser.

Add comment | Visit site …

Mozilla Labs » Introducing Ubiquity

Ubiquity is "experiment into connecting the Web with language in an attempt to find new user interfaces that could make it possible for everyone to do common Web tasks more quickly and easily." A command-line for the web, connecting services through a hotkey.

Add comment | (1 comments) Visit site …

Mariët Ruiter 3150801: Kritische literatuursynopsis

Critical comparison of mine and Selwyn's vision on the Digital Divide.

Add comment | Visit site …

IEBlog : Internet Explorer 8 Beta 2 Now Available

Will Microsoft make new virtual machines available for testing purposes? I hate buying another Windows license just to get my testing setup of IE6, IE7 and IE8 complete…

Add comment | Visit site …

Subscribe

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