Template filters in Flask - Step-by-Step Execution

Concept Flow - Template filters

Define filter function

↓

Register filter with Flask

↓

Render template

↓

Template engine finds filter

↓

Apply filter to variable

↓

Display filtered output

This flow shows how a custom filter is defined, registered, and then used in a Flask template to transform data before display.

Execution Sample

Flask

from flask import Flask, render_template_string
app = Flask(__name__)

@app.template_filter('reverse')
def reverse_filter(s):
    return s[::-1]

@app.route('/')
def home():
    return render_template_string("{{ 'hello'|reverse }}")

This code defines a custom filter 'reverse' that reverses a string, registers it with Flask, and uses it in a template to display 'olleh'.

Execution Table

Step	Action	Input	Filter Applied	Output
1	Define filter function	'hello'	reverse	Function ready
2	Register filter with Flask	reverse_filter	reverse	Filter registered
3	Render template	'hello'	reverse	Template engine starts
4	Find filter in template	'hello'	reverse	Filter found
5	Apply filter to variable	'hello'	reverse	'olleh'
6	Display filtered output	'olleh'	none	'olleh' shown on page
7	Exit	N/A	N/A	Rendering complete

💡 Rendering completes after filter application and output display.

Variable Tracker

Variable	Start	After Step 5	Final
s	'hello'	'hello'	'hello'
filtered_s	N/A	'olleh'	'olleh'

Key Moments - 3 Insights

Why do we need to register the filter with Flask?

Because Flask needs to know about the filter function to use it in templates, as shown in step 2 of the execution_table.

What happens if the filter name used in the template does not match the registered filter?

The template engine will not find the filter (step 4), causing an error or no transformation.

Does the filter change the original variable?

No, the filter returns a new transformed value (step 5), leaving the original variable unchanged.

Visual Quiz - 3 Questions

Look at the execution table, what is the output after applying the filter at step 5?

A 'HELLO'

B 'hello'

C 'olleh'

D 'error'

💡 Hint

Check the 'Output' column at step 5 in the execution_table.

At which step does Flask register the custom filter?

A Step 2

B Step 1

C Step 4

D Step 6

💡 Hint

Look for the 'Register filter with Flask' action in the execution_table.

If the filter function returned s.upper() instead of s[::-1], what would be the output at step 5?

A 'olleh'

B 'HELLO'

C 'hello'

D 'Error'

💡 Hint

Consider how the filter transforms the input string in the execution_table.

Concept Snapshot

Template filters in Flask:
- Define a Python function to transform data.
- Register it with @app.template_filter('name').
- Use in templates with {{ variable|name }}.
- Filters transform data before display.
- Original data stays unchanged.

Full Transcript

In Flask, template filters let you change how data looks in your web pages. You write a small function that changes the data, like reversing a string. Then you tell Flask about this function using @app.template_filter with a name. When Flask shows a page, it looks for that name in the template and runs your function on the data. The changed data is shown on the page, but the original data stays the same. This helps keep your code clean and your pages nice.

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