load static file with variable name in django

Question

I'm trying to do load the following static file

 <a href="{%static 'static/images/'{{ image.title }}'.png' %}">img file</a>

where image is in a for loop of images derived from a database.

But I simply got an error Could not parse the remainder: '{{' from ''static/matrices/'{{'

What should I do to fix this? I can't use relative paths because this will be used by subsections as well, with the same html template.

Why have you marked a wrong answer as right? – dalore Jul 23 '15 at 16:29 — dalore, Jul 23 '15 at 16:29

dalore · Answer 1 · 2016-05-24T11:31:50.260

20

You should pass a full string to the static tag from staticfiles. This is so it can use your staticstorages to find your file.

{% load staticfiles %}
{% with 'images/'|add:image.title|add:'.png' as image_static %}
  {% static image_static %}
{% endwith %}

But in your use case it might be better if you just store the path of the images on the image model itself.

edited May 24 '16 at 11:31

answered Jul 23 '15 at 16:29

dalore

5,594
1
36
38

1

Welcome to Stack Overflow! While this answer is probably correct and useful, it is preferred if you include some explanation along with it to explain how it helps to solve the problem. This becomes especially useful in the future, if there is a change (possibly unrelated) that causes it to stop working and users need to understand how it once worked. – Kevin Brown-Silva Jul 23 '15 at 17:14
This also is what works best if you have to use javascript to set background images: `var backgroundImage = '{{ STATIC_PREFIX }}' + filename + '.png'`; and then `$('#selector').css('background-image', "url(" + backgroundImage + ")");` – ehacinom Dec 14 '18 at 23:15
1

ehacinom you didn't actually read it did you? no that's not how to do it in javascript correctly and make use of django static tags – dalore Feb 25 '19 at 13:34

score 19 · Answer 2 · answered Mar 13 '14 at 07:46

19

I got this to work by using an empty string for the static path and then using my variables in their own section, like this:

<a href= "{% static "" %}{{obj.a}}/{{obj.b}}/{{obj.c}}.gz" >Name</a>

answered Mar 13 '14 at 07:46

rounin

1,310
10
12

1

What's the point of the static tag then? Just use STATIC_URL. static tag is for when you have storages, it might change the name, for example hashed storage will put the md5 hash in the name. – dalore Jul 23 '15 at 16:26

score 18 · Answer 3 · edited Apr 16 '17 at 06:43

You can use get_static_prefix template tag. get_static_prefix is a variable that contains the path specified in your STATIC_URL. Your code would be:

{% load static %}
<a href="{% get_static_prefix %}static/images/{{ image.title }}.png">img file</a>

or

{% load static %}
{% get_static_prefix as STATIC_PREFIX %}
<a href="{{ STATIC_PREFIX }}static/images/{{ image.title }}.png">img file</a>

Reference: get_static_prefix

Hedde van der Heide · Answer 4 · 2013-08-04T08:23:30.150

You should avoid nesting tags.

What are you trying to solve? Isn't the image part of dynamic content? The static tag is for static content not uploaded media files.

If you must use the static tag the correct way would be something in the order of;

{% static image %} or {% static image.file %}

Depending on the object layout. If you're using an ImageField (inherits FileField) the image object already holds the path, so there's no need to manually add extensions.

Gesias · Answer 5 · 2014-05-19T11:50:40.867

What I ended up doing was to just split the path from the name itself. Those images represents tabs, are static and in a sequence. They are not connected to the database imagewise.

I didn´t want to repeat the html for every run so I ended up doing a forloop like this, a bit simplified.

{% for option in options_obj %}
   <img class="highlight" src="{% static "store/img/editor/tab-" %}
   {{ option.name.lower }}-selected.png">
{% endfor %}

EDIT: Even though this does work in most situations it can really mess stuff up as well. For me this occured when having different images for different language settings and at the same time using tools like CachedStaticFilesStorage. If you need to add language code or something else to your image this is a more solid solution

{% for option in options_obj %}
    <img class="highlight" src="{% static "store/img/editor/tab-"
    |add:LANGUAGE_CODE|add:"-selected.png" %}">
{% endfor %}

note this will error if the item doesn't exist in static – dalore Feb 25 '19 at 13:35 — dalore, Feb 25 '19 at 13:35

score -26 · Accepted Answer · answered Aug 04 '13 at 08:22

-26

Too many quotes!

Just

<a href="{% static 'images/{{ image.title }}.png' %}">img file</a>

and you don't have to call the static in the link because you already load the static

answered Aug 04 '13 at 08:22

catherine

22,492
12
61
85

that's ok... even the answer is correct you will really down vote it just to see you have the higher reputation. I don't like answering to many explanation, I like answering straight to the point :) – catherine Aug 05 '13 at 01:31
@HeddevanderHeide are you sure? did you try it? because I already try it many times. Your answer is also correct but sorry we have different minds and you can't force people to make the same of what you think. – catherine Aug 05 '13 at 10:16
6

Nesting tags does NOT work, within the `{%`-scope of a templatetag variables are already treated as such and do not require surrounding accolades. This has nothing to do with personal favor, your answer is simply incorrect. The output html would be: `//images/{{ image.title }}.png` including the accolades which are treated like strings. – Hedde van der Heide Aug 05 '13 at 11:26
8

Just tried this and it didn't work, the {{ and }} were interpreted as %7B and %7D in the result – Patrick Sep 08 '13 at 08:25

load static file with variable name in django

6 Answers6

Linked