Django not displaying image in css - css

I have a django application.I have added image (url) in css,it isn't displaying the image.
But when I used it as a html file,it is displaying the image.Should I set any url in settings.py for this? Source [shown here][1]. [1]: http://dpaste.com/164620/

That is definitely a local path. You need either a path relative to the doc root (by default, Django doesn't serve media files, it's discouraged to let it do that outside testing environments) or an absolute URL if the file is on a different (sub-)domain (e.g. a local Apache vhost that serves the media files).
If you're using relative paths, beware that the path will be relative to the page the path is mentioned on (i.e. if you put it in a CSS file, it will be relative to the CSS file; if you put it in a template, it will be relative to whatever page is shown with that template).
If you're using absolute paths, beware that the path will be relative to the doc root of that (sub-)domain.
EDIT: NO, really. It's the path. A path in CSS or HTML will be parsed by your browser. So even if you run the thing on localhost, an absolute path (starting with /) will be parsed as relative to the document root (i.e. handed over to Django's URL resolution).
If you have the site running on http://localhost:8000, /home/logic/quote/template/hummingbirds.gif will be treated as http://localhost:8000/home/logic/quote/template/hummingbirds.gif, i.e. your browser will make a HTTP GET request to the server running at localhost:8000 for the path /home/logic/quote/template/hummingbirds.gif. If the server is Django, it will try to find a rule matching /home/logic/quote/template/hummingbirds.gif in your urls.py. You can't refer to a file in your filesystem by just passing the local path.
If you want to serve static files (e.g. images) with Django (i.e. on the same domain and port Django runs on), you need to configure it to serve these files first like so: http://docs.djangoproject.com/en/dev/howto/static-files/
If you want to refer to a file on your filesystem (BAD practice and needs to be replaced if the thing EVER goes online), you need to use the file:// protocol explicitly. Absolute URLs (i.e. without protocol prefix and domain name) will always be treated as relative to the current protocol and domain.

is /home/logic/quote/template/hummingbirds.gif your image web path? it look like a local path.
does it show when you type http://your.host/home/logic/quote/template/hummingbirds.gif
if you set a background-color, does the color appear?
suggestion:
on firefox with firebug:
enable css warning
lokks at the parsed css file (css tab) to see if your rule is well writen
inspect the element your background should be on and verify it has the css rule applied and not overwriten

Related

DRUPAL 7 - Clean URL and relative path : it's doesn't work

I start with Drupal and I have read some of topics about my problem but I didn't found the solution.
My problem is the following :
On my website (for the moment in localhost) I use Clean URLS module. The problem is when I enable this module and when I use the relative path of my files, my pictures or links don't work.
For example : src="./sites/default/files/styles/large/public/add_tool_version.png".My pictures are not visibles.. I don't know why this module doesn't work with the relative path.
But when I disable the module, the link is works fine.
Please, can an you help me ? Do you have any solution to fix it ?
Thanks in advance for your answers
Try using absolute paths. In you case with image it would be like:
src="/sites/default/files/styles/large/public/add_tool_version.png", without dot.
This absolute path will always refers to that image instead of relative path - it depends on you current directory or page.
The problem with clean urls is the way browsers read urls and interpret them as directions in a file directory. Lets say you are at http://www.example.com/?q=node/11, or, with clean urls enabled, at http://www.example.com/node/11.
When enabeling clean urls, and putting a link with a source into some node, your browser will search for your files in the folder that is specified in your url. Thus, when you declare the source to be sites/default/files/styles/large/public/add_tool_version.png and are on the url http://www.example.com/node/11, then the browser will look for the file in the directory node/11/sites/default/files/styles/large/public/. Usually this would work, but in drupal, there actually is no such folder. All drupal pages are just versions of the index.php in your base-directory. In drupal, the url doesn't have anything to do with file structure - unfortunately, the average browser doesn't know that.
Without clean urls, however, your browser will recognize the url as a combination of a base path (www.example.com) and a query (?q=node/11). It will therefore look for your file starting from the directory specified in your base path.
If you still want to have your relative paths working with clean urls enabled, you can use the function base_path() in front of your actual source.

How to handle stylesheet links when local and server directory structures don't match

The document root of my website is directly the server webroot (public_html), and not in a separate subdirectory. This creates a problem for me, because my local website is in a project folder (which is required by my editor, NetBeans), which means that href links to stylesheets need to be of the form:
/projectfolder/stylesheets/stylesheet.css
But on the server, since the website is directly in the webroot, the href url would have to be:
/stylesheets/stylesheet.css
When I asked my host about this, they said I would have to refactor my project to change all the stylesheet links. But I don't know; it seems kind of funny to have to refactor (then "unrefactor") the local website every time I want to upload it to the server. Any other solutions out there?
You don't have to use absolute paths to your stylesheets. Use relative paths instead. Then it won't matter where your files are hosted, so long as they stay in the same positions relative to each other.

IIS CustErr CSS Question

