HELP: BASE and LOCAL paths at the same time?
 

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?

Re: HELP: BASE and LOCAL paths at the same time?
 

ksamdev wrote:
> 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?

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/...

Re: HELP: BASE and LOCAL paths at the same time?
 

On Dec 14, 12:21*pm, Harlan Messinger
<hmessinger.removet...@comcast.net> wrote:
> ksamdev wrote:
> > 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?
>
> 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/...

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/

Re: HELP: BASE and LOCAL paths at the same time?
 

On 2008-12-14, ksamdev wrote:
....
> 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/

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)

Re: HELP: BASE and LOCAL paths at the same time?
 

On Dec 14, 2:13*pm, "Chris F.A. Johnson" <cfajohn...@gmail.com> wrote:
> On 2008-12-14, ksamdev wrote:
>
> ...
>
>
>
> > 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/
>
> * *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)

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.

Re: HELP: BASE and LOCAL paths at the same time?
 

On 2008-12-14, ksamdev wrote:
> On Dec 14, 2:13 pm, "Chris F.A. Johnson" <cfajohn...@gmail.com> wrote:
>> On 2008-12-14, ksamdev wrote:
>>
>> ...
>>
>>
>>
>> > 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/
>>
>> Use relative paths instead: js/..., ../css/..., etc.
>
> 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.

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)

Re: HELP: BASE and LOCAL paths at the same time?
 

On Dec 14, 2:46*pm, "Chris F.A. Johnson" <cfajohn...@gmail.com> wrote:
> On 2008-12-14, ksamdev wrote:
> > On Dec 14, 2:13 pm, "Chris F.A. Johnson" <cfajohn...@gmail.com> wrote:
> >> On 2008-12-14, ksamdev wrote:
>
> >> ...
>
> >> > 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/
>
> >> * *Use relative paths instead: js/..., ../css/..., etc.
>
> > 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.
>
> * 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)

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?

Re: HELP: BASE and LOCAL paths at the same time?
 

On Dec 14, 2:46*pm, "Chris F.A. Johnson" <cfajohn...@gmail.com> wrote:
> On 2008-12-14, ksamdev wrote:
> > On Dec 14, 2:13 pm, "Chris F.A. Johnson" <cfajohn...@gmail.com> wrote:
> >> On 2008-12-14, ksamdev wrote:
>
> >> ...
>
> >> > 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/
>
> >> * *Use relative paths instead: js/..., ../css/..., etc.
>
> > 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.
>
> * 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)

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.

Re: HELP: BASE and LOCAL paths at the same time?
 

On 2008-12-14, ksamdev wrote:
> On Dec 14, 2:46 pm, "Chris F.A. Johnson" <cfajohn...@gmail.com> wrote:
>> On 2008-12-14, ksamdev wrote:
>> > On Dec 14, 2:13 pm, "Chris F.A. Johnson" <cfajohn...@gmail.com> wrote:
>> >> On 2008-12-14, ksamdev wrote:
>>
>> >> ...
>>
>> >> > 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/
>>
>> >> Use relative paths instead: js/..., ../css/..., etc.
>>
>> > 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.
>>
>> 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.
>
> 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/

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' />

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?

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)

Re: HELP: BASE and LOCAL paths at the same time?
 

On Dec 14, 3:10*pm, "Chris F.A. Johnson" <cfajohn...@gmail.com> wrote:
> On 2008-12-14, ksamdev wrote:
> > On Dec 14, 2:46 pm, "Chris F.A. Johnson" <cfajohn...@gmail.com> wrote:
> >> On 2008-12-14, ksamdev wrote:
> >> > On Dec 14, 2:13 pm, "Chris F.A. Johnson" <cfajohn...@gmail.com> wrote:
> >> >> On 2008-12-14, ksamdev wrote:
>
> >> >> ...
>
> >> >> > 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/
>
> >> >> * *Use relative paths instead: js/..., ../css/..., etc.
>
> >> > 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.
>
> >> * 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.
>
> > 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/
>
> * *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' />
>
> * * *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?
>
> * * *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)

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.