Global Moxie

Question

Why are the images in my custom templates broken on some pages?

Answer

There's either a typo in the image URL in your template, or you're using a relative URL when you should be using an absolute URL. More on that in a sec.

Are your images where you say they are?

Images used in custom templates need to be loaded to your server outside of Big Medium. It's a tidy practice to keep your images in a single directory named, for example, "images":

http://www.example.com/images

Make sure that you have indeed uploaded your images to your server so that they exist where the image URL in your template says.

Use "absolute" URLs instead of "relative" URLs

An image tag with a relative URL might look something like this:

<img src="images/image.gif" />

...this tells the browser to look for a directory named images in the same directory where the page is located—that is, relative to the current page.

So in the case of a homepage at www.example.com, the browser will look for the images at www.example.com/images. But if the very same image tag is located at www.example.com/pages/page.html, the browser will instead look for the images in an entirely different directory (www.example.com/pages/images), because it's looking for the directory relative to the page's location, and the page is located in the pages directory.

The fix is to use an "absolute" URL, which either includes the full domain like so:

<img src="http://www.example.com/images/image.gif" />

...or has a slash in front of the directory name (as a kind of substitute for the full domain name), like so:

<img src="/images/image.gif" />