# Fluent in Django: 10+ Django template filters you should know ## Prerequisites You will need the basic knowledge of Django. If you don't feel comfortable with Django yet, try [this beginner-friendly tutorial](https://girlthatlovestocode.com/fluent-in-django-first-steps). ## Django template filters While [tags](https://girlthatlovestocode.com/django-template-tags) lives between curly braces and a percent (`{% tag %}`), variables live between double curly braces (`{{ variable }}`). You can influence the variable by using filters. Filters are functions registered to the template engine that takes a value as input and return transformed value. > IF YOU'RE CURIOUS > > All the default filter functions are written in a file `defaultfilters.py`. This is how a wordcount filter looks like: > > ```python > @register.filter(is_safe=False) > @stringfilter > def wordcount(value): > """Return the number of words.""" > return len(value.split()) > ``` > A filter is separated from a variable with a pipe `{{ variable|filter }}`. It is possible to use more than one filter on the variable - you just add another pipe and specify the filter (`{{ variable|filter1|filter2 }}`). ## Initial setup > We will work on a similar project as for the [Django template tags](https://girlthatlovestocode.com/django-template-tags). > If you did that tutorial, feel free to skip the initial setup and work on the project you created based on the Django template tags tutorial. > We will work on a template with a different name, so feel free to join the initial setup from [where we're changing the `tutorial/urls.py`](#joinback). > If you didn't you'll be easily able to follow, just go through the initial setup first. Start with setting up a new Django project: ```sh $ mkdir django_template_tutorial $ cd django_template_tutorial $ python3.9 -m venv venv $ source venv/bin/activate (venv)$ pip install Django (venv)$ django-admin startproject django_template_filters . ``` Create a new app: ```sh (venv)$ django-admin startapp tutorial ```__ and register it: ```python # django_templates/settings.py INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'tutorial', ] ``` Create a model called `Expense`: ```python # tutorial/models.py from django.db import models class Expense(models.Model): datetime = models.DateTimeField() name = models.CharField(max_length=100) amount = models.FloatField() ``` Create and run the migrations: ```sh (venv)$ python manage.py makemigrations (venv)$ python manage.py migrate ``` > If you got lost during the initial setup, I encourage you to go [back to basics](https://girlthatlovestocode.com/fluent-in-django-first-steps). Create a folder called `templates` inside the `tutorial` folder and inside it, another folder, again called `tutorial`. Inside said structure, create a template called `filtered_expenses.html`: ``` django_templates └── tutorial └── templates └── tutorial └── filtered_expenses.html ``` Create a basic html for your filters: ```html Expenses
``` Everything we're going to add will be added between the `
` and `
`. Now we need to create an url where our template will be shown. Open `django_templates/urls.py` and include tutorial's urls in it: ```python # django_template_filters/urls.py from django.contrib import admin from django.urls import path, include # this is new urlpatterns = [ path('admin/', admin.site.urls), path('', include('tutorial.urls')), # this is new ] ```

We haven't created `tutorial/urls.py` yet.

