Seo Friendly URL results in CSS IMG and JS not working - php

I want to make my URL as SEO Friendly URL. I tried editing .htaccess file by rewriting rule
RewriteRule ^swift-details/([0-9]+)/([0-9a-zA-Z_-]+)$ swift-details.php?id=$1 [NC,L]
RewriteRule ^swift-details/(css|js|img)/(.*)?$ /$1/$2 [L,QSA,R=301]
It's routing the correct URL but in that page CSS JS and images are not working.
Example URL:
http://www.example.com/swift-details/2/abblinbb

This is because your relative URIs have their base changed. Originally, the base is / when the page is /swift-details.php?id=foo, and the browser properly fills in relative links with the / base. But when the browser goes to a page like /swift/details/foo the base suddenly becomes /swift/ and it tries to append that in front of all relative URLs and thus none of them load.
You can either make your links absolute, or change the URI base in the header of your pages (inbetween the <head> </head> tags):
<base href="/">

You dont need the second rewrite rule. Your CSS/JS paths are all 'relative' to your current location.
Your CSS exists here:
/css/normalize.css
Your page is looking here:
/swift-details/2/abblinbb/css/normalize.css
All you need is 'forward-slashes' before your CSS/JS paths.

Related

while removing php extention in url it's not loading css files [duplicate]

I want to make my URL as SEO Friendly URL. I tried editing .htaccess file by rewriting rule
RewriteRule ^swift-details/([0-9]+)/([0-9a-zA-Z_-]+)$ swift-details.php?id=$1 [NC,L]
RewriteRule ^swift-details/(css|js|img)/(.*)?$ /$1/$2 [L,QSA,R=301]
It's routing the correct URL but in that page CSS JS and images are not working.
Example URL:
http://www.example.com/swift-details/2/abblinbb
This is because your relative URIs have their base changed. Originally, the base is / when the page is /swift-details.php?id=foo, and the browser properly fills in relative links with the / base. But when the browser goes to a page like /swift/details/foo the base suddenly becomes /swift/ and it tries to append that in front of all relative URLs and thus none of them load.
You can either make your links absolute, or change the URI base in the header of your pages (inbetween the <head> </head> tags):
<base href="/">
You dont need the second rewrite rule. Your CSS/JS paths are all 'relative' to your current location.
Your CSS exists here:
/css/normalize.css
Your page is looking here:
/swift-details/2/abblinbb/css/normalize.css
All you need is 'forward-slashes' before your CSS/JS paths.

Failed to attach all styles, scripts etc, Router and .htaccess [duplicate]

I want to make my URL as SEO Friendly URL. I tried editing .htaccess file by rewriting rule
RewriteRule ^swift-details/([0-9]+)/([0-9a-zA-Z_-]+)$ swift-details.php?id=$1 [NC,L]
RewriteRule ^swift-details/(css|js|img)/(.*)?$ /$1/$2 [L,QSA,R=301]
It's routing the correct URL but in that page CSS JS and images are not working.
Example URL:
http://www.example.com/swift-details/2/abblinbb
This is because your relative URIs have their base changed. Originally, the base is / when the page is /swift-details.php?id=foo, and the browser properly fills in relative links with the / base. But when the browser goes to a page like /swift/details/foo the base suddenly becomes /swift/ and it tries to append that in front of all relative URLs and thus none of them load.
You can either make your links absolute, or change the URI base in the header of your pages (inbetween the <head> </head> tags):
<base href="/">
You dont need the second rewrite rule. Your CSS/JS paths are all 'relative' to your current location.
Your CSS exists here:
/css/normalize.css
Your page is looking here:
/swift-details/2/abblinbb/css/normalize.css
All you need is 'forward-slashes' before your CSS/JS paths.

Redirect to dynamic relative paths with .htaccess and php? [duplicate]

