For example to load a static image, I need to do that in template in two lines, like this:
{% load staticfiles %}
<img src="{% static "img/pro_pic.png" %}">
Is there any way to do that in one line?
<img src="{% staticLoad( "img/pro_pic.png" ) %}">
and a function somewhere that checks {% load staticfiles %} is there or not, if not it loads and all that? I also encourage time complexity discussion if it can be done!
By default the django.core.context_processors.static context process is included in the TEMPLATE_CONTEXT_PROCESSORS setting so you can just write in your template:
<img src="{{ STATIC_URL }}img/pro_pic.png">
Related
I've been working on a simple Django project for myself and I came into a little problem.
When first developing the blog, I didn't make templates, I just made sure things were working properly, but now, I dived into making the templates and everything is working besides my header background-image.
Before the templates, I was doing it like this:
<header class="masthead" style="background-image: url({% static 'img/home-tech-bg.jpg' %})">
This was working just fine, but now that I'm trying to do the same as a template it doesn't work. It doesn't return me any errors, but the image doesn't display.
What I did was the following:
template base.html
<header class="masthead" style="background-image: url({% block headerimage %} {% endblock %})">
blog.html
{% load static %}
{% block headerimage %}
{% static 'image/image.jpg' %}
{% endblock %}
What is a better way to do this?
Well first off move your static directory to your root directory and write the path in the template like this:
{% load static %}
<img src="{% static 'img/home-tech-bg.jpg' %}" alt="/">
Also make sure your settings.py file is properly configured to serve static files, add this line if you havent yet:
STATIC_URL = '/static/'
I would like to use dynamic images based on a a pk of the page.
To be clearer I have a survey app, using one question per page .. which mean that the user is presented a question he answers and is redirected to the next question. Each question has a different id and I would like to attach to each question an image.
Right now I have a static image lik that :
<div class="col-5">
<img src="{% static 'images/RightSpeech.jpg' %}" class="img-fluid" alt="Responsive image">
</div>
but I would like to make it dynamic.. I tried something like that with no success:
<div class="col-5">
<img src="{% static 'images/image{{question.pk}}.jpg' %}" class="img-fluid" alt="Responsive image">
</div>
any idea ?
The static tag doesn't really do anything more than adding the value of STATIC_URL to whatever you pass it. Instead of messing about with all these tags, you could just do this manually:
<img src="{{ STATIC_URL }}/images/image{{question.pk}}.jpg"
If for some reason the static context processor isn't activated, you can use the {% get_static_prefix %} tag in exactly the same way:
<img src="{% get_static_prefix %}/images/image{{question.pk}}.jpg"
You need to use
{% static 'images/image'|add:question.id|add:'.jpg' %}
in order to get concatenate the question PK to the image name. This just makes use of the concatenation filter |add:.
EDIT 1
If the above does not work, you can try to use the {% with %} tag, so in your case:
{% with "images/image"|add:question.id|add:".jpg" as customUrl %}
{% static customUrl %}
{% endwith %}
Hope this helps!
I have a webpage which includes an image. I wish to cache bust that image using the ? technique. However, staticfiles encodes questionmarks as '%3F', so the path is no longer correct.
{% load staticfiles %}
<img src="{% static 'poll/img/test.jpg?v2' %}">
Gets compiled as.
<img src="/static/poll/img/test.jpg%3Fv2">
There is no test.jpg%3Fv2 file. So it doesn't show. Using static it works fine.
{% load static %}
<img src="{% static 'poll/img/test.jpg?v2' %}">
Get's compiled as expected. I want to use staticfiles rather than static as I serve my static files from a cloud service. Is there a way to prevent the encoding of my string path or a workaround of the problem?
To solve the encoding either write your own version of the static tag or simply move the parameters beyond the tag.
{% load staticfiles %}
<img src="{% static 'poll/img/test.jpg' %}?v2">
I want to show the user's image
I try with:
{% load static from staticfiles %}
<img src="{% static Logos/{{user.photo}}.png %}" />
and
{% load static from staticfiles %}
<img src="{% static Logos/{% user.photo %}.png %}" />
but I get this error:
TemplateSyntaxError at Could not parse the remainder
You can not have {{.. or {%.. within a {%..%}. Hence the error.
You can use get_static_prefix instead
{% load static %}
<img src="{% get_static_prefix %}{{user.photo}}.jpg" />
OR
STATIC_URL by including the appropriate context processor, which is django.core.context_processors.static
So the usage would be :
{{STATIC_URL}}{{user.photo}}.jpg
I'm trying to use the static template block tag in one of my template but I get an exception I don't understand.
Here is the template code:
<img src="{{STATIC_URL}}closed.png" alt="Closed message" />
<br/>
{% load static %}
<img src="{% get_static_prefix %}closed.png" %}" alt="Closed message"/>
<br/>
<img src="{% static "closed.png" %}" alt="Closed message"/>
The two first image display instructions work if I comment out the last one.
When the last one is uncommented I get an exception:
Invalid block tag: 'static'
The code is based on this django documentation section.
If someone is on > 1.3 and gets this issue, check your INSTALLED_APPS and make sure that 'django.contrib.staticfiles', is present. In your template include: {% load staticfiles %} and then use it as such:
//ensure the your syntax is correct
<link rel="shortcut icon" type="image/x-icon" href="{% static "assets/favicon.ico" %}?v=2" />
I ran into this problem because I had a syntax error and verified my setup as per django projects docs.
I had the same problem, and the problem turned out to be that I forgot to
{% load staticfiles %}
More about it at Django Documentation here
Are you using the development version? Most likely, you're using version 1.3, in which case you should be looking at this documentation instead.