[Django]-Internationalizing images in django

You could create iso folders like:

/static/
  /img/
    /fr/
    /en/
    /us/

and create a template tag that returns a language iso prefix based on the locale setting, something like:

{% static "img"|append_i18n_prefix %}

In your template:

{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}

Then for the logo etc:

<img src="{{MEDIA_URL}}{{ LANGUAGE_CODE }}/logo.png" alt="" />

You could pass a language parameter to your page template and use it as part of your media file URL.

This would require you to host all media files for, e.g., English in a folder SITE_MEDIA/english, while other, e.g., Japanese images would be available from SITE_MEDIA/japanese.

Inside your page templates, you could then use {{MEDIA_URL}}{{language}}/my-image.jpg…

Approach I recommend is to have your base template (let’s say for example page.html) and then for the differences just extend that (i.e. page-fr.html)

Where the image needs to be different you have a template block, and then in the page-fr.html you can put in a different image in that block.

That way we support different languages if we have the image, but if we don’t have the translated image yet it still uses the normal template. You can even provided different text/layout for different languages (if you want or need, some languages have extremely long texts which can change the layout of labels).

Then in the view we have it try load page-[locale].html if it exists (and we can make it fallback to page-[lang].html for stuff like fr-ca) and then finally falling back to page.html if it exists.

Template page.html:

{% blocktrans %}Some text{% endblocktrans %}
{% block image_one %}<img src='{% static "image_one.png" %}'>{% endblock %}

template page-fr.html:

{% extends 'page.html' %}
{% block image_one %}<img src='{% static "image_one-fr.png" %}'>{% endblock %}

Then in your view:

context = {'data': data}
templates = ['page-fr.html', 'page.html']
return render(request, templates, context) 

You would replace the page-fr.html with some code that looked up the current language and did it. You could even make a simple template loader that would do this already (I would not be surprised if a django app hasn’t got one)

The advantages to this are:

• Usage of the static tag instead of media_url joining so all your static middleware works (like the hashed filenames)
• You can override anything, not just images
• The other techniques assumed the image would always exist for all locales, in this one it’s only used if you define it, and you know what images you have. If you don’t have the zh image yet for example, you can leave it as the english instead of getting a 404 (or if you have some, you can just do the ones you want).

I would really advise against the other answers here where you join up strings to produce the final content. You’re creating dynamic urls to static content. Big risk of creating a url that might 404 if you don’t have it. Also joining strings doesn’t give you access to the static middleware (so no long cached hashed urls). You can run the final string through the static tag after joining though, but if that static doesn’t exist it will have a server error which is worse.

Slight variation of Mikael’s answer using get_static_prefix:

{% load i18n static %}
{% get_current_language as LANGUAGE_CODE %}

<img src="{% get_static_prefix %}path/to/image_{{ LANGUAGE_CODE }}.svg">