linkages question

**Aravona** · 01-29-2010, 01:22 PM

I've got some files with links to images ( saved in an image folder within the folder of pages ) on my CSS files I can link to images easily with ' images/whatever.jpg '

But within my header php (in the same folder as my CSS pages) I have to link the entire site in order to get the images to show, images/whatever.jpg doesnt work has to be mysite.com/blah/blah/images/whatever.jpg - and its quite a long directory path. http:// and everything is needed.

Just curious as to why one file will accept the shorter path and the other wont?

**djr33** · 01-29-2010, 02:11 PM

There are three ways to link to files:
1. "Relative": images/file.jpg
2. "Absolute": http://example.com/images/file.jpg
3. short absolute: /images/file.jpg

The easiest to use is relative, but this also means knowing the RELATIVE location of the files. You can of course use a relative link from any page to any file, but it needs to be the correct relative location.

Absolute links are more annoying to use, so I would not necessarily recommend using them, but using the short form is a simple alternative. The first slash means "start at the main folder of the website then look for....". So basically it's a "relative" link, but based on the main folder of your site. So you might need: /gallery/images/img.jpg

And now about header.php:
Please include a link to your page so we can understand how it is setup.
If header.php is in a frame, then it should always be consistent and you can just find the correct relative path and use that.
If header.php is included into other pages using a server side method (like php's include() function), then it is "moving" each time it is added to a page. The code is stored in one location on your server, but it is always served to the user as part of another page-- that page may be in any directory. Because of this, any time you have an included file (like a header) in different pages, using absolute links is necessary. On the rest of the page you can use relative links, but the header will be changing it's "relativeness", so you need to predict that and use absolute links. Again, the "/..." format will be the easiest.

One final way around this (but not a good idea for a few reasons) is to change the "base" (relativity base) for a page.
In the head section you could put this code:
<BASE HREF="http://example.com/gallery/images/">

The problem with that, of course, is that it can be confusing to predict what will happen when you click a link (for users and for you), and it may not be supported by all browsers. It probably will be, but it's not guaranteed.
The other more immediate problem is that this means EVERY page on your site will be relative to that "base" href: so every link will be then relative to that instead of its own location.

Finally, remember something else: while most hrefs will be relative to the page, URLs within CSS files (external, not embedded into the html) are relative to that CSS file only.
If you call style.css from /index.php and from /gallery/images/index.php, then the links will still work because they are relative to style.css, NOT the pages.

The typical way to work out issues with links is:
1. If the link is only appearing in a single page, use a relative link.
2. If the link is appearing in multiple pages, multiple contexts, or anything else that changes, use an absolute link.

And of course if there is any reason you want to, you can always use absolute links-- that will never be a "problem", aside from the fact that if you change your site later you'll have to change all of them as well.

**Aravona** · 01-29-2010, 02:19 PM

Well I've not had this problem before with images, normally a broken link is me doing something wrong tho in this case I'm a bit confused as to why a relative link wasnt working.

this is the header:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

	<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>

	<style type="text/css" media="screen">
		@import url( <?php bloginfo('stylesheet_url'); ?> );
	</style>

	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
	<?php wp_get_archives('type=monthly&format=link'); ?>
	<?php //comments_popup_script(); // off by default ?>
	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="rap">
<h1 id="header"><img src="http://www.website.co.uk/aravona/blog/wp-content/themes/Test_newtheme/images/nav1.jpg" /></h1>
<div id="content">
<!-- end header -->

but what I wanted to use was this:

Code:

<body <?php body_class(); ?>>
<div id="rap">
<h1 id="header"><img src="images/nav1.jpg" /></h1>
<div id="content">
<!-- end header -->

but then I just got a broken link default image. But if it has to be absolute, fair enough its not a big problem it was more curiosity.

**djr33** · 01-29-2010, 02:42 PM

Right. Well, it looks like you are using PHP to embed pages of one file into another, and this can get complicated. You can change the relative URL if you want, but then it will only work when embedded into certain pages, because it will then not be the same "relative" location from that image. There is no easy way around it without the absolute path, no.

**Aravona** · 01-29-2010, 02:54 PM

Ok thanks for explaining it all too me (you wouldn't guess I've been coding g html since I was a kid and have a degree in it lol) Thanks for your time

**djr33** · 01-29-2010, 03:02 PM

This is one of those issues that is consistently a problem for everyone, whether novice or expert. The main issue is that it gets confusing to keep things relative (which seems nicer) once you end up with a complex system. The only other thing you could think about, since you obviously know PHP fairly well, is to actually generate a path using PHP. This is a bit more work than most people would go through, but it's possible and would give the "best" html output, though make things a little harder to setup in the first place.
Sorry if my reply seemed to oversimplify things, but from your first post it was hard to tell your experience, and in the end it's best to fully explain things in case someone else has the same problem later and doesn't have much of a background.

Last question: ignoring your complicated system, is it possible to link directly to the image? Since you do seem to know what you're doing, maybe there is actually something else going on here: could there be some very strange issue with file permissions or something that somehow doesn't allow relative links? I doubt it, but there's always a possibility, if you're convinced that no relative link will work (ignoring that the location changes-- just pick one page to test from and try to get it to work).

**Aravona** · 01-29-2010, 03:11 PM

If I understood you right (sorry its nearly home time for me lol) if I put the image in the same directory and try linking it just with name.jpg - no go. I'm working with wordpress systems now so and I've been working with them for 2 days total so I'm not sure if its something to do with wordpress or not, and if I do a relative it puts in other file path bits for me, so I think absolute is the only option

**djr33** · 01-29-2010, 03:47 PM

Well, by definition there must be some relative path, but the trick is to figure out where the page is being served from and where the image is stored. To avoid the complications within the code, do this: 1. go to the url for your page in wordpress. 2. go (directly) to the image file (in the browser). Then just compare the paths to find the relative location.
Again, the relative location may change if that code is ever accessed from different pages, but you should at least be able to make it work from a single instance of it (and maybe not the others if they're different). Putting it in the "same folder" does not necessarily mean it will be in the same relative location, because the page may be served from another location.
What matters for relative URLs is only what the browser things is happening: the server can do lots of things to URLs, but the browser is what parses the href info and goes to the image to find it.

Without a link to your page directly (not code this time), it won't be possible for me (or anyone else) to figure it out. But if your page is not available for some reason, you should be able to figure it out yourself-- just base this on the URLs, not the "location" in your directory structure.

Thread: linkages question

Thread Tools

Search Thread

linkages question

The Following User Says Thank You to djr33 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions