Overlapping images in blocks not all appearing in child directory pages

By wermfud on 27 Apr 2012 at 21:56 UTC

Forgive my noobness. I am developing my first Drupal site in a rush (for school) and it's on a testing server so I can't post it.

I have different header images on different pages all with one logo on top. I have achieved this by creating unique blocks for each page that have links to the logo and the page header image. The transparent .gif logo is styled in CSS to go over a variety of photo headers styled in CSS.
Code looks something like this:
<div id="headers-img"><a href="http://site.com/about"><img class="back-image" src="sites/default/files/images/header-news.jpg"><img class="top-image" src="/sites/default/files/images/logo.gif"></a></div>
These blocks are then assigned specific pages based on url aliases. But I have one that is "all pages except those listed". I hoped this would be my default.

It works great until I visit a child directory page like site.com/blog/1 or site.com/node/83, then the logo shows up, but the other image does not. Same with images in some of my sidebar blocks (they are not layered, but do have classes).

When using Firebug on the blog/1 page, it seems JS is trying to get images from blog/sites/default/files/images which is "forbidden" (and a non-existent directory). Replace "blog" with "node" for other situations. Why are half of my images showing up, and the others not when I am in subdirectories? Or, what script is looking for these images in the wrong place and where might I find it and fix it?

I have Googled for hours and found no answer or understanding of this problem. I am somewhat new to both JavaScript and PHP and 2 months into Drupal. Thanks for any help.

Comments

Preceding slash

ar-jan commented 27 April 2012 at 23:22

Add a preceding slash to the image paths. When you put src="sites/default/files/images/header-news.jpg" the link is interpreted as relative to your current location, so if you're on /blog it will start creating the link from that path/directory. By adding a preceding slash like src="/sites/default/files/images/header-news.jpg" you get 'absolute' relative urls, i.e. urls starting at the top level no matter the current path.

Edit: this is the easiest/quickest way, some would say using absolute relative urls is actually not a best practice, and you should use something like Pathologic to have everything converted to full absolute urls, including the domain. You could also use the Media module...