This is how I've referenced it.
{% load static %}
<link href="{% static 'Assets/img/globe.png' %}" rel="icon" />
I used a .jpg image and it’s now showing up. Still don’t know why a .png image is not working my head tag because they’re working in the body tag
Related
I'm totally a newbie to Django-Python.
So, whenever I include my tag like this,
<noscript>
<link rel="stylesheet" type='text/css' href="{% static 'homepage/css/style.css'%}" />
</noscript>
Browser doesn't take the code in noscript tag. Whereas, if I load that HTML file independently, there are no issues with the same browser.
Tried different ways,
<script>
var url = "{% static 'homepage/css/style' %}";
</script>
Didn't help though!
Please push me to pass through this bump!
Many thanks!
I'm working on an email template, therefor I would like to embed a css file
<head>
<style>{{ embed 'css/TEST.css' content here }}</style>
</head>
instead of linking it
<head>
<link href="{% static 'css/TEST.css' %}" rel="stylesheet" type="text/css">
</head>
Any ideas?
I guess you could use include
<style>{% include "/static/css/style.css" %}</style>
https://docs.djangoproject.com/en/1.9/ref/templates/builtins/#include
But it might be better to load the contents of the css file in your view, and put it in the context of your view to send it to the template
You can use django-compressor package. It will add {% compress %} template tag that can join together bunch of JS or CSS files (or inlined code) and put it into template as new, big file or inlined code. For example to inline one CSS file, you can use:
{% compress css inline %}
<link href="{% static 'css/TEST.css' %}" rel="stylesheet" type="text/css">
{% endcompress %}
You can add more CSS files into one compress tag, they will be concatenated together and wrapped into one <style>tag.
Check usage examples for more details.
On solution would be the use of include:
<head>
<style>{% include "../static/css/TEST.css" %}</style>
</head>
But it is kind of messy!
You have to place a copy or link to your css-file in your templates directory. Or you use a hardcoded link as above, which may break in production.
So with flask I know that I can add CSS with
<link ... href="{{ url_for('static', filename='stylesheets/style.css') }}" />
but if I am adding a google font which usually in HTML looks like
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
what do I need to edit/add for it to work with Flask?
Add the google font link to your index.html or any page that you want like this:
{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block styles %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename= 'mystyle.css') }}">
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
{% endblock %}
Then, add the CSS font statement to your custom CSS file (mine is static/mysyle.css) :
body {
font-family: 'Open Sans Condensed', sans-serif;`
}
You can't use static here like you would normally for a link to a resource on the webserver. Your link is still essentially static but not related to anything you are serving. So you either put the Google font link directly in the HTML template, or as a variable expanding to the full link (which would be convenient if you aren't using the same header template everywhere and may change the font later).
I am having a problem where when I try to run my website through the runserver command, it doesnt display any of the images.
(I am very new to django, and website building at all)
this is the html in the template:
< img src="../../../static/Website_header.png" width="800" height="200" alt=""/> (without the whitespace)
and this is the settings.py:
http://pastebin.com/KvdrF1L2
Edit: When I tried to click display image in new tab this was shown: http://imgur.com/EgXw4bw
You should not have direct links to your static files.
On top of your template:
{% load staticfiles %}
Your image tag:
<img src="{% static 'images/test.png' %}" />
"images/test.png" is addressed relative to your static folder:
static
------ images
------------ test.png
I currently have twitter bootstrap incorporated on my Django test site but it is not working properly.
I tested out an example of code on the bootstrap website: http://getbootstrap.com/2.3.2/components.html#labels-badges
All I had on the site is the success badge (green oval with a 2 in the middle)
<span class="badge badge-success">2</span>
However, only the oval and the "2" would be displayed but the green color round the "2" is not displayed. All I see is a grey oval with a "2" inside. Pretty much the same as the DEFAULT badge on the bootstrap website except there is a "2" instead of a "1".
I was wondering if anyone with Django and twitter bootstrap experience would help me with this issue.
Here is my views.py:
from django.http import HttpResponse
from django.template import RequestContext, loader
from django.shortcuts import render, render_to_response
def index(request):
return render(request,'homepage/index.html')
Here is my html file:
{% load staticfiles %}
{% load compressed %}
<!DOCTYPE html>
<head>
{% compressed_js 'bootstrap' %}
{% compressed_css 'bootstrap' %}
</head>
<html>
<body>
<span class="badge badge-success">2</span>
</body>
</html>
Thank you for all the help! much appreciated!
I think your compressed_js and compressed_css does not do the trick.
To check if everything is ok, use for exemple FireBug, then press F12 and point your mouse on the badge to see if the CSS rule is display on the left panel. Repeat this step for badge-success to try to find it.
After all of this i'll suggest a more classical way without compressed_xxx :
<link rel="stylesheet" href="{% static "bootstrap/css/bootstrap.min.css" %}" type="text/css" media="screen" />
<link rel="stylesheet" href="{% static "bootstrap/css/bootstrap-responsive.min.css" %}" type="text/css" media="screen" />
where bootstrap is the folder I put in the static one I setup in the settings.py file
Hope this will be usefull.