GrasshopperPebbles.com

Relative Image Paths in Drupal

Feb22

I’m working on a project that uses Drupal and I wanted to add a few images to the home page.

First I created the folders files/images under the root directory. I then created the home page (Create Content->Page). When adding images to the home page, the file location is relative to the root directory:

^?View Code HTML

<img src="files/images/flash1.jpg" width="168" height="112" class="imageFloatLeft">

But when I created another Drupal page (a page other than the home page), the relative path for the image is different:

^?View Code HTML

<img src="../files/images/flash1.jpg" width="168" height="112" class="imageFloatLeft">

And when I created a page using Drupal’s Panels Module, the relative path for the image is once again relative to the root directory:

^?View Code HTML

<img src="files/images/flash1.jpg" width="168" height="112" class="imageFloatLeft">

Adding content to Drupal seems to be fairly straightforward, but I did struggle a bit as I tried to figure out the relative paths of images/files so I hope this helps anyone else who may be struggling.

Be Sociable, Share!

Tweet

Checkout My New Site - T-shirts For Geeks

Roy

View March 31, 2010

Thanks for the tips. I was having trouble finding this info.
Mike

View April 20, 2010

I had figured out how to correct this problem as you have above. My problem is trying to figure out how to create blocks that pull images from a directory. I dont want to have to create a 2 blocks to run the same function and even worse have to edit both blocks when the time comes. Have you figured a better way to write relative image paths to work on ANY page? I would be very much interested in hearing back from you.
admin

View April 20, 2010
Depending upon what you are trying to do, the best solution is to use CSS.
```
#ajaxLoader {
  background:url(../images/ajax-loader.gif) no-repeat;
  background-position:right;
  float:left;
  width:90px;
  height:32px;
}
```
The image is always relative to the CSS file. So if I place the div in a block:
```
&lt;div id="ajaxLoader&gt;&lt;/div&gt;
```
The image should always display correctly.

I guess another solution is to never use a relative path to the image.
```
&lt;img src="http://grasshopperpebbles.com/images/myimage.png" /&gt;  
```
Mike

View April 21, 2010

Yeah, I have been doing that as well I was hoping there was a better way to do this. Absolute paths and setting images as backgrounds don’t always apply as an answer. For now I am using the above as a solution however it will be problem if the site ever moves or gets duplicated.

I will say this blog has the best explanation on how to work around Drupal’s relative path problem. If you or anyone find any modules or plugin’s to work around the issue I would love to hear back from you.

Thanks
admin

View April 21, 2010

Mike,
I just did a bit of research and it looks like the image module may be the solution.

From documentation:

The Image attach module allows an image to be attached to other nodes: pages, stories, or custom content types. You can specify which derivative size is shown in the node in both teaser and full view, and also the weight of the image among the node’s content. The attached image is linked to the node for the actual image, allowing readers to see the full size image. Support for the Views module is included.
Dan

View November 17, 2010

try adding /sites/all/themes/YOUR_THEME_NAME/images/YOUR_IMAGE.png as a relative link.

Shirt of the Weeek

Shirt of the week