Relative Image Paths in Drupal
Monday, February 22nd, 2010I’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:
<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:
<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:
<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.
March 31st, 2010 at 3:15 pm
Thanks for the tips. I was having trouble finding this info.
April 20th, 2010 at 2:08 pm
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.
April 20th, 2010 at 8:06 pm
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:
<div id="ajaxLoader></div>
The image should always display correctly.
I guess another solution is to never use a relative path to the image.
<img src="http://grasshopperpebbles.com/images/myimage.png" />
April 21st, 2010 at 9:07 am
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
April 21st, 2010 at 10:18 am
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.