16

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.

1
  • 1
    Why have you marked a wrong answer as right? Commented Jul 23, 2015 at 16:29

6 Answers 6

21

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.

Sign up to request clarification or add additional context in comments.

3 Comments

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.
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 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
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>

1 Comment

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.
19

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

Comments

4

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.

Comments

4

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 %}

1 Comment

note this will error if the item doesn't exist in static
-25

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

4 Comments

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 :)
@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.
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: /<static_prefix>/images/{{ image.title }}.png including the accolades which are treated like strings.
Just tried this and it didn't work, the {{ and }} were interpreted as %7B and %7D in the result

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.