Custom Functions in Django Template Tags

Using regular expression to search and replace URL

Photo by Josh Nuttall on Unsplash

If you have stumbled upon/purposefully came to this article, I am presuming that you have a basic understanding of the Django structure and the framework in general. Therefore, skipping Django 101, I’ll straight dive into the main functionality.

The post is divided into two parts. Again, you may forward to the second half if you are already familiar with what template tags are.

Part 1 — Background of Django Template Tags

Part 2 — How to use Custom tags

Part 1 — Template Tags

The primary usage of template tags is to write some sort of code in your HTML so that it can display dynamic content. Now, what do I mean by dynamic content? Let’s first take a look at the example of static content below.

Static content

Focus on Article class. You defined your article title and that’s it. It’s there now. Unless you change it manually by yourself, it is not going to change. In other terms, it is static. And that doesn't help when you have a lot of data coming in and you have to show them all on your website/application.

That is where Django template tags comes in handy. Let consider, for example, you are using an API which fetches article headlines and their links and you want your website to show them all, old as well as the ones you fetch on every refresh. Using the template tags, we can display the title of the article in a dynamic way. Here’s how, focus on 3 lines that doesn’t seem HTML, that’s out template tags.

Dynamic content

Note about — for article in all_headlines

article is local, you can set it to whatever you want it to be. And all_headlines comes from views.py file where you can define it like shown below, where headline is a model, and I am retrieving total 25 articles, last article published first. Putting hyphen (-) gives us reverse order.

But however, back to our main topic. As you can see, I am getting links to all articles but It’ll be hyperlinked to “link”. I don’t want that. I need domain name as shown in image 1 so that users know where this articles is coming from. Now that’s where we hit dead end, or do we?

Django template tags are limited to what it can do. It is not a full-proof programming language that supports multiple packages. But it shouldn’t stop you. And luckily, there is one way. There always is.

Part 2 — Custom functions

We discussed why we need custom functions, let’s move to how. How to create custom functions? How to use them to do what we need them to do? And maybe How to make our lives a little easier? No, the later is not true, there is no such thing as easy life. Let’s move on.

To make sense and to make your understanding easy, I will walk you through the solution of a problem I was facing. Using custom functions to extract domain names from URLs and print them dynamically instead of just the hyperlink placeholder “link”.

There are 4 things that needs to be done to use custom functions. Let’s get through it one by one.

1. Create a new folder inside your app and in that folder create a new .py file. The python file is your playground. You can define it however you want. See the structure below,

main/
|--project/
|    |--app/
|    |    |--migrations/
|    |    |--templatetags/             <- templatetags folder
|    |    |    +-- replace.py          <- python script

Here is the Python Script I wrote to replace URLs with domain names using regular expression. I sometimes wonder what is something that regular expression can’t do.

Custom replace function

2. Load that .py file in the main HTML file

You now have to load the replace file in the html file. You can do thay by typing the following.

{% load replace %}

3. And finally, use custom function

Recall 2nd figure where we used template tags for dynamic content. We just need to change one minor thing to make use of our custom function. Since we need domain name from a URL, we will use the block that fetched URLs and then replace it with the new string which is just domain name, all that in a dynamic way.

Notice anything different? That’s right, we just have to use our custom function by typing following.

{{ article.url | replace }}

And that’s it. That’s how you do it

End notes

Sole purpose of writing this article was to give you all the information you need regarding custom function in one place since I had to look at several different places and a pull few frustrating nights to get this done. Hope this helps you. However, if there is any other way to we can implement custom tags or we can improve the efficiency, I’d love to hear it from you.

You can always drop comments or reach out to me on Twitter for any questions, or just drop by digitally to say hello. Always love connecting great people. Happy learning.