I copied a HTML page with many images and javascript codes.
I created the static folder and did everything that is needed, and when I'm tying to load the source with static tag such as:
<link rel="stylesheet" type="text/css" href="{% static 'styles/bootstrap4/bootstrap.min.css' %}">
I'm still getting an error:
GET http://127.0.0.1:8000/static/styles/bootstrap4/bootstrap.min.css net::ERR_ABORTED 404 (Not Found)
All it did is to add static in the url and I dont understand why?
I cant find how to load jinja in pycharm so my tags are white.
Have you looked at the Django Documentation?
Serving the files
In addition to these configuration steps, you’ll also need to actually serve the static files.
During development, if you use django.contrib.staticfiles, this will be done automatically by runserver when DEBUG is set to True (see django.contrib.staticfiles.views.serve()).
This method is grossly inefficient and probably insecure, so it is unsuitable for production.
See Deploying static files for proper strategies to serve static files in production environments.
Related
I'm trying to make my views.py point to a HTML page I've made that has embedded CSS, is this the best approach? I'm also running Django locally for testing purposes until it is moved to a production server how would I make local links to point to my HTML ?
https://docs.djangoproject.com/en/1.10/ref/settings/#templates
The default includes app/templates/ to your template paths and i would recommend to store your template files there.
Static files like .css and .js are served in similiar way
https://docs.djangoproject.com/en/1.10/howto/static-files/
The django test server also serves static files like css and js for you.
I would also recommend to move your css in one or more seperate .css files.
It helps you on the long run to keep your project clean.
1) In your views.py should be something like:
def my_view(request):
return render(request, 'my_html_page.html', {})
2) You should put 'my_html_page.html' to folder "templates/"
3) You should make folder "static" and put there you css file (i.e. styles.css)
4) in "my_html_page.html" you should link your css like this:
<link rel="stylesheet" href="***{% static 'styles.css' %}***" rel="stylesheet">
5) you should run command
python manage.py collectstatic
p.s. on production server you should install whitehoise
pip instal whitenoise
I am currently serving all of my static files through S3. I have a handy script that I wrote that will allow me to sync all my files up to S3. It will even gzip them before sending them along their way, changing their extensions all to .gz.
Here's the issue. Right now, when I want to load for example, my code looks like this:
<link href="{% static "sparestub/css/jasny-bootstrap.css" %}" rel="stylesheet">
Simple enough. On my local machine {% static %} pulls in a path to the local file system, and on my production machine, {% static %} pulls in a path to S3. But the moment I gzip all of the files in S3, changing all their extensions to .gz, {% static %} is going to return an invalid path containing the original extension.
What is the typical solution for this type of problem? Modify {% static %}? Is there another library that can help me out?
EDIT:
Or should I really just be gzipping the files and not changing the extension?
EDIT 2: This post here (Can someone walk me through serving gzipped files from Cloudfront via S3 origin?) suggests that I just gzip the files without renaming. So I did that. I can view the files in the S3 bucket using Amazon's web interface and can verify that they were successfully gzipped by looking at the HTTP header. The thing is now my app gets 403 errors whenever I try to load the files. argg.
I'm using custom fonts from Pixeden, which are similar to FontAwesome. For some reason, the custom font-faces are not rendering, though I've placed all of the necessary files in my static folder. How do you get custom fonts working on Heroku with Python?
I'm using Django Storages, Django Pipeline, and Amazon S3.
I'll reply because I have had this problem lately and I resolved it. If you are using a font for example from googleapis in your html page, just remove http: at the beginning, so inside <head> instead of:
<link href="http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
use:
<link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
This is an old question, but it might benefit someone who stumbles upon it:
The issue here is that you cannot import the fonts with good old insecure http. It will work for your local enviroment, but not on Heroku.
You should use https instead!
Do it like this:
<link href="https://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
I am using flask and Jinja templates. None of my CSS is being applied, except for bootstrap which is being downloaded from an external host.
Here is the line in my base template for my own stylesheet:
<link rel=”stylesheet” type=”text/css” href="{{ url_for('static', filename='style/stylesheet.css') }}">
And then when I open the page in chrome I can follow the link, and it opens up the file successfully. However when I look in the frames I cannot see my stylesheet under the stylesheets section:
Here is the request from the server: GET /static/style/stylesheet.css HTTP/1.1" 200 -
It looks likes it's not being recognized as a css file ? I'm not great with web stuff so hopefully this is something simple.
I have no idea what was happening here. This issue has been ongoing for days.
To fix it I simply copied the line that loads the CSS, saved my project, pasted it back in, and ran the server. Mass confusion.
For anyone else still having issues with this I found this that suggests the CSS is not being "hard refreshed".
I fixed this issue on my Mac in Chrome by holding down both ⌘ Cmd+⇧ Shift and pressing R.
newb to pyramid and python. I've been able to link to my static files successfully in any of my jinja2 templates, ie:
<link rel="stylesheet" type="text/css" href="{{'myproject:static/mycss.css'|static_url}}"></link>
The .css file loads fine and I can link to any images that are inside my static folder as long as I do it within the jinja template.
I'd like to use an image as a background but am having trouble linking to the image in my css file:
#mydiv{
background-image:url("{{'myproject:static/myimage.gif'|static_url}}");
}
This link shows up in mycss.css as
"{{'myproject:static/myimage.gif'|static_url}}"
and doesn't show up as a link. (if I load an externally hosted image as my background-image it works)
thx!
Your CSS file is a static file, and thus is not treated as a template. All static resources are served as-is, without any processing.
All non-absolute URLs in a CSS file are relative to the location from where the CSS file has been loaded; if you use background-image:url("myimage.gif"), the browser loads the image relative to your CSS file location. Since the CSS was loaded from http://yoursite/static/mycss.css, the image will be loaded from http://yoursite/static/myimage.gif.
Alternatively, if you referencing files from unusual locations (for example, images auto-generated by one of your views), you'll have to add your CSS file as a view instead, and render it with a (text) template.