HELP: BASE and LOCAL paths at the same time?

K

ksamdev

Hi,

I have a site of next structure:

js/...
css/...
img/...
pages/1/index.html
pages/1/img/...

The idea is that page

pages/1/index.html

uses some js,css,img from top folders and at the same time has a
number of images to be picked up from

pages/1/img/

folder. So, I tried to use BASE tag in head and specify path to my
site:

<base href='http://site'>

so that JS, CSS, etc. would be picked up in HEAD with LINK tag using
relative path. Very nice especially if I use another relative paths in
my JS scripts say for images.

But problem arises in index.html whenever I try to use any images from

pages/1/img

folder. There is a huge number of them and each time I specify
ABSOLUTE path which is definitely not a best solution. I'd like to use
at the same time relative to current page folder paths for these
resources.

Is there any way to use relative paths with BASE tag specified for JS,
CSS, etc. and somehow link local files from page folder at the same
time?
 
H

Harlan Messinger

ksamdev said:
Hi,

I have a site of next structure:

js/...
css/...
img/...
pages/1/index.html
pages/1/img/...

The idea is that page

pages/1/index.html

uses some js,css,img from top folders and at the same time has a
number of images to be picked up from

pages/1/img/

folder. So, I tried to use BASE tag in head and specify path to my
site:

<base href='http://site'>

so that JS, CSS, etc. would be picked up in HEAD with LINK tag using
relative path. Very nice especially if I use another relative paths in
my JS scripts say for images.

But problem arises in index.html whenever I try to use any images from

pages/1/img

folder. There is a huge number of them and each time I specify
ABSOLUTE path which is definitely not a best solution. I'd like to use
at the same time relative to current page folder paths for these
resources.

Is there any way to use relative paths with BASE tag specified for JS,
CSS, etc. and somehow link local files from page folder at the same
time?
Click to expand...

If I'm understanding your directory structure correctly, you don't need
a base tag at all. Use relative URLs of the form

/js/...
/css/...
/img/...
/pages/1/img/ OR 1/img/...
 
K

ksamdev

If I'm understanding your directory structure correctly, you don't need
a base tag at all. Use relative URLs of the form

  /js/...
  /css/...
  /img/...
  /pages/1/img/ OR 1/img/...
Click to expand...

Thank you for reply.

Your advice is perfectly correct.

The only reason for use of BASE element is that local version of web
site is used for development and access to it is done via base url:

http://localhost/~myuser/

Thus urls of type

/js/...
/css/...

won't work because they will be related to

http://localhost/

instead of desired

http://localhost/~myuser/

Now resetting BASE tag in pages adopts my web site to whatever server
I use.

http://localhost/
http://localhost/~user1/
http://mysite/
http://mysite/subsite/
etc.

At this point you may claim that appropriate APACHE setup with virtual
hosting would be solution (at least for local development) but I want
to stay with BASE solution if it is possible. Site would be self
contained and can be put to any host even in subfolder as in case with
example above:

http://mysite/subsite/
 
K

ksamdev

On 2008-12-14, ksamdev wrote:

...







   Use relative paths instead: js/..., ../css/..., etc.

--
   Chris F.A. Johnson, webmaster         <http://Woodbine-Gerrard.com>
   ===================================================================
   Author:
   Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Click to expand...

In that case my images within index.html won't be picked up from

pages/1/img

unless I specify full path including

pages/1/img

part like:

<img src='pages/1/img/...' />

Unfortunately in my real site implementation and folders hierarchy
this path is a little longer than that and I have several pages of
similar type:

pages/1/index.html
pages/2/index.html
etc.

each of which use their own set of images. # of images used per page
is about 30 to 50. So, specifying long path is tedious. That's why I
want to be able to use relative to given web-page path but at the same
time all CSS, JS common to the whole site should rely on path that is
related to:

http://localhost/~user/

or

http://mysite.com/

whichever I specify in BASE.
 
C

Chris F.A. Johnson

