I am using django-ckeditor as a WYSIWYG text editor when creating posts. It captures and saves the content and the correct HTML tags without any problem. However, my template renders the variable surrounded by <p> tags, which ruins the RichTextField because <p> tags cannot be nested. As a result, it was showing all of the text (with tags) as a paragraph with no formatting. I realized that this was happening, so I changed the surrounding tags in my template to <div> tags, but when the template is loaded on the browser, it replaces the div tags with paragraph tags again. How can I get rid of the <p> tags so that my text is rendered with the correct formatting?
Here is my template:
{% extends 'bandwagon/base.html' %}
{% block content %}
<article class="media content-section">
<img src="{{ post.author.profile.image.url }}" alt="profile photo" class="rounded-circle article-img">
<div class="media-body">
<img src="{{ post.image.url }}" class="post-img">
<div class="article-metadata">
<a class="mr-2" href="{% url 'user-posts' object.author.username %}">{{ object.author }}</a>
<small class="text-muted">{{ object.date_posted | date:'F d, Y'}}</small>
{% if object.author == user %}
<div>
Edit
Delete
</div>
{% endif %}
</div>
<h2 class='article-title-detail'>{{ object.title }}</h2>
<div class="article-content">{{ object.content | safe }}</div>
</div>
</article>
{% endblock content %}
However, in the browser, the response is this:
<p class="article-content"><h3>Fake Content</h3>
<h3><span style="font-size:13px">Fake Content</span></h3></p>
By default CKEditor RichTextField adds <p> tags around the content of the field.
If that's the reason you keep seeing <p> around your content, you can customizing your CKEditor editor, so it will not add the <p> like this:
#base.py
CKEDITOR_CONFIGS = {
'default': {
'autoParagraph': False
},
}
You can also create a specific configuration and set specific fields to use it.
read more about it here: https://django-ckeditor.readthedocs.io/en/latest/#optional-customizing-ckeditor-editor
Related
I have an image gallery for each users post. However, if a user has not uploaded any images I don't want to display the title "Image Gallery". How would I go about hiding the title if the for loop does not return anything?
<a>Image Gallery</a>
<div class="row">
{% for images in postgallery %}
<div class="col-md-3">
<a href="{{ images.images.url }}" data-lightbox="image-1">
<img class="img-thumbnail" src="{{ images.images.url }}" />
</a>
</div>
{% endfor %}
</div>
I have tried a few variations of {% if imagegallery == 0 %} but I can't get anything to work as I would like
According to django doc you can use this syntax: {% if postgallery|length == 0 %}
I included a contact-form on my webpage which looks like so:
I would like to style the "CC myself" - checkbox in the following ways:
The text "CC myself" is centered vertically within its box.
The checkbox should be right next to the text "CC myself".
The "forward"-symbol should be between text and checkbox, but directly next to the text and with more horizontal distance to the checkbox (on its right-hand side).
This is how I defined the contact form in forms.py:
from django import forms
class ContactForm(forms.Form):
# * Sender
from_email = forms.EmailField(
required=True,
label='Your Email',
widget=forms.TextInput(attrs={'placeholder': 'jsmith#example.com'}))
# * Optional CC to sender
cc_myself = forms.BooleanField(
required=False,
label='CC myself',
widget=forms.CheckboxInput(attrs={'class': 'fa fa-share'}))
# * Subject
subject = forms.CharField(required=True, label='Subject')
# * Message
message = forms.CharField(
widget=forms.Textarea(attrs={'placeholder': 'Dear Andreas ..'}),
required=True,
label='Message')
In the home.html template then, the form is displayed like so:
<form style="margin-left: auto;margin-right: 0;" method="post" action="{% url 'contact' %}">
{% csrf_token %}
<!-- * Neat autoformatting of the django-form via "pip install django-widget-tweaks"
Docs: https://simpleisbetterthancomplex.com/2015/12/04/package-of-the-week-django-widget-tweaks.html -->
{% for hidden in sendemail_form.hidden_fields %}
{{ hidden }}
{% endfor %}
{% for field in sendemail_form.visible_fields %}
<div class="form-group">
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
{{ field|add_class:'form-control' }}
{% for error in field.errors %}
<span class="help-block">{{ error }}</span>
{% endfor %}
</div>
{% endfor %}
<div style="text-align:center" class="form-actions">
<button type="submit" class="btn btn-success">
<!-- Search icons: https://fontawesome.com/icons?s=solid (syntax: class="fa fa-name-of-icon"))
Docs on how to implement: https://stackoverflow.com/questions/32612690/bootstrap-4-glyphicons-migration/41281304#41281304-->
<span class="fa fa-paper-plane"></span> Send Message
</button>
<!-- Add horizontal space: https://stackoverflow.com/questions/31198170/want-to-add-spacing-between-buttons/31199399#31199399 -->
<!-- Add cancel-button redirecting to "home" according to the following docs: https://simpleisbetterthancomplex.com/2015/12/04/package-of-the-week-django-widget-tweaks.html -->
<a href="{% url 'home' %}" class="btn btn-secondary">
<span class="fa fa-times"></span> Cancel
</a>
</div>
</form>
Edit on CSS-styling (bootstrap 4.x) employed in my project:
In my base.html wrapped around all my templates, the following is included:
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Docs for including fontawesome: https://stackoverflow.com/a/41281304/12298276 -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
Edit after trying out the first suggestion of #Danoram:
The result looks like this (only modification is the place of the "forward" - symbol inside the checkbox:
I would like to display the help_text='Decide if the message should be forwarded to you.' below the checkbox in grey, just like with the other fields. Also, the checkbox is still much bigger regarding its height compared to the label text "CC myself". And last but not least, the formatting of the entire contact-form column has gotten distorted. Especially the latter should be fixed, otherwise I can't implement it this way.
This was my best attempt (conserving the size of the checkbox).
Using an if check to render the cc field separately.
Although to do this I had to remove the classes from the checkboxinput and put them directly into the html
forms.py
cc_myself = forms.BooleanField(
required=False,
label='CC myself',
widget=forms.CheckboxInput())
home.html
<form style="margin-left: auto;margin-right: 0;" method="post" action="{% url 'contact' %}">
{% csrf_token %}
<!-- * Neat autoformatting of the django-form via "pip install django-widget-tweaks"
Docs: https://simpleisbetterthancomplex.com/2015/12/04/package-of-the-week-django-widget-tweaks.html -->
{% for hidden in sendemail_form.hidden_fields %}
{{ hidden }}
{% endfor %}
{% for field in sendemail_form.visible_fields %}
{% if field.label == 'CC myself'%}
<div class="row form-group">
<div class="col-3 col-lg-2 col-xl-auto">
<label>{{ field.label }} <label for="{{ field.id_for_label }}" class="fa fa-share"></label></label>
</div>
<div class="col-2">
{{ field|add_class:'form-control' }}
</div>
</div>
{% else %}
<div class="form-group">
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
{{ field|add_class:'form-control' }}
{% for error in field.errors %}
<span class="help-block">{{ error }}</span>
{% endfor %}
</div>
{% endif %}
{% endfor %}
<div style="text-align:center" class="form-actions">
<button type="submit" class="btn btn-success">
<!-- Search icons: https://fontawesome.com/icons?s=solid (syntax: class="fa fa-name-of-icon"))
Docs on how to implement: https://stackoverflow.com/questions/32612690/bootstrap-4-glyphicons-migration/41281304#41281304-->
<span class="fa fa-paper-plane"></span> Send Message
</button>
<!-- Add horizontal space: https://stackoverflow.com/questions/31198170/want-to-add-spacing-between-buttons/31199399#31199399 -->
<!-- Add cancel-button redirecting to "home" according to the following docs: https://simpleisbetterthancomplex.com/2015/12/04/package-of-the-week-django-widget-tweaks.html -->
<a href="{% url 'home' %}" class="btn btn-secondary">
<span class="fa fa-times"></span> Cancel
</a>
</div>
</form>
I'm using Flask for a small web app and having trouble to get my background image to display after extending using Jinja.
My layout.html contains a header:
<!-- Header section -->
<header class="header-section">
<div class="header-warp">
<div class="container">
<a href="#" class="site-logo">
<img src="{{ url_for('static', filename='img/logo.png') }}" alt="">
</a>
<div class="user-panel">
{%if session.user_id %}
Logout
{% endif %}
</div>
<div class="nav-switch">
<i class="fa fa-bars"></i>
</div>
</div>
</div>
</header>
<!-- Header section end -->
<main>
{% block main %}
{% endblock %}
</main>
And in another html file, I want to extend the layout:
{% extends "layout.html" %}
{% block title %}
Register
{% endblock %}
{%block main%}
<section class="hero-section set-bg" data-setbg="{{ url_for('static', filename='img/review-bg.jpg') }}">
However, the review-bg.jpg doesn't load and instead, I received a blank section. However, when I straight up copying the layout (not using extends anymore), the image loaded correctly. I double checked with (http://127.0.0.1:5000/static/img/review-bg.jpg) and the path correctly return the image.
Anyone can help explain to me why Jinja doesn't load the image after extending?
The problem seems to be in data-setbg - it can be React script, look here:
html tag attribute "data-setbg" is not working in React project
Or try to google "data-setbg is not working"
Edit the extension to:
{% extends "layout.html" %}
{% block title %}
Register
{% endblock %}
{%block main%}
<img src="{{ url_for('static', filename='img/review-bg.jpg') }}" alt="">
Do you see the image now? If so (what I suspect), it's not jinja/flask related but something else is going on. If not, right click on the page in firefox and press view source. Where is the link pointing to?
When employ the bootstrap in Django to format the form, it display nicely.
{% for entry in entries %}
<div class="panel panel-default">
<div class="panel-heading">
<h3>
{{ entry.date_added|date:"M d, Y H:i"}}
<small>
<a href="{% url 'learning_logs:edit_entry' entry.id %}">
edit entry</a>
</small>
</h3>
</div>
<div class="panel-body">
{{ entry.text|linebreaks}}
</div>
</div> <!-- panel -->
However, it can only render my submitted data in plain text like:
How to enable markdown to render the text in Django?
I am using django-endless-pagination with twitter style pagination and twitter bootstrap on my website.
Now, with django-endless-pagination, when the first page is displayed, system is using the below style.
.row-fluid .offset1:first-child {
margin-left: 8.547008547008547%;
}
But from the second page onwards, the style used for the first element is as below.
.row-fluid .offset1 {
margin-left: 11.11111111111111%;
}
As the margin-left is different for both pages first element, the rows are not aligned between page 1 and page 2. How do i change this, so that second page first element also uses first-child style and it is aligned.
Edit :-
My code looks like below in the template
<div class="offset1 span10">
<div class="span4">
{% lazy_paginate column_1_items_list %}
{% if column_1_items_list %}
{% for column_1_item in column_1_items_list %}
<div class="row-fluid image_div" style="padding-top:20px">
<h4 class="text-center">name_of_item</h4>
<a target="_blank" href="link_for_item">
<img class="item-size" src="photo.url" alt="name_of_item "/>
</a>
<p> quick_summary|safe </p>
<div class="row-fluid bottom">
<span class="price"><b>£ price</b></span>
</div>
</div>
{% endfor %}
{% endif %}
{% show_more " " %}
</div>
</div>
Thanks
Sreekanth
You could probably just use forloop.first and add a class to your css.
{% for column_1_item in column_1_items_list %}
<div class="row-fluid image_div{% if forloop.first %} first_child{% endif %}" style="padding-top:20px">
...
{% endfor %}