I'm trying to style the custom error pages in IIS7 with a linked CSS style sheet.
This works.
<html><head><title>404 - File or directory not found.</title>
<LINK href="http://stage.mysite.com/custErr/css/style.css" rel="stylesheet" type="text/css">
</head><body>Page Not Found</body></html>
I've created a virtual directory in mysite called custErr that contains the css and images needed.
But to make it easier to deploy I'd like to have it relative like this...
<html><head><title>404 - File or directory not found.</title>
<LINK href="../css/style.css" rel="stylesheet" type="text/css">
</head><body>Page Not Found</body></html>
After trying this I find that relative paths don't seem to work. In fact a style sheet in the c:\inetpub\custerr\en-US folder doesn't work either.
Where are these pages being served from?
Is there an easier way of doing this?
So I don't have to modify each and every absolute path for each environment?
I know this is a late reply but the reason why the relative paths don't work (I think) is because if you hosted a site such as www.myfavouritephotos.com and on visiting a directory on that site such as www.myfavouritephotos.com/images/ which is a directory in your website that doesn't have a default document like Default.aspx or whatever your site is set up as serving as a default page, IIS would return a HTTP Response of 404 for not finding a page to serve up or a 403 response because the user may not have the necessary rights to view the content of the directory under that url.
IIS by default would serve either the 404.htm or 403.htm file from within the c:\inetpub\custerr\en-US directory by default but when you replaced it with a custom htm file that replaces 404.htm, the relative path to the stylesheet you reference from that htm file would make a request at what the original url made to the server was so www.myfavouritephotos.com/images/(../css/style.css) which would result in an incorrect relative path so it may be able to be avoided by using a reference to a stylesheet with www.myfavouritephotos.com/css/style.css

getting base url of web site's root (absolute/relative url)

I want to completely understand how to use relative and absolute url address in static and dynamic files.
~ :
/ :
.. : in a relative URL indicates the parent directory
. : refers to the current directory
/ : always replaces the entire pathname of the base URL
// : always replaces everything from the hostname onwards
This example is easy when you are working without virtual directory. But i am working on virtual directory.
Relative URI Absolute URI
about.html http://WebReference.com/html/about.html
tutorial1/ http://WebReference.com/html/tutorial1/
tutorial1/2.html http://WebReference.com/html/tutorial1/2.html
/ http://WebReference.com/
//www.internet.com/ http://www.internet.com/
/experts/ http://WebReference.com/experts/
../ http://WebReference.com/
../experts/ http://WebReference.com/experts/
../../../ http://WebReference.com/
./ http://WebReference.com/html/
./about.html http://WebReference.com/html/about.html
I want to simulate a site below, like my project which is working on virtual directory.
These are my aspx and ascx folder
http://hostAddress:port/virtualDirectory/MainSite/ASPX/default.aspx
http://hostAddress:port/virtualDirectory/MainSite/ASCX/UserCtrl/login.ascx
http://hostAddress:port/virtualDirectory/AdminSite/ASPX/ASCX/default.aspx
These are my JS Files(which will be use both with the aspx and ascx files):
http://hostAddress:port/virtualDirectory/MainSite/JavascriptFolder/jsFile.js
http://hostAddress:port/virtualDirectory/AdminSite/JavascriptFolder/jsFile.js
this is my static web page address(I want to show some pictures and run inside some js functions):
http://hostAddress:port/virtualDirectory/HTMLFiles/page.html
this is my image folder
http://hostAddress:port/virtualDirectory/Images/PNG/arrow.png
http://hostAddress:port/virtualDirectory/Images/GIF/arrow.png
if i want to write and image file's link in my ASPX file i should write
aspxImgCtrl.ImageUrl = Server.MapPath("~")+"/Images/GIF/arrow.png";
But if i want to write the path hard coded or from javascript file, what kind of url address it should be?
The ~ operator is recognized by asp.net only for server controls and in server code. You cannot use the ~ operator for client elements.
Absolute and relative path references in a server control have the following disadvantages:
•Absolute paths are not portable between applications. If you move the application that the absolute path points to, the links will break.
•Relative paths in the style of client elements can be difficult to maintain if you move resources or pages to different folders.
To overcome these disadvantages, ASP.NET includes the Web application root operator (~), which you can use when specifying a path in server controls. ASP.NET resolves the ~ operator to the root of the current application. You can use the ~ operator in conjunction with folders to specify a path that is based on the current root.
As for the example you posted
aspxImgCtrl.ImageUrl = Server.MapPath("~")+"/Images/GIF/arrow.png";
the above code will render the server physical path (for example - c:\inetpub\wwwroot\mysite\images\gif\arrow.png" which is meaning less on the client side,
you should use this for correct client relative path:
aspxImgCtrl.ImageUrl = "~/Images/GIF/arrow.png";
To reference resources from javascript you may want to consider a one level folders structure to unify access paths. for example:
Pages
JS
Pix
etc...
For more details visit asp.net web site paths

What IIS 6.0 setting determines how a path is resolved?

I have a website that is deployed between 3 different environments - Dev, Stage, and Prod. For Stage and Prod, the site can resolve local paths to images with just the base url to the file, such as /SiteImages/banner.png. However, on the Dev server I have to hard code the full URL of the image path for the image to be resolved, such as http://server/folder/SiteImages/banner.png. Is there a setting I can flip to make the Dev server behave in the same manner as the other 2? I am using IIS 6.0 on a Win 2003 server.
There are usually three kinds of URIs that you can code in a website as far as I know.
Absolute: http://yoursite.com/somehing.jpg
This url includes the http:// and is
the full path to a resouce.
Root Relative:
/something/something.jpg
(In ASP.net
server-side only, you would use
'~/something/something.jpg')
This path is relative to the root of
your site.
File relative:
../something/something.jpg
This path
starts at the location of the file
that includes the URI. In this case,
it just back one directory (..) and
then goes back into the something
directory to look for something.jpg
What does the URL to the dev home page look like? Is it something like http://server/mydevsite/? If so, it sounds like you need to set up a virtual host.
Edit Just to clarify the above, say your prod and stage sites can be simply referenced as http://stagesite/ and http://prodsite/, if you use a path such as /images/myimage.jpg it assumes that the images folder are sitting in the root. In those two instances, no problem, images will display correctly. However, let's say your dev server is like the example I listed above. If your images are references as /images/myimage.jpg, instead of the server looking at http://server/mydevsite/images/myimage.jpg, it will instead look at http://server/images/myimage.jpg. If no images folder with the requested image exist in that server's root, you'll get an error.

Resources