How to insert a jinja2 variable into an html element's attribute?

jinja2 set variable
jinja for loop
jinja dictionary
jinja2 map
jinja check if variable exists
jinja2 selectattr
jinja formatter
jinja2 cheat sheet

My question relates to creating a for loop using a python dictionary and jinja2. I want to use the value of each key/value pair as the source attribute for an element in HTML.

---HTML/jinja2---

{% for song, mp3 in song_dict.items() %}
        <li> {{ song }} :<audio controls> <source  src="{{ mp3 }}" type ="audio/mpeg"></audio>{{ mp3 }}</li>
{% endfor %}

python snippet:

def home():    
    song_dict = {"Pumba":'"static/PUMBA_1.mp3"', "You're Feet":'"static/youre feet mix 1.8.17_1.mp3"',
     "ratatatatata":'"static/ratatat.mp3"',
    "12 | 8":'"static/12_8 NO CLICK.mp3"', "Sage to Your Internet" : '"static/sage to your internet.mp3"',
    "EB":'"static/EB DEMO MIX NO CLICK.mp3"'}

    return render_template("pet_friend.html",
                            song_list = song_list,
                            song_dict = song_dict
                            )

I can get text to print after the audio player, but I cannot pass the path to the src attribute of the audio element.

Any help/suggestions would be greatly appreciated!

The path should be '/static/PUMBA_1.mp3' and not '"static/PUMBA_1.mp3"' (with a leading /)

But if you already store the files in a static folder, the easiest way to serve the files in jinja templates is to call this function : url_for('static',filename=your_file.mp3)

it creates a path automatically to your static folder and allows you to change it without modifying everything (so you can remove all 'static' in song_dict).


Jinja Template :

{% for song, mp3 in song_dict.items() %}
    <li>{{ song }}:<audio controls> 
                   <source src="{{ url_for('static',filename=mp3) }}" type ="audio/mpeg">
                   </audio>{{ mp3 }}</li>
{% endfor %}

View (without every "static/" and double ' "" '):

def home():
    song_dict = {"Pumba":'PUMBA_1.mp3', "You're Feet":'youre feet mix 1.8.17_1.mp3',
     "ratatatatata":'ratatat.mp3'}

    return render_template("pet_friend.html",
                            song_dict = song_dict
                            )

Template Designer Documentation, Adding a .jinja extension, like user.html.jinja may make it easier for some IDEs or Variables may have attributes or elements on them you can access too. today I’d like to show how to render an HTML (or any random non-binary) File with Jinja2 and Python 3.6. A possible usage for rendering an HTML file is the avoidance of writing duplicate code. I prepared a small HTML file which only consists of a headline and the variable.

Here is the code snippet.

<audio controls>
    <source src="{{ url_for('static', filename = filename) }}" type="audio/mpeg">
</audio>

Primer on Jinja Templating – Real Python, In this tutorial we take a look at Jinja2, a full-featured template engine for the Flask framework is used for outputting the results of an expression or a variable to the end user. The latter tag, when rendered, is replaced with a value or values, and is seen by the end user. Add a macros.html file to the templates directory:. How to assign block of HTML code to a JavaScript variable. Topic: JavaScript / jQuery Prev|Next. Answer: Use the concatenation operator (+) The simple and safest way to use the concatenation operator (+) to assign or store a bock of HTML code in a JavaScript variable. You should use the single-quotes while stingify the HTML code block, it would

To use dictionaries and lists in jinja, use it just like you do in python:

{{dictionary["key"]}}
{{mylist[index]}}

Will give the dictionary value where dictionary["key":"value"] and the item that is located on "index" respectively. Use "for" to loop through them as suggested on the other answers.

Jinja2 Documentation, It can generate any text-based format (HTML, XML, CSV, LaTeX, etc.). It doesn't Variables may have attributes or elements on them you can access too. For example to put Jinja syntax as example into a template you can use this snippet:. Jinja2 is a modern day templating language for Python developers. It was made after Django’s template. It is used to create HTML, XML or other markup formats that are returned to the user via an HTTP…

Basics of Jinja Template Language, When generating HTML from templates, there's always a risk that a variable will include characters that affect the resulting HTML. For example, consider this By default in Django, every template automatically escapes the output of every variable tag. Specifically, these five  The Low Level API on the other side is only useful if you want to dig deeper into Jinja2 or develop extensions. class jinja2.Environment ([options]) ¶ The core component of Jinja is the Environment. It contains important shared variables like configuration, filters, tests, globals and others.

The Django template language | Django documentation, Usually child templates extend from one template that adds a basic HTML skeleton. However it's possible to put the extends tag into an if tag to only extend from the layout Additionally it makes sense to define a default for that variable:. Jinja2 is a template engine written in pure Python. It provides a Django-inspired non-XML syntax but supports inline expressions and an optional sandboxed environment. It is small but fast, apart

Tips and Tricks, Use Flask to respond by rendering HTML instead of plain text; Use Jinja2 as a To do so we must include render_template when importing from flask . called index.html and we are passing some variables into the template. Let's imagine we are working in our index.html file and we would like an anchor tag to link to the  Probably the most popular aggregation filter is “join”, which just joins list elements into a single stream with elements separated by a given separator. There are a few more, but in general, when you need something more complicated, you either have to escape to a full Jinja2 template and do something custom in a “{% for %}” loop or