In that case my images within index.html won't be picked up from

pages/1/img

unless I specify full path including

pages/1/img

part like:

<img src='pages/1/img/...' />

Unfortunately in my real site implementation and folders hierarchy
this path is a little longer than that and I have several pages of
similar type:

pages/1/index.html
pages/2/index.html
etc.

each of which use their own set of images. # of images used per page
is about 30 to 50. So, specifying long path is tedious. That's why I
want to be able to use relative to given web-page path but at the same
time all CSS, JS common to the whole site should rely on path that is
related to:

http://localhost/~user/

or

http://mysite.com/

whichever I specify in BASE.
Click to expand...

If it doesn't work, it's because you are not specifying the correct
path.

If pages/1/index.html needs images in pages/1/img, the path is
img/xxx.jpg; if the images are in pages/img, the path is
../../img/xxx.jpg, etc.
 
K

ksamdev

  If it doesn't work, it's because you are not specifying the correct
  path.

  If pages/1/index.html needs images in pages/1/img, the path is
  img/xxx.jpg; if the images are in pages/img, the path is
  ../../img/xxx.jpg, etc.

--
   Chris F.A. Johnson, webmaster         <http://Woodbine-Gerrard.com>
   ===================================================================
   Author:
   Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Click to expand...

Here is an example of index.html that is kept at:

pages/1/index.html



<html>

<head>
<base href='http://localhost/~user/' >
<link href='./css/global.css' rel='stylesheet' type='text/css'>
<script type='text/javascript' src='./js/lib.js'></script>
</head>

<body>
<img src='img/1.png' />
</body>

</html>


1.png should be taken from:

http://localhost/~user/pages/1/img/

folder and NOT

http://localhost/~user/img/

one of solutions is to replace img tag with:

<imb src='./pages/1/img/1.png' />

Question: can I somehow omit this ./pages/1 in img src attribute?
 
K

ksamdev

  If it doesn't work, it's because you are not specifying the correct
  path.

  If pages/1/index.html needs images in pages/1/img, the path is
  img/xxx.jpg; if the images are in pages/img, the path is
  ../../img/xxx.jpg, etc.

--
   Chris F.A. Johnson, webmaster         <http://Woodbine-Gerrard.com>
   ===================================================================
   Author:
   Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Click to expand...

It won't work with path img/xxx.jpg because BASE tag of HEAD is
changing relative path of ALL paths in document. In my case BASE is
pointing to HTTP://LOCALHOST/~USER . So, browser attempts to download
xxx.jpg from http://localhost/~user/img/ folder instead of web-page
actual residence.
 
C

Chris F.A. Johnson

Here is an example of index.html that is kept at:

pages/1/index.html



<html>

<head>
<base href='http://localhost/~user/' >
<link href='./css/global.css' rel='stylesheet' type='text/css'>
<script type='text/javascript' src='./js/lib.js'></script>
</head>

<body>
<img src='img/1.png' />
</body>

</html>


1.png should be taken from:

http://localhost/~user/pages/1/img/
Click to expand...

Which is where it will be taken from if you use that relative URL.
folder and NOT

http://localhost/~user/img/

one of solutions is to replace img tag with:

<imb src='./pages/1/img/1.png' />
Click to expand...

No, it's not. If index.html is in pages/1, you are looking for
pages/1 in the same directory as index.html; it's not. It's in
img/ or ./img
Question: can I somehow omit this ./pages/1 in img src attribute?
Click to expand...

Of course, because it's wrong since pages/ is not in the directory
you're in.
 
K

ksamdev

   Which is where it will be taken from if you use that relative URL.



     No, it's not. If index.html is in pages/1, you are looking for
     pages/1 in the same directory as index.html; it's not. It's in
     img/ or ./img




     Of course, because it's wrong since pages/ is not in the directory
     you're in.

--
   Chris F.A. Johnson, webmaster         <http://Woodbine-Gerrard.com>
   ===================================================================
   Author:
   Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Click to expand...

Chris, BASE tag in head changes scope of all links of current
document !!!
http://www.w3.org/TR/html401/struct/links.html#h-12.4

That's why no matter where my web-page resides on server browser will
treat all relative urls with respect to what is specified in BASE.
 
K

ksamdev

Here is what I did after googling even though current solution is not
the best one.

Set BASE tag to site top folder and then specify all links with
respect to that link.

Anyway, please, continue this conversation especially in case you have
any ideas on implementation because I would really like to have a web-
site using both: links relative to BASE as well as ones relative to
local web-page folder.
 
K

ksamdev

Well, I don't think you can have it both ways. There isn't any way to
declare that URLs beginning with a slash are relative to one host while
URLs not beginning with a slash are relative to a path on a different host.

I have the same situation, where I work with a site that is actually a
virtual directory within a larger site, and the pages pull in common
files from the larger site. In addition, we are required to use relative
URLs to reference all resources on the greater site, not just the ones
within our subsite. So for development, we download the common files in
order to have a local copy.
Click to expand...

Thanks.
That is good but do you use relative paths with respect to HOST top
folder?
Say, if you have image:

http://host/img/image.png

and web-page

http://host/pages/index.html

then in index.html you put: src='./img/image.png' ?
 
K

ksamdev

  You do NOT need it if you use relative URLs. That is what is causing
  your problems.

--
   Chris F.A. Johnson, webmaster         <http://Woodbine-Gerrard.com>
   ===================================================================
   Author:
   Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Click to expand...

Try yourself with:

http://localhost/~chris/

and you'll see that ~chris/ part will be ignored because it is a part
of path and all relative uri's are treated with respect to host
(unless BASE tag is set). Then you'll understand that base tag is
needed.
 
K

ksamdev

Well, I don't think you can have it both ways. There isn't any way to
declare that URLs beginning with a slash are relative to one host while
URLs not beginning with a slash are relative to a path on a different host.

I have the same situation, where I work with a site that is actually a
virtual directory within a larger site, and the pages pull in common
files from the larger site. In addition, we are required to use relative
URLs to reference all resources on the greater site, not just the ones
within our subsite. So for development, we download the common files in
order to have a local copy.
Click to expand...

BTW, this is the exact behavior I found and was really disappointed.
Even HTML 4.01 specification defines that BASE overrides all relative
paths (I am not talking about frames, embedded objects or Flash...
those may have slight differences like CSS external files).

My intuitive feeling was:

./path/img.png treat with respect to BASE element
path/img.png '' '' '' local web-page
path

Unfortunately in both cases BASE is used (if it is set on page of
course) otherwise script current folder is taken as bases.
 
C

Chris F.A. Johnson

Try yourself with:

http://localhost/~chris/

and you'll see that ~chris/ part will be ignored because it is a part
of path and all relative uri's are treated with respect to host
(unless BASE tag is set). Then you'll understand that base tag is
needed.
Click to expand...

That is irrelevant. If you specify everything relative to the
current file, you do not need a BASE tag.

I have a few sites that I manage this way. On my local machine,
they are:

http://cj/cfaj.freeshell.org/
http://cj/torquiz.freeshell.org/
http://cj/woodbine-gerrard.com/

On the Web, they are

http://cfaj.freeshell.org/
http://torquiz.freeshell.org/
http://woodbine-gerrard.com/

They have no BASE tags. There is no difference between the local
files and the files on the Web.

All references are relative to the current file. The sites could be
moved anywhere and everything would still work.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Flip-Cards with Local Images 1
Help with Visual Lightbox: Scripts 2
New to coding - image to the time of day based on time 2
Help with my responsive home page 2
Help with code 0
Simple web framework - improvements to makefile 0
Having difficulty with the layout of these images / video for this web page 2
Help please 8

Staff online

Members online

Total: 44 (members: 2, guests: 42)
Robots: 323

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,012
Latest member
RoxanneDzm

Latest Threads

Top