Access relative CSS/JS files with htaccess rewrite rule

Question

I was recently asked if I could make my friends server address more user friendly. His current urls looks like this:

http://wwww.example.com/site/index.php?page=home
http://wwww.example.com/site/index.php?page=about/john
http://wwww.example.com/site/index.php?page=portfolio/concept-art/2013

He would like them to look like this

http://wwww.example.com/site/home
http://wwww.example.com/site/about/john
http://wwww.example.com/site/portfolio/concept-art/2013

which I thought would be pretty simple so I wrote this following rewrite.

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !/(admin|css|fonts|ico|include|js)/
RewriteRule ^([^_]*)$ index.php?page=$1 [L]

which seems to work for the basic links like

http://wwww.example.com/site/home

but for something like this

http://wwww.example.com/site/about/john

none of the css or js will load. So I fixed that for now by making all of the files absolute paths but I am worried that my friend is going to add a new plugin or something and forget that he has to make it an absolute path.

My Question

Is there something I could change or add in my htaccess file to get the css and js files to load with a relative path? If so what would I need to do?

anubhava · Accepted Answer · 2014-01-07 18:50:34Z

7

Better to use this rule:

RewriteEngine On
RewriteBase /site/

RewriteCond %{REQUEST_FILENAME} !/(admin|css|fonts|ico|include|js)/
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.+?)/?$ index.php?page=$1 [L,QSA]

Then for css/js/images better to use absolute path in your css, js, images files rather than a relative one. Which means you have to make sure path of these files start either with http:// or a slash /.

Alternatively You can try adding this in your page's header:

<base href="/" />

OR

<base href="http://domain.com/site/" />

answered Jan 7, 2014 at 18:50

anubhava

790k67 gold badges603 silver badges671 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Robert E. McIntosh Over a year ago

I can't believe I didn't even think of base always forget the basic HTML solutions. haha. I added a php function to auto generate the base in case he ever moves his site, but other than that this worked perfectly.

Jon Lin · Accepted Answer · 2014-01-07 18:51:54Z

2

Is there something I could change or add in my htaccess file to get the css and js files to load with a relative path? If so what would I need to do?

You could just add the proper relative URI base in your page header:

<base href="/site/" />

Or you could brute force redirect them using mod_rewrite (not preferable):

RewriteRule ^(.+)/(admin|css|fonts|ico|include|js)/(.*)$ $2/$3 [L]

answered Jan 7, 2014 at 18:51

Jon Lin

144k29 gold badges226 silver badges224 bronze badges

1 Comment

Robert E. McIntosh Over a year ago

I always forget to try the basic html solutions like base. haha.

Collectives™ on Stack Overflow

Access relative CSS/JS files with htaccess rewrite rule

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related