Django template not loading javascript and css properly due to urlpatterns - django

When this one runs everything goes fine:
(r"^newobject$", "views.myobjects.newobject"),
All the CSS + JS files are properly fetched from:
static/css/...
static/js/...
When this one runs:
(r"^mybjects/(([a-z]|[A-Z]|[0-9])+)$","views.myobjects.loadobject"),
All the css and JS files that are being fetched, are run trough the urlpatterns and are returning my defailt page:
(r"", 'views.main.index'),
This makes all my CSS and JS code to actualy be HTML. My guess is that i'm giving some noob mistake. Is there any common reason why this should happen? And how to fix it?
Edit:
Css example:
<link href="static/css/style.css" type="text/css" rel="stylesheet">
JS example:
<script src="static/js/libs/date.js" type="text/javascript"></script>

See the difference:
when you access *some url*/newobject the static/css/style.css refers *some url*/static/css/style.css*
when you access *some url*/newobject/whatever the static/css/style.css refers *some url*/newobject/static/css/style.css*
If your URL will always be floating around in depth, include your javascript and CSS using URLs relative to the server root (start them by /) instead of relative to the current dir.

Related

Flask does not loads css with url_for()

I am writing a flask web application that needs to have css. I have used the correct syntax, i think.
my web application is at its start and the css is simple too. I don't know why the flask won't load my css.
the code i used to link css to the html file
<link rel="stylesheet" href="{{url_for('static', filename='style.css')}}">
image contains file structure, code and localhost browser image
You are getting HTTP 404 errors trying to get /static/static/style.css. You have the line correctly in the question here, but in the Jinja template (on the screenshot), it reads:
<link rel="stylesheet" href="{{url_for('static', filename='/static/style.css')}}">
i.e. there's /static/ added in the filename. Remove it and make it read
<link rel="stylesheet" href="{{url_for('static', filename='style.css')}}">

django-photologue not loading CSS

I have setup django-photologue, and I am trying to get it to load the default templates. I can get the HTML file loaded, but it won't load any of the CSS (mainly just bootstrap)
When accessing photologue, I get the following error on the console:
Not Found: /photologue/gallery/css/bootstrap.min.css
[24/Aug/2018 13:42:52] "GET /photologue/gallery/css/bootstrap.min.css HTTP/1.1" 404 7311
This is odd to me, because I am almost certain that the css file is present.
This is the django code including the CSS file (taken from the photologue example project):
<link href="{{ STATIC_URL }}css/bootstrap.min.css" rel="stylesheet" media="screen">
The resultant HTML is:
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
No matter where I put the CSS file, I get a 404 error.
I have photologue templates in myapp/templates/photologue, because for whatever reason that's what worked.
The HTML I have there works fine, but the CSS just won't load. Not in it's own subfolder in the photologue templates directory, not as a subfolder in the myapp tempaltes directory, not as standalone files, not when I put them in the static folder....I've tried putting them in every possible location and reloading the site, and it makes no difference.
What can I do to make my template, which loads correctly, load and see CSS files?
edit: settings.py : https://pastebin.com/kRj21j3m
The issue here is that your server is looking for your css file here:
/photologue/gallery/css/bootstrap.min.css
Where it doesn't actually exist, hence the 404 error (file/page not found).
If you're using the base Django instructions for setting up a project, it is highly likely that your static files are found here:
/static/css/bootstrap.min.css.
Please make sure you have the following in your settings.py file:
STATIC_ROOT = os.path.join(BASE_DIR, 'public', 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
I also suspect that you may want this in your base.html file (or whichever template you're extending from):
{% load static %}
And then this in your template's head:
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet" media="screen">

Django: path to static file is wrong in generated HTML

I have some javascript that I would like to run on a particular page of a Django site I am building. In the template I currently have:
<script type='text/javascript' src='{% static "/home_page/github_repos.js" %}'></script>
The HTML that is generated by this is:
http://localhost:8000/home_page/github_repos.js
The problem is that I have the javascript in /static/home_page/.
If I hardcode in the path as:
<script type='text/javascript' src='static/home_page/github_repos.js'></script>
Everything works fine.
However, I am getting odd behavior that I do not understand:
If, in the template I set the path like this:
<script type='text/javascript' src='{% static "static/home_page/github_repos.js" %}'></script>
The HTML generate has a src attribute of /static/static/home_page/github_repos.js
The part that is really throwing me off is that if I do not put /static/ at the front of the src when using the template tags (like the first example I give), /static/ is not added, however, if I do add /static/ at the front, it gets added. I need /static/ added to the front of the src attribute, but only once.
Some relevant information:
My home_page app resolves to '/' as the url, so localhost:8000/ gets you to the home page.
I have included'django.contrib.staticfiles' in my installed apps
Finally, STATIC_URL = '/static/'
Is this problem occurring because my home_page app resolves to the root address of localhost:8000/?
Any help is appreciated.
This issue is because the path in the static tag should be relative to the static directory. From the docs:
Uses the configured STATICFILES_STORAGE storage to create the full URL for the given relative path
You're using an absolute path. Instead, you should use:
{% static "home_page/github_repos.js" %}
Note the omission of the leading forward slash.

Resource interpreted as Stylesheet but transferred with MIME type application/x-css:

I am trying to load css file in HTML template in python Django and getting this error
Resource interpreted as Stylesheet but transferred with MIME type application/x-css:
I am using Pydev , Eclipse, Django framework.
You need to give STATIC URL AND STATIC_ROOT values in settings file of django project and then create static folder inside your App folder. Place all your css and js files inside this folder.Now add this tag in your template {% load static %} and give location of css like <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}" />
Example
STATIC_URL='/static/'
STATIC_ROOT=os.path.join(BASE_DIR,"static")'
STATICFILES_DIRS=(os.path.join(BASE_DIR,'Get_Report','static'),)

Django URL Conf unable to find javascript file

I am learning Django and as an example I am trying to implement a small site that serves static pages. I am using django.contrib.flatpages app for the same. As part of this, I have a javascript file located in a directory. I am referencing this javascript file in my html page. Accordingly, I have configured the URL pattern in my project's URL Conf file as follows:
url(r'^tinymce/(?P<path>.*)$','django.views.static.serve',{'document-root':'C:/RAKESH/djangowork/cms/cms/templates/admin/flatpages/flatpage/tinymce'}),
But when I try to load the html page, the javascript file doesn't seem to be loaded. The following is the referencing code in my html file:
<script type="text/javascript" src="/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector:'textarea'
});
</script>
Can someone help me fix this problem?
Thanks,
Rakesh.
Don't add an extra URLconf for that! Use the standard way in Django to serve static (non-cms-editable) files: https://docs.djangoproject.com/en/dev/howto/static-files/
Place the tinymce folder inside a static folder in your app folder, then use in your template:
<script type="text/javascript" src="{% static "/tinymce/tinymce.min.js" %}"></script>