How do I link to a static image inside a css file? - python

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.

Related

cant load static file in django

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.

Setting my <img> source to a file path outside of flask static folder

I need to display some images and these image filepaths are outside of flask's static folder stored on on network folders.
<img src="{{ filepath }}"> # /some/external/network/folder/img.jpg
However this is not working and I get a broken image icon, however I can paste the image path into my browser and confirm its accessible. I need this application to be able to accept image sources from anywhere, so I can't update my static folder to the network folder. I also can't load the images to the server because there would be about 20,000+ photos.
Is there a way to get this to work?

Implementing HTML & CSS into Django

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

How can I added some sub html project to a django project

Now I have a django project and some small html project (in fact, some html5 games). How can I added the html site to the django project?
For the each html project has ref a lot of css, img and javascript in its own folder, and different html site are in different folder.
Hence, I can not now just do like this:
t = get_template('htmlprojectfolder/index.html')
html = t.render(Context())
return HttpResponse(html)
I think my problem is:
"how can I jump to a html index page with its static files correct linked?" (Clealy, I can not read just the index page as a template file.)
Thank you for help!
I think the best way to add static, non-Django files that shall be accessible via a Django project would be to add the files to the STATICFILES_DIR. You can read more about static files here in the Django documentation.
Another, and possibly better, way to handle this would be to let the webserver serve the static files separately from Django.

CherryPy configuration for CSS file access

The following is the result of CherryPy and css pathing problems I have recently posted, both of which have been answered, but another problem has arisen.
I have a html page which I preview in a browser (via. editor/IDE) and which calls a css file from a css folder in parallel with my application folder (containing main.py and My.html file). For this I use relative pathing in the html header...
<link rel="stylesheet" href="..\css\commoncss.css" type="text/css">
All good so far. However, when I run Main.py, the css file cannot be found, and the page looks a mess :-( The CP configuration file includes the following line...
tools.staticdir.root = "my\app\folder" # contains Main.py and My.html
but no other staticdir declarations because CP should be looking for ..\css\commoncss.css relative to the static root folder (am I right?)
I could have my CSS folder as a top-level folder (then I could use href="/css/commoncss" and declare /css as a staticdir), but that's ugly. Alternatively the CSS folder could be a subfolder of the app folder, but I really need the freedom to be able to put the .css file(s) in a different path if possible (could be common to more than one app.).
I really would like to crack this problem, because otherwise it means the html designer cannot use the same template as the Python programmer without changing the href directive.
Any help would be appreciated.
Alan
but no other staticdir declarations
because CP should be looking for
..\css\commoncss.css relative to the
static root folder (am I right?)
You can't reach into your physical file directory (static dir) via URLs, nor should you want to.
Cherrypy is looking for the css file relative to your HTML file in the URL hierarchy. If your HTML file is at root, then this won't work. If it's at, say: /stuff/blarg.html, then it would go down to the root and look for the css folder.
I think it's easier to just give an absolute path, because it's reasonable to stipulate that the css directory be in a known location: "/css/commoncss.css"

Categories