Create the file and define just the root url: ```python # tutorial/urls.py from django.urls import path from tutorial import views urlpatterns = [ path('', views.filter_expenses_list), ] ``` And the last thing is to create a view called `filter_expenses_list`: ```python # tutorial/views.py from django.shortcuts import render from tutorial.models import Expense def filter_expenses_list(request): filter_expenses_list = Expense.objects.order_by('-datetime') return render(request, 'tutorial/filtered_expenses.html', {'expenses': filter_expenses_list}) ``` The last thing to do is to add some expenses via admin so we will be able to work with something. Register the `Expense` model on the admin site in the `admin.py` file: ```python # tutorial/admin.py from django.contrib import admin from .models import Expense admin.site.register(Expense) ``` Create the superuser: ```sh (venv)$ python manage.py createsuperuser ``` Start the server: ```sh (venv)$ python manage.py runserver ``` Open http://127.0.0.1:8000/admin/, log in with the superuser you created, and add 5 expenses. This was a long setup, right? Since this is an advanced tutorial, I didn't explain the setting project up. If you didn't understand something, feel free to consult the [beginners tutorial](https://girlthatlovestocode.com/fluent-in-django-first-steps). **Let's get to work** ## Change case Filters allow you to change the case on the word - word can be all caps, all lowercase, you can capitalize the first letter... To see the effect of each of those filters, open your [admin panel](http://127.0.0.1:8000/admin/) and make the expense names varied - one all lowercase, one starting with a number, one with multiple words... Edit your html file, so it will list the expenses in a table: ```html {% for expense in expenses %} {% endfor %}
{{ expense.name }} {{ expense.datetime }} {{ expense.amount }}
``` We will be adding different filters to `{{ expense.name }}` part. ### title `title` converts a string into a title case by making words start with an uppercase character and the remaining characters lowercase. ```html {% for expense in expenses %} {% endfor %}
{{ expense.name|title }} {{ expense.datetime }} {{ expense.amount }}
``` ![title.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619594864533/Jvz5fVDvr.png) ### capfirst `capfirst` capitalizes the first character of the value. If the first character is not a letter, this filter has no effect. Switch `title` for `capfirst` filter to the `{{ expense.name }}`. ```html {% for expense in expenses %} {% endfor %}
{{ expense.name|capfirst }} {{ expense.datetime }} {{ expense.amount }}
``` ![capfirst.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619594880242/8Q8DSDfII.png) ### lower `lower` converts a string into all lowercase. Switch the `capfirst` for a `lower`. ```html {% for expense in expenses %} {% endfor %}
{{ expense.name|lower }} {{ expense.datetime }} {{ expense.amount }}
``` ![lower.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619594902478/xMd7uXAGB.png) ### upper `upper` converts a string into all uppercase. Switch the `lower` for an `upper`. ```html {% for expense in expenses %} {% endfor %}
{{ expense.name|upper }} {{ expense.datetime }} {{ expense.amount }}
``` ![upper.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619594916444/TB89mKJwi.png) ## date Let's say we're only interested to show the date of the expense, not the time. Edit the `{{ expense.datetime }}` part in the template: ```html {% for expense in expenses %} {% endfor %}
{{ expense.name }} {{ expense.datetime|date:"jS F Y" }} {{ expense.amount }}
``` `|date` is usually followed by a colon and a desired format in the string. If not, `DATE_FORMAT` is used (you can set it in `settings.py`). In this case, we displayed the date as: - days: `jS` - day of the month without the leading zero (`j`) + English ordinal suffix for the day of the month (`S`) - month: `F` - the full-textual name of the month - year: `Y` - 4 digits year ![date_format.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619594931317/_sGbpZTeI.png) > You can check all the possible date formats in the [documentation](https://docs.djangoproject.com/en/3.1/ref/templates/builtins/#date). > In the same way, you set the [time](https://docs.djangoproject.com/en/3.1/ref/templates/builtins/#time) format. You can also combine it to show both. ## timesince `timesince` formats a date as the time since the date in the variable. Let's provide a user with a notice as to how much time has passed since their last expense. Add this code to your html file: ```html
It's been {{ expenses.0.datetime|timesince }} since your last expense.
``` `timesince` shows: years, months, weeks, days, hours, minutes. However, the time that passed is not always exact (the difference between 2020-02-02 and 2021-04-21 is "1 year, 2 months"). ![timesince.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619594944796/tv-CR6jsG.png) > Similar to `timesince` is a [timeuntil](https://docs.djangoproject.com/en/3.1/ref/templates/builtins/#timeuntil) except that it goes from now to the date in the future. ## random `random` returns a random item from the given list. How about we show the user some random saying about money to encourage them to spend money thoughtfully? Create a list of sayings in the view and pass it to the template: ```python # tutorial/views.py def filter_expenses_list(request): filter_expenses_list = Expense.objects.order_by('-datetime') # this is new encouragements = [ "Opportunity is missed by most people because it is dressed in overalls and looks like work.", "Money is a means to get through this world, but it cannot add a day to our lives.", "It’s good to have money and the things that money can buy, but it’s good too to check up once in a while and make sure that you haven’t lost the things that money can’t buy.", "And when you start putting some rainy-day money aside, you’ll understand that it isn’t “doing nothing.” It’s letting you sleep at night." ] return render(request, 'tutorial/filtered_expenses.html', {'expenses': filter_expenses_list, "encouragements": encouragements}) # encouragaments variable is new ``` Add this in your html file: ```html
Message of encouragement

{{ encouragements|random }}

``` You provided a list of strings and now `random` each time the page refreshes outputs one. ![random.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619594967416/ukyP-R5Ih.png) ## unordered_list `unordere_list` creates an html list out of a python list. The list can be nested. > the list is created without the `