How do I make a label bold in a Django form? - django

How can I make a label bold in a Django form?
The form element goes like this:
condition = forms.TypedChoiceField(label="My Condition is",
coerce= int,
choices=Listed.CONDITION,
widget=RadioSelect(attrs={"class": "required"})
)

Usually, the easiest way would be to do it in your CSS. label[for="id_condition"]{font-weight:bold;} if you're only dealing with browsers that have attribute selectors implemented. These days, that means everything but IE6. If you do need to support IE6, you can wrap the field in a div and style it that way:
<div class="bold-my-labels">{{ form.condition.label_tag }}{{ form.condition }}</div>
<style type="text/css">.bold-my-labels label{font-weight:bold;}</style>
Lastly, if you need to do it on the Python side of things, you can always stick the HTML in your label arg, a-la "<strong>My Condition is</strong>". But it'll get escaped in the HTML unless you mark it as safe, so you'd end up with:
from django.utils.safestring import mark_safe
...
condition = forms.TypedChoiceField(
label=mark_safe("<strong>My Condition is</strong>"),
...
)

Related

Trying to render a django form field as a variable in a script tag in an html template, but the javascript isn't working

My issue is simple enough--I am trying to render a form field from a django form into a javascript variable, defined within a <script> tag, within a django template.
When I output a CharField, there's no problem. But when I try to render a ChoiceField, the resulting output breaks the html, and prevents the script tag from correctly parsing my variable.
To demonstrate my setup, I have a form defined in forms.py, exactly like this example form:
from django import forms
form = TestForm(forms.Form):
testfield = forms.ChoiceField(initial="increase_rate",
choices=[
("a", "option a"),
("b", "option b"),
("c", "option c"),
("d", "option d")
])
I am instantiating the form in views.py, and passing it into a django template to be rendered.
from django.shortcuts import render
from .forms import TestForm
[...]
#require_http_methods(["GET"])
def webpage(request):
form = TestForm()
return render(request, 'index.html', {"form":form})
Then, finally, in my template, I have something like the following:
[...]
<script>
window.testfield = '{{ form.testfield }}'
</script>
[...]
Up until this point, everything works perfectly. No trouble at all. But when I render the field into the template, and inspect it in my browser, I get the following:
<script>
window.testfield = '<select name="trigger" id="id_trigger">
<option value="a" selected>option a</option>
<option value="b">option b</option>
<option value="c">option c</option>
<option value="d">option d</option>
</select>'
</script>
This output breaks the html, and prevents the script tag from being interpreted as a variable like I want. This is a major problem, because I want to reuse these programmatically elsewhere on the page.
I tried the following:
<script>
window.testfield = '{{ form.testfield|escape }}'
</script>
But was still unsuccessful. Any help anyone can give would be greatly appreciated!
I am actively researching a solution. My current guess is that the output needs to be escaped somehow that I don't understand. I figure the template tags and filters have my answer, I just have to find it. Will post an update once a solution is found.
Use <script type="text/template"></script>.
This way the browser knows it's just text and will ignore it.
So, I figured it out. Turns out that the issue was that the presence of white space, line breaks, and unescaped double quotes (") were breaking the tag when it was parsed at HTML.
So I ended up using the following:
{% spaceless %}
<script>
window.testfield = '{{ form.testfield|addslashes }}'
</script>
{% endspaceless %}
And it worked, allowing me to store the string representation of the django form field in a javascript variable. As per the documentation, the {% spaceless %} "Removes whitespace between HTML tags. This includes tab characters and newlines." [1]. As for the filter |addslashes, it "Adds slashes before quotes. Useful for escaping strings in CSV" [2]. In my case, both solutions were needed, as without either of them, the script tag broke.
As for why the |escape filter didn't work on it's own, I'm not sure. Reading the documentation, it seems like it probably should have. The following is what the |escape filter actually does [3]:
Escapes a string’s HTML. Specifically, it makes these replacements:
< is converted to <
> is converted to >
' (single quote) is converted to '
" (double quote) is converted to "
& is converted to &
I can only guess why this didn't work. I figure it's because it didn't do anything about the white space. But I shouldn't speculate. I welcome any explanations you might have. As ever, understanding the way the machine thinks is better than any single, specific solution. Thanks.
[1] - https://docs.djangoproject.com/en/dev/ref/templates/builtins/#spaceless
[2] - https://docs.djangoproject.com/en/dev/ref/templates/builtins/#addslashes
[3] - https://docs.djangoproject.com/en/dev/ref/templates/builtins/#escape

Detect URLs and #tags in Django CharField and add style to it

For now on I have in my template a paragraph like this <p class="...">{{ post.content }}</p> and if this Post's content contains a link or #hashtag it is rendered as a normal text with the rest of the post. How can I customize it? For example change text-color and add tag around it?
As I said in comment, you can use custom tag filter to wrap your content, and use Regular Expression to generate links and hashtags
Create your tags file, and name it as you want:
tag_filter_name.py
If you're not familiar with custom tag filter creation, you can learn more about it in the Official Documentation
from django import template
import re
register = template.Library()
def generate_link(link):
return '<a class="link" href="{}">{}</a>'.format(link, link)
def generate_hashtag_link(tag):
# Free to configuree the URL the way adapted your project
url = "/tags/{}/".format(tag)
return '<a class="hashtag" href="{}">#{}</a>'.format(url, tag)
And then, you create the function what will be used as tag filter
#register.filter
def render_content(obj):
text = re.sub(r"#(\w+)", lambda m: generate_hashtag_link(m.group(1)),obj)
return re.sub(r"(?P<url>https?://[^\s]+)", lambda m: generate_link(m.group(1)),text)
If you want Django to mark it as safe content, you can do the following:
from django.utils.safestring import mark_safe # import function
''' function codes here '''
return mark_safe(re.sub(r"(?Phttps?://[^\s]+)",
lambda m: generate_link(m.group(1)),text))
And finally, to use it in your template, don't forget to load it
{% load tag_filter_name %}
{{ post.content|render_content }}
Best way: custom tag filters here is the docs URL
https://docs.djangoproject.com/en/2.2/ref/templates/builtins/
Good way: If you know JS create a function that handles the formatting on the front end
in HTML:
onload="myfunction("{{post.content}}")"
in JS sort for the string containing the # wrap it in a span or other element and style away. then replace the inner HTML with your new formatted piece. This will save rendering time on the server and also frees you up from having to loop thru the list of posts in the view
Ok way: not preferred but if you hate js and only want to work in python (understandable). You need to loop through the list of posts separate out the items of the post format them the way you like with inline style. then add them to a new object that you will append to the end of a new list of posts that you will then pass thru to context. This is a real pain please don't do this if you can help it at all.
the tag filters are awsome take advantage but if they won't work for your use case I would highly advise using vanilla JS

Condition that checks placeholder content existence

How can I check placeholder content existence and make next trick? :
{% if placeholder 'Head_text' %} <--check here
<div class="in">
...
...
<h2 class="title">{% placeholder 'Head_text' %}</h2>
...
...
</div>
{% endif %}
I want to know, does placeholder have some content before rendering some special HTML-structure for it.
Thanks.
I was looking for a solution for this and I found a few alternatives instead of checking if the placeholder exists. Basically the idea is to use a different plugin instead that adds the extra html. There are a few packages you can install with pip. Now, after trying them I just did it myself and it was much more easier than using the packages.
cmsplugin-text-wrapper: It integrates to the existent django-cms default text plugin keeping the editor but adds a selector on top so you can select a wrapper. The wrapper contains the extra html you would like to add. It also has a nice CSS system to add classes. On the downside, I didn't want to make the editors life more difficult with the extra template selector.
cmsplugin-text-ng: This basically adds a new plugin. When you add the plugin to your placeholder, it display a selector with the available templates (that contains your extra HTML). What I really like is that you can add extra fields that you can use in your customized HTML. For example, you could add a title so the plugin displays an extra textfield for it. On the downside, the templates are store in the database through the admin!. That is an extra hit to the database and I really don't want to sacrifice it for something too simple.
Do your own plugin using the existent Text Model. Four very simple steps:
3.1 Basically add this to your cms_plugins.py:
from cms.plugin_pool import plugin_pool
from cms.plugins.text.models import Text
from cms.plugins.text.cms_plugins import TextPlugin
class WidgetPlugin(TextPlugin):
model = Text
name = _("Widget")
render_template = "widget.html"
def render(self, context, instance, placeholder):
context['instance'] = instance
return context
plugin_pool.register_plugin(WidgetPlugin)
3.2 Create your widget.html template in your templates folder:
<div class="in">
...
...
{{ instance.body|safe }}
...
...
</div>
3.3 Place your placeholder wherever you want:
{% placeholder 'Head_text' %}
3.4 Make the user use the new plugin adding the Head_text configuration plugin in the settings.py:
CMS_PLACEHOLDER_CONF = {
#...
'Head_text': {
'plugins': {'WidgetPlugin'}
},
}
I've had this problem before, and when I researched it (this might have changed since) there is no built in way to do this, so you have to write your own template tag to load the placeholder into a variable.
Here are some discussions on the django-cms mailing list:
https://groups.google.com/forum/?fromgroups=#!topic/django-cms/QeTlmxQnn3E
https://groups.google.com/forum/#!topic/django-cms/2mWvEpTH0ns/discussion

django forms blank label

I am trying to use django forms, and I am interested in rending a form with " blank label".
Something like:
class SearchForm(forms.Form):
q = forms.CharField(required=True,widget=forms.TextInput(attrs {'id':'field','name':'field'}),label="Search")
and then I render the form in my html using
{{form.as_p}}
However, I have this annoying "Search:" being displayed on my html, which I dont want. I have tried using just:
q = forms.CharField(required=True,widget=forms.TextInput(attrs {'id':'field','name':'field'}))
but this outputs "Q:", which I guess is the default label. How do I tell django that I do not need the label rendered?
Many thanks.
Check out this example, it should clarify how to use it: https://docs.djangoproject.com/en/dev/topics/forms/#customizing-the-form-template
Are you sure {{ form.q }} does not work?
You could just do:
class SearchForm(forms.Form):
q = forms.CharField(required=True,widget=forms.TextInput(attrs {'id':'field','name':'field'}),label="")
That will just set the label to the empty string.

Simple Django question: how to allow html as output from a variable?

this template variable {{object.video.description}} is outputing this text:
Welcome to Saint Francis Academy in the heart of Washington.
How can I get the link to show as an actual link instead of being replaced with html entities. I tried filtering it as safe but no luck: {{object.video.description|safe}}
Can you go to the django shell and see what text is recorded in object.video.description?
How/where does video.description get defined as an html string (what I'm guessing is that a < is already be escaped into < at that point and hence safe won't help). Marking as safe prevents django from converting < to < right before rendering in the template; but won't convert a string containing < into a <.
If the string is originally saved with <s and &gts you can convert them to < and > by a simple python replacement somewhere in your string processing. E.g., in your view do something like:
htmlCodes = (('&', '&'),
('<', '<'),
('>', '>'),
('"', '"'),
("'", '''),)
def unescape(some_html_str):
for c, html_code in htmlCodes:
some_html_str = some_html_str.replace(html_code, c)
return some_html_str
and then remember to unescape your string in your view before putting it in the context (and still remember to mark it safe).
See How do I perform HTML decoding/encoding using Python/Django?
Also it may be better/easier for you to use mark_safe (from django.utils.safestring import mark_safe) in your views to make sure only safe strings are marked safe rather than have your template always render something safe.
{% load markup %}
{{ object.video.description|markdown }}