.htaccess redirect, css/images no longer loading

Question

I have a simple HTML project sat on a hosting account in a folder called 'buddies', its full url looks something like this http://www.example.com/buddies/

I'm trying to re-write URL's to point to PHP files like this;

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ((?:css|images|js)/.*)$ /$1 [L]

# About Us
RewriteRule ^about_us/what_we_do/?$ about-what-we-do.php [NC,L]
RewriteRule ^about_us/mission/?$ about-our-mission.php [NC,L]
RewriteRule ^about_us/team/?$ about-team.php [NC,L]
RewriteRule ^about_us/what_next/?$ about-what-next.php [NC,L]

# Classes
RewriteRule ^classes/learn/?$ classes-learn.php [NC,L]
RewriteRule ^classes/1to1/?$ classes-one-to-one.php [NC,L]
RewriteRule ^classes/swim_fit/?$ class-swim-fit.php [NC,L]

# Information
RewriteRule ^information/timetable/?$ info-timetable.php [NC,L]
RewriteRule ^information/contact/?$ info-contact.php [NC,L]
RewriteRule ^information/location/?$ info-locations.php [NC,L]

This works great at redirecting to the URL to the correct PHP file, however in doing this it's broke the links to all images and css files. I understand why it's doing it, the css and images folders don't exist in the path 'about_us/what_we_do/'

If this was running in the root of the domain, I'd simply prepend a '/' to the front of all images/css files i.e. '/css/style.css' rather than how they're currently referenced 'css/style.css'.

Can someone suggest a way in which I can still server css, images and javascript from the folders 'css', 'images' and 'js'? Without me having to prepend the 'buddies' folder to each and every css/image reference.

EDIT: I'm referencing the stylesheet like this;

<!-- Stylesheet -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/style-768.css">
<link rel="stylesheet" type="text/css" href="css/style-992.css">

Olaf Dietsche · Accepted Answer · 2017-03-06 13:43:57Z

1

If all CSS files are in the directory /css, you can just rewrite each to this directory

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule (css/.*\.css)$ /$1 [L]

The RewriteCond is there to avoid a rewrite loop, if requests are for /css/....

Similar for images and Javascript files. You may even combine all into one rule, if you just look at the directories

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ((?:css|images|js)/.*)$ /$1 [L]

This looks for any request starting with either css/, images/ or js/.

If the CSS files are not in %{DOCUMENT_ROOT}/css, but %{DOCUMENT_ROOT}/buddies/css, the target must be prefixed accordingly, e.g.

RewriteRule ((?:css|images|js)/.*)$ /buddies/$1 [L]

edited Mar 6, 2017 at 13:43

answered Mar 6, 2017 at 12:32

Olaf Dietsche

74.4k9 gold badges113 silver badges214 bronze badges

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

3 Comments

SheppardDigital Over a year ago

I prefer the second approach but sadly even with that it still doesn't work. I've updated the code in my original question.

Olaf Dietsche Over a year ago

Where are the CSS files located? Is it /css/style.css or maybe /buddies/css/style.css?

SheppardDigital Over a year ago

they're located at /buddies/css/style.css

Mark Valenzuela · Accepted Answer · 2017-03-06 12:09:55Z

1

Use <base href="http://www.example.com/">so it will redirect your external files to that directory.

answered Mar 6, 2017 at 12:09

Mark Valenzuela

3681 silver badge10 bronze badges

1 Comment

SheppardDigital Over a year ago

This solution does work, however I'd like to avoid adding code to every page, and rather have it managed in a single file (.htaccess) if I can to ease maintenance.

Collectives™ on Stack Overflow

.htaccess redirect, css/images no longer loading

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related