The img_relocator module for Drupal

Submitted by Frederic Marand on
Drupal tips and tricks

The problem: IMG elements and relative SRC paths

Ever since I've known Drupal, I've remained dubitative about the proper way to insert and reference images in drupal posts (nodes). Sure, there are many modules like image, img, img_assist, and probably a few others, but none seem to answer this simple need for content creators: to be able to insert an img element without a path, and have the CMS automagically fetch the image from its actual storage location, and generate the proper URL on the fly, so that it works in any context: on the page, within a teaser on a three-level-deep taxonomy page, or in a RSS feed.

A workaround is discussed in the handbook using the image module, but it suffers from two drawbacks: dependence on the image gallery, and the need to go through explicit URLs within the image module, like http://www.example.org/image/view/##/preview", which prevent public downloads and require a drupal hit for every img element.

Sure, these modules have a lot more features, like automatic thumbnails and such, but they don't really solve the problem: just relocate these images for public download.

A solution: img_relocator

After spending such a long time without a clean solution, and tired of typing absolute URLs when redacting content that would need to be updated everytime the site changed its base URL, I decided to build a module that would just define a content filter to patch image sources on the fly. Ladies and gentlemen, please welcome img_relocator.

Installing and configuring

A few words to describe the module use. It is designed for node authors and defines a content filter called "img_relocator" (how original !). To use it, install the module and enable it from admin/modules, then go to admin/filters and select the filter for which you want the service of img_relocator, say for instance 'Filtered HTML', then click on its "configure" link. On the filter configuration page, say admin/filters/1, check the newly added IMG relocator filter and save.

Using the module

Once the module is installed and configured, create a node of some sort, make sure the input format is set to a content filter for which you activated the IMG relocator filter, and add some images. Supposing your drupal site is installed on http://www.example.com/path/to/drupal/", the files directory is set to its default "files" value, and you've attached an image called image.png to the node, you can now use these syntaxes:

  • <img src="http://www.example.com/path/to/drupal/files/image.png" alt="some explanation" /> : the module won't touch your absolute URL. You could always do this and it still works.
  • <img src="/path/to/drupal/files/image.png" alt="some explanation" /> : the module won't touch your site-relative URL either. You could always do this and it still works too.
  • <img src="image.png" alt="some explanation" /> : the module will notice your local URL and transform it to an absolute URL so that it works in all situations
  • <img SRC=image.png /> : the module even accepts such an incorrect syntax and will both fix it and make it use an absolute URL, generating attributes with proper case and quotes. The terminal /> is required, though.
  • <img src="image.png" class="someclass" style="some: attribute" alt="some explanation" /> : additional attributes are not affected: "src" is the only attribute processed

An additional benefit of this format is resilience to site reorganization: should your site become http://www.example.com and the files directory /newfiles, the img src="image.png" ... content in your nodes will still be working, without needing a rewrite.

In a sandbox ?

Why is this module in my sandbox instead of being made a normal drupal project ? Because I can't help thinking there has to be a better way, already built-in or being built into 4.8/5.0, I haven't found it, and this module is actually useless. If you do know about the better way, just let me know !

UPDATE : 2006-08-21 - Drupal.org does not host sandbox-related issues, so any issue/bug/feature/wish about this module should go to the audean wiki page for issues instead.

UPDATE : 2006-08-23 - There is a nasty interaction between codefile and img_relocator: any <img> appearing within a <code> block will be processed by both filters, resulting in a mess. This will have to be fixed.

Ramdak (not verified)

Mon, 2006-08-21 03:28

Permalink

I think this is going to make a lot of people happy. Please consider posting this on the drupal forums so that many more people will take notice. Thanks!

by the "words" of it, "looks" great! really, we need functionality like this. not: "i have to do this trick to make an image appear on my site" but: "i want to have an image on my site. the site will do it as i want it, not the other wat around" once again: great.

bohemicus (not verified)

Mon, 2006-08-21 09:34

Permalink

The best way I found for non-technical users (those who don't know what a tag means) for now is the new IMCE module. It has its limitations but is still the best solution for me.

Frederic Marand

Mon, 2006-08-21 10:00

Permalink

Although I didn't look it, this could indeed be interesting for TinyMCE users. However, the TinyMCE requirement is a big no for me: it doesn't work well with Opera.

Also, this doesn't solve the problem at all: from its description, it makes it simpler for users to insert images, but it does not make them relocatable, which is the whole point of using image names without paths.

Why do I consider this relocation feature important ? because most of the time, when I create a site, it will first be located under a temporary (work) URL, and content will start to be entered, while the older site being replaced it still online. Then when the site is ready, in as short a delay as possible, the whole site is moved to the existing URLs to replace it. So every link in the work site must still work in the production site without having to rewrite them one after another, which is not practical for even small sites with a few hundred nodes.

François Chastanet (not verified)

Sat, 2006-12-23 21:05

Permalink

I use your module for Drupal 5.0 rc1 I have to add these file (img_relocator.module) to get module installed, the content of the file: 
; $Id:  $
name = img_relocator
description = transforms relative paths in IMG elements to absolute paths.
package = Core - optional
version = 1.2

; Information added by drupal.org packaging script on 2006-12-15
version = "5.0-rc1"
project = "drupal"

This is good to hear: I hadn't even tested the module with 5.0. Thanks for taking time to do a img_relocator.info . Maybe you want to take the module further and had its functionality added to drupal somehow, either in core or as a supported module ?

Hi,

Good module, thanks for that (time to open a project in drupal.org!).

I was thinking that you can extend this to an SEO tool, as many people neglect the "alt" tags that Google Images loves and relies on, this module will extend the img alt to include the photo information available (filename, post title, etc.).

I couldn't figure out if this is what happens now, but if it doesn't - I'm guessing it's a small tweak.

Hi fiLi,

Thanks for your comment. However, I don't think img_relocator should become a full-fledged project : another module, in the same vein although differently designed, has been started by David Lesieur as url_replace_filter.module, and I got in touch with David and suggested he merge img_relocator with his own module.

This would be a win-win situation, IMHO. His module has an additional featurere: writing <a href=" links in addition to rewriting <img src=" links like img_relocator does, and will likely be better maintained since my module was mostly a proof of design, and I don't actively maintain it (actually, I didn't yet meet a problem with it).

Now we just need to see how he sees things regarding such a merge...