I want to make my URL as SEO Friendly URL. I tried editing .htaccess file by rewriting rule
RewriteRule ^swift-details/([0-9]+)/([0-9a-zA-Z_-]+)$ swift-details.php?id=$1 [NC,L]
RewriteRule ^swift-details/(css|js|img)/(.*)?$ /$1/$2 [L,QSA,R=301]
It's routing the correct URL but in that page CSS JS and images are not working.
Example URL:
http://www.example.com/swift-details/2/abblinbb
This is because your relative URIs have their base changed. Originally, the base is / when the page is /swift-details.php?id=foo, and the browser properly fills in relative links with the / base. But when the browser goes to a page like /swift/details/foo the base suddenly becomes /swift/ and it tries to append that in front of all relative URLs and thus none of them load.
You can either make your links absolute, or change the URI base in the header of your pages (inbetween the <head> </head> tags):
<base href="/">
You dont need the second rewrite rule. Your CSS/JS paths are all 'relative' to your current location.
Your CSS exists here:
/css/normalize.css
Your page is looking here:
/swift-details/2/abblinbb/css/normalize.css
All you need is 'forward-slashes' before your CSS/JS paths.

Page resources fail to load when removing '/' slash from URL upon .htaccess redirect

I have a simple redirect rule as follows:
Options +FollowSymLinks
RewriteEngine On
RewriteRule ^contact-us\/?.*$ ./contact-us.php [NC,QSA,L]
This rule works fine for the following URL:
http://localhost/folder1/folder2/folder3/contact-us/
The problem is that if I remove the final slash, the page loads properly but the resources (css/js) are not loading
http://localhost/folder1/folder2/folder3/contact-us ----> This fails
It seems it is omitting a folder when trying to load the resources so rather than http://localhost/folder1/folder2/folder3/js/jquery.js, the URL for the JS resource is being set as http://localhost/folder1/folder2/js/jquery.js
Is there a concept missing here with the rules? How to make both URLs work?
This is happening due to your use of relative paths in js/css etc.
To fix, you can add this just below <head> section of your page's HTML:
<base href="/folder1/folder2/folder3/" />
so that every relative URL is resolved from that base URL and not from the current page's URL.

Apache Rewrite URL Creating Linking Issues

Problem: rewrite url causing some links to break.
.htaccess has below rule:
RewriteRule ^blog/([0-9]+)/[-0-9a-zA-Z]+$ index.php?action=blog&postID=$1\%23disqus_thread [NC]
Style sheet reference in header template:
<link rel="stylesheet" type="text/css" href="style.css" />
I can click on:
domain.com/blog/1/title-of-article and get to the file just fine, but style sheet link breaks
If I go directly to:
domain.com/index.php?action=blog&postID=1#.UYV1mcqRiSo then the style sheet loads fine (ignore #.UYV1mcqRiSo, that is code from Disqus).
This is also breaking my logo link, which is:
<a href="./">
Instead of taking me to domain.com, it's going to domain.com/blog/1/
My basic file structure is:
index.php and style.css is in root, which loads up viewPost.php in/templates folder.
What is going and how do I correct this?
1. About the stylesheet link
You have to include these conditions in your .htaccess before the rewrite rule:
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
The first means that rewrite rules work only if the requested URL is not to an existing file, and the second does the same for existing directories. Without these conditions the request for style.css is also passed to your index.php file, not to the style.css file directly.
If you have these rules already and it still doesn't work then the problem is with URL paths, see below.
2. About URL paths
You're using relative URLs in your links, both in the <a href="./"> and in the <link> tag. In this case they are resolved to the current directory of the URL (it doesn't matter that it's rewritten to the same file serverside, the path is prepared on the client side and every part separated with a slash / is treated as a directory. Thus if the current URL is domain.com/blog/1/, ./ is resolved to domain.com/blog/1/.) The path to style.css may be resolved to domain.com/blog/1/style.css. If you want these links work as if they're directly after the domain name in the URL, you have to use absolute URLs, i.e., / without the dot for the link on your logo; /style.css for the stylesheet link.
Easiest solution: Just set your links relative to the domain root, by fronting them with a slash (resp. removing the dot referring to the current folder in the link):
<link rel="stylesheet" type="text/css" href="/style.css" />
Logo

Categories