Forums

mintertweed

Currently, my HTML uses absolute file paths because I can not seem to get the hang of relative file paths. For instance, on my Contact page, I use absolute file paths for all of the images, which looks like this:

<img src="http://www.mintertweed.com/wp-content/themes/starkers/images/social-rss.png">

How do I make a relative file path that is a bit more manageable. I know that you can do things like images/, ./images/, or ../images/, but I am a bit confused on which one I should use, because I tried them all and none of them seem to work. In my CSS, I can use relative file paths just fine:

header {
  background-image: url(images/header-rainbow.png);
}

But it does not seem to be that easy in HTML. Any help would be greatly appreciated. Thank you.

TheDoc

src="/image.jpg" == the root folder of the website

src="image.jpg" == same folder as current page

src="../image.jpg" == one folder up from current page

src="../../image.jpg" == two folders up from current page, etc

In your first example, you could do two different things:

  <img src="/wp-content/themes/starkers/images/image.jpg">

Or,

  <img src="<?php bloginfo('template_directory'); ?>/images/image.jpg">

The relative files in your CSS file work fine because your CSS file is located in wp-content/themes/starkers/ and your images/ folder is in that same directory.

Eric

Also. Instead of saying ../images you can often simply say /images. That mean start at the root.

mintertweed

Thank you muchly, kind sirs. @TheDoc, thanks for explaining the different steps for img src.

treehouse : what would you like to learn today?

Forums

[Solved] Absolute VS. Relative File Paths