Template filters in Flask

Introduction

Template filters help change how data looks before showing it on a webpage. They make your page easier to read and nicer to see.

You want to show a date in a friendly format like 'April 27, 2024' instead of '2024-04-27'.

You need to make text uppercase or lowercase before displaying it.

You want to shorten a long text to just a few words with '...'.

You want to format numbers with commas for thousands.

You want to safely show HTML content without breaking the page.

Syntax

Flask

{{ variable | filter_name }}

Use the pipe symbol (|) to apply a filter to a variable.

You can chain multiple filters like {{ variable | filter1 | filter2 }}.

Examples

This changes the text in name to all uppercase letters.

Flask

{{ name | upper }}

This rounds the number in price to 2 decimal places.

Flask

{{ price | round(2) }}

This shortens description to 20 characters and adds '...'.

Flask

{{ description | truncate(20) }}

This renders the HTML content in html without escaping it.

Flask

{{ html | safe }}

Sample Program

This Flask app shows how to use template filters to change text and numbers before showing them on the page. The user's name is uppercase, the balance is rounded to 2 decimals, and the bio is shortened.

Flask

from flask import Flask, render_template_string

app = Flask(__name__)

@app.route('/')
def home():
    user = {'name': 'Alice', 'balance': 12345.6789, 'bio': 'Loves programming and coffee.'}
    template = '''
    <h1>Hello, {{ user.name | upper }}!</h1>
    <p>Your balance is ${{ user.balance | round(2) }}</p>
    <p>About you: {{ user.bio | truncate(15) }}</p>
    '''
    return render_template_string(template, user=user)

if __name__ == '__main__':
    app.run(debug=True)

Important Notes

Filters are easy to chain for multiple changes.

You can create your own custom filters if needed.

Use filters to keep your templates clean and your Python code simple.

Summary

Template filters change how data looks in your webpage.

Use the pipe symbol (|) to apply filters in templates.

Common filters include upper, round, truncate, and safe.

Practice

1. What does the | upper filter do in a Flask template?

easy

A. Truncates the text to a specified length

B. Rounds a number to the nearest integer

C. Formats a date to a readable string

D. Converts the text to uppercase letters

Solution

1. Step 1: Understand the purpose of the upper filter

   The upper filter changes all letters in a string to uppercase.

2. Step 2: Compare with other filters

   Other filters like round, truncate, and date formatting do different tasks unrelated to letter case.

3. Final Answer:

   Converts the text to uppercase letters -> Option D

4. Quick Check:

   upper = uppercase text [OK]

Hint: Remember: upper means all caps text [OK]

Common Mistakes:

• Confusing upper with round or truncate
• Thinking upper formats dates
• Using upper on numbers expecting rounding

2. Which of the following is the correct syntax to apply the round filter to a variable price in a Flask template?

easy

A. {{ price | round(2) }}

B. {{ round(price, 2) }}

C. {{ price.round(2) }}

D. {{ price | round:2 }}

Solution

1. Step 1: Recall Flask template filter syntax

   Filters are applied using the pipe symbol | followed by the filter name and optional arguments in parentheses.

2. Step 2: Identify the correct syntax for round

   The correct syntax is {{ price | round(2) }}. Other options either misuse method call syntax or wrong separator.

3. Final Answer:

   {{ price | round(2) }} -> Option A

4. Quick Check:

   Filter syntax uses pipe and parentheses [OK]

Hint: Use pipe (|) then filter name with parentheses [OK]

Common Mistakes:

• Using dot notation like a method call
• Using colon instead of parentheses for arguments
• Calling Python functions directly inside templates

3. Given this Flask template snippet:

{{ 'hello world' | truncate(8) }}

What will be the output rendered on the webpage?

medium

A. hello w

B. hello wo...

C. hello worl

D. hello world

Solution

1. Step 1: Understand the truncate filter behavior

   The truncate(8) filter shortens the string to 8 characters including the ellipsis ....

2. Step 2: Calculate the truncated output

   It keeps 5 characters from the original string and adds ... to make total length 8: "hello wo" + "..." = "hello wo...".

3. Final Answer:

   hello wo... -> Option B

4. Quick Check:

   truncate(8) = 5 chars + ... [OK]

Hint: truncate(n) includes ... in total length n [OK]

Common Mistakes:

• Ignoring the ellipsis length
• Assuming truncate cuts exactly n characters
• Confusing truncate with slice or substring

4. What is wrong with this Flask template code?

{{ username | upper() }}

It causes an error when rendering. Why?

medium

A. The variable username must be a number for upper

B. The upper filter does not exist in Flask

C. Filters should not have parentheses when no arguments are passed

D. The pipe symbol | is missing

Solution

1. Step 1: Check filter usage syntax

   Filters without arguments should be used without parentheses, like {{ username | upper }}.

2. Step 2: Identify the cause of error

   Using parentheses without arguments causes a syntax error in Flask templates.

3. Final Answer:

   Filters should not have parentheses when no arguments are passed -> Option C

4. Quick Check:

   No parentheses for no-arg filters [OK]

Hint: No parentheses for filters without arguments [OK]

Common Mistakes:

• Adding empty parentheses to filters
• Thinking all filters require parentheses
• Confusing filters with Python function calls

5. You want to display a date variable post_date in your Flask template as "April 05, 2024". Which filter usage is correct to achieve this format?

hard

A. {{ post_date | date('%B %d, %Y') }}

B. {{ post_date | format_date('MMMM dd, yyyy') }}

C. {{ post_date | datetime('%B %d, %Y') }}

D. {{ post_date | strftime('%B %d, %Y') }}

Solution

1. Step 1: Identify the correct Flask template filter for date formatting

   The date filter formats dates using Python's strftime format codes.

2. Step 2: Match the format string to desired output

   The format '%B %d, %Y' produces "April 05, 2024". Other options use incorrect filter names or format styles.

3. Final Answer:

   {{ post_date | date('%B %d, %Y') }} -> Option A

4. Quick Check:

   Date filter + strftime format = {{ post_date | date('%B %d, %Y') }} [OK]

Hint: Use date filter with Python strftime format [OK]

Common Mistakes:

• Using non-existent filters like format_date
• Confusing JavaScript date formats with Python
• Using strftime filter which Flask does not provide