Image and stylesheet problem when using urlrewriter
I am using urlrewriter.net as recommended in several questions here. I am having difficulty displaying images and stylesheet.
I read ScottGu's blog (again as recommended here) and eventually he referencing this issue and claiming to be using ~ / server-side controls etc. ("Handling CSS and linking to an image correctly" at the end of the article).
I tried his solution and it doesn't seem to work.
The only thing that seems to work for me is to write the full path. For some reason this doesn't seem like the right solution to me. This will pose a serious problem for development and debugging.
Does anyone know what might be causing the problem? Is there something I need to change in the web.config file?
thank
I think you need to exclude your stylesheets and graphic directories from the overwrite engine. I'm not familiar with the engine you are using, but if you use a rewrite rule that is being rewritten based on a very broad rule, it will not point correctly to your stylesheets and images and, I assume, to javascripts.
You can also experiment with the base tag.
<base href="http://www.w3schools.com/images/" />
Try to put it in yours <head>
, pointing to the folder with images.
source to share
Secondly, I use the base href. Although you need to slim down a bit before the difference is when the site is running from the domain root i.e. production versus the visual studio server.
<base id="BasePath" runat="Server"/
>
then in the main code.
protected void SetBaseHref () {
if (Request.RawUrl! = Request.Url.PathAndQuery)
{
string baseUrl = "";
if (Request.IsSecureConnection)
baseUrl += "https://";
else
baseUrl += "http://";
baseUrl += Request.Url.Host;
if (Request.Url.Port != 80)
baseUrl += ":" + Request.Url.Port.ToString();
baseUrl += Request.RawUrl;
BasePath.Attributes.Add("HREF", baseUrl);
}
}
source to share
~ / will only work for tags that have runat = "server" attributes, because this tells asp.net to render the control.
eg.
<link href = "~ / mycss.css" type = "text / css" rel = "stylesheet" / ">
will not render as you expect because asp.net does not transfer control. You should use instead.
<link runat = "server" href = "~ / mycss.css" type = "text / css" rel = "stylesheet" / ">
Alternatively put the css link in your title tag eg.
<head runat = "server">
<link href = "~ / mycss.css" type = "text / css" rel = "stylesheet" / ">
</ head>
source to share
You can use this:
<a href="<% =GetBaseURL() %>/">Home</a>
public static string GetBaseURL()
{
string url =HttpContext.Current.Request.Url.Scheme + "://" + HttpContext.Current.Request.Url.Authority + HttpContext.Current.Request.ApplicationPath.TrimEnd(’/') + ‘/’;
//EPiServer’s url start with a / so remove the url if (when) it contains one
if(url.EndsWith("/"))
return url.Remove(url.LastIndexOf("/"));
else
return url;
}
The big problem with url rewriting is that it screw you up when using relative paths.
For example, if you have a file in the root of your application called page.aspx that is used for pages at multiple levels of navigation. eg.
Virtual Path => Physical Path
/ => /page.aspx?id=1
/food/banana => /page.aspx?id=2
Let's say you had a relative path in page.aspx to your css file that lives in /css/main.css
<link rel="stylesheet" href="css/main.css"/>
When page.aspx is executed from the context of / food / banana, the browser will try to find /food/css/main.css, which does not exist.
The way I do it is to sort the urls for images, CSS, JS and have an absolute link to your stylesheet (and img src and JavaScript). This way, you can ensure that the browser always finds it. Then, from your stylesheet, you can use relative paths for background images.
I found this method to be the easiest to maintain as you don't spend weeks trying to rewrite your links back.
source to share
I am having a problem with styles and images.
I didn't want to use Base Href's solution and fixed my problem with updating my relative paths to start with a single forward slash.
My setup
nopCommerceStore is used to create an online store.
nopCommerce uses the 'UrlRewritingNet.UrlRewrite' library to handle URL rewriting.
nopCommerce uses ASP.NET themes and skins to define the look and feel of your web store.
On the server side, you have the following folder structure:
root
root / App_Themes / darkOrange / base.css
root / app_Themes / darkOrange / cart-checkout-order.css
root / App_Themes / darkOrange / category.css
root / App_Themes / darkOrange / css / ie6.css (this file has been removed)
root / App_Themes / darkOrange / IMG / transparent_image_example.png
root / css / ie6.css
root / MasterPages / Root.Master
root / Default.aspx root / Category.aspx
When landing on the default page (browser requests http; // yourstore / default.aspx), your html source will contain the following html code:
<link href="App_Themes/darkOrange/base.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/darkOrange/cart-checkout-order.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/darkOrange/category.css" type="text/css" rel="stylesheet" />
...
The browser will fulfill the following requests:
HTTP; // yourstore / App_Themes / darkOrange / base.css
Http; // yourstore / App_Themes / darkOrange / cart checkout-order.css
HTTP; // yourstore / App_Themes / darkOrange / category.css
...
When you click on the "Books" category, the browser asks for http; // yourstore / Category / 29-books.aspx), your html source will contain the following html code:
<link href="../App_Themes/darkOrange/base.css" type="text/css" rel="stylesheet" />
<link href="../App_Themes/darkOrange/cart-checkout-order.css" type="text/css" rel="stylesheet" />
<link href="../App_Themes/darkOrange/category.css" type="text/css" rel="stylesheet" />
The browser will fulfill the following requests:
HTTP; // yourstore / Category /../ App_Themes / darkOrange / base.css
Http; // yourstore / Category /../ App_Themes / darkOrange / cart checkout-order.css
HTTP; // yourstore / Category /../ App_Themes / darkOrange / category.css
Transparent PNG in IE6
Everything works fine so far. To make the look consistent across all browsers, you need to load a specific IE6 stylesheet. I learned two important things:
Do not add the stylesheet to the App_Themes folder, but put it in a separate folder.
If you are linking to images, use relative paths that start with a single forward slash.
Stylesheets and "App_Themes" folder:
To apply a specific layout to the pages viewed in IE6, I created a new stylesheet and placed it in the "root / App_Themes / darkOrange / css" folder. In the file "root / MasterPages / Root.Master" I added the following lines of html code:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="/css/ie6.css" />
<![endif]-->
When the css file is placed in the "App_Themes" folder or in a subfolder under "App_Themes", it will be automatically referenced. This caused unwanted behavior in browsers other than IE6. IE6 layout was applied to the page and messed up the look of the page.
When landing on the default page (browser requests http; // yourstore / default.aspx), the server will parse the request. The resulting html source will contain the following html code:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="/css/ie6.css" />
<![endif]-->
But also the html contains the following line:
<link href="App_Themes/darkOrange/css/ie6.css" type="text/css" rel="stylesheet" />
All browsers will run the following request:
HTTP; // yourstore / App_Themes / darkOrange / CSS / ie6.css
IE6 will send an additional request (file will be fetched from IE cache):
HTTP; // yourstore / App_Themes / darkOrange / CSS / ie6.css
This was unwanted behavior, so I had to replace the "ie6.css" file with a new folder. It is now placed in 'root / css / ie6.css'.
Link to images, URL rewriting and relative paths:
To support transparent png images in IE6, the ie6.css file contains some css filter properties.
eg. One of the div selectors will include the following line of css code:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='../App_Themes/darkOrange/img/transparent_image_example.png');
When landing on the default page (browser requests http; // yourstore / default.aspx) IE6 will ask for:
HTTP; // yourstore / IMG / transparent_image_example.png
When you click on the "Books" category, the browser will ask for http: //yourstore/Category/29-books.aspx) IE6 will ask for:
HTTP; // yourstore / IMG / transparent_image_example.png
Both results result in "Page could not be found" (HTTP / 1.1 404 not found).
After replacement:
'../App_Themes/darkOrange/IMG/transparent_image_example.png
FROM
'/App_Themes/darkOrange/IMG/transparent_image_example.png
Everything worked fine.
This is because a relative path starts with a single forward slash. The browser interprets the URL as follows:
Does it start with 'http; //'? If so, it must be an absolute path; If not, it should be a relative path.
Relative paths:
Did it start with a single forward slash? If so, it should be an "absolute path reference"; If not, it should be a "relative path reference"
Note: See section 5, "Relative URI References" in Uniform Resource Identifiers (URIs): General Syntax ( http://www.ietf.org/rfc/rfc2396.txt ).
In case of URL rewriting:
The browser does not work when using relative path links (for example, "http; // yourstore / Category / 29-books.aspx" and "../App_Themes/darkOrange/img/transparent_image_example.png").
The browser will succeed when using "absolute path references" (for example, "http; // yourstore / Category / 29-books.aspx" and "/App_Themes/darkOrange/img/transparent_image_example.png ').
source to share