Add Css Class to urlize

Using Django Templates & Frontend
1

Hi

I got this code for user info:

...
twitter   = models.CharField(max_length=255, blank=True, null=True) 
snapchat  = models.CharField(max_length=255, blank=True, null=True)
linkedin  = models.CharField(max_length=255, blank=True, null=True)
...

in Template i need to add CSS Class

class="fab fa-twitter icon"
class="fab fa-snapchat-ghost icon"

So i did this in template:

{% if user.twitter %}
<li>
 <a href="{{ user.twitter|urlize  }}" class="fab fa-twitter icon" target="_blank"></a>
</li>
{% endif %}

In this Code the class is out of the scope of the href.

Any idea how to add class to urlize.

2

What do you want the final anchor tag to look like when it’s rendered?

3 
 <a href="https://twitter.com/User-twitter-account" class="fab fa-twitter icon" target="_blank"></a>
4

Ok, the problem is that you are using urlize - you don’t need it in this situation. See Built-in template tags and filters | Django documentation | Django You might need to do some work with that twitter attribute, but otherwise, you’re rendering your own anchor tag.

5

without urlize tag

The link well be like:

www.mysite.com/user/https://twitter.com/User-twitter-account

Witch well led to 404 error.

6

What is the content of the twitter attribute?

7

this class:

class="fab fa-twitter icon"
8

No, the data in your model - what you’re accessing in the template as user.twitter. What does one sample instance of that attribute look like?

9

i want to go from this “User input”

 https://twitter.com/User-twitter-account

to this in template:

 <a href="https://twitter.com/User-twitter-account" class="fab fa-twitter icon" target="_blank"></a>
10

Yes, I understand that.

If:
twitter = "https://twitter.com/User-twitter-account"

And you render:
<a href="{{ twitter }}"> Link to twitter</a>

You will get:
<a href="https://twitter.com/User-twitter-account"> Link to twitter</a>

What you posted as to what you think you would get would be an indication of a problem somewhere else.

11

Yes, The problem was somewhere else,
some user may input URL without HTTPS://
For that i use now URLField, that well force theme do insert a correct url format.

...
twitter   = models.URLField(max_length=255, blank=True, null=True) 
snapchat  = models.URLField(max_length=255, blank=True, null=True)
linkedin  = models.URLField(max_length=255, blank=True, null=True)
...

Thanks Ken :smiley: