I am using markdown in django 1.11 and I implemented it using cdn
but when ever I run the site, the first paragraph is rendered inside pre and code tags.
Below is the screenshot which is rendered:
https://i.stack.imgur.com/lqNKI.png
Here every first para is rendered like that in every post why is it so and please help me to resolve it.
post_detail.html
{% extends "base.html" %}
{% block body %}
<div class="container" style="margin-top: 10px;">
<div class="card mb-3">
{% if list.image %}
<img class="card-img-top" src="{{ list.image.url }}" alt="Card image cap">
{% endif %}
<div class="card-block">
<h3 class="card-title">{{ list.title }}</h3>
<p class="card-text"><small class="text-muted">Author:
{% if list.user.get_full_name %}
{{ list.user.get_full_name }}
{% else %}
{{ list.user }}
{% endif %}
</small></p>
<div class="content-marked">
<p class="card-text">{{ list.content }}</p>
</div>
<p class="card-text"><small class="text-muted">Last updated {{list.updated | timesince}} ago</small></p>
Edit
</div>
</div>
</div>
{% endblock %}
Related
ASK
I'm trying to recreate bootstrap cards row layout with Tailwind within django framework
BLOCKER
However the tailwind attempt results in below
index.html -- bootstrap
{% extends 'base.html' %}
{% block title %}Home{% endblock title %}
{% block content %}
<div class="py-2">
<div class="row">
{% for t in object_list %}
<div class="col-md-3">
<div class="card mb-4 box-shadow bg-green-500">
<div class="card-body">
<h2 style="font-size:18px;font-weight:bold;min-height:42px;"><a class="text-dark" href="#">
{{t.currency|truncatechars:50}}</a></h2>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">{{t.country|truncatechars:25}}</small>
</div>
</div>
</div>
</a>
</div>
{% endfor %}
</div>
{% endblock content %}
index.html -- tailwind
{% extends 'base.html' %}
{% block title %}Home{% endblock title %}
{% block content %}
<div class="p-10 ">
<div class="max-w-sm rounded overflow-hidden shadow-lg">
{% for t in object_list %}
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">{{t.country}}</div>
<p class="text-gray-700 text-base">
{{ t.currency }}
</p>
</div>
{% endfor %}
</div>
</div>
{% endblock content %}
You're starting the for loop a tag too late on the Tailwind version so all of your items are in a single card. And to recreate a 4 column grid layout in Tailwind I recommend using the grid utilities, specifically grid which is display: grid and grid-cols-4 which is grid-template-columns: repeat(4, minmax(0, 1fr)).
Your code might look like this:
{% extends 'base.html' %}
{% block title %}Home{% endblock title %}
{% block content %}
<div class="p-10 grid sm:grid-cols-2 md:grid-cols-4 gap-5">
{% for t in object_list %}
<div class="bg-green-500 rounded overflow-hidden shadow-lg">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">{{t.country}}</div>
<p class="text-gray-700 text-base">
{{ t.currency }}
</p>
</div>
</div>
{% endfor %}
</div>
{% endblock content %}
Here's a visual of what the expected output would be https://play.tailwindcss.com/AWK45UcOug
I am making a news site, there is a page where all articles are displayed. But if there are many articles, then the page will be huge.
my code :
{% block content %}
<div class=" container" style="margin-top: 60px;">
{% for post in posts %}
<div class="row" style="padding-top: 30px ">
<div class="col-sm-3">
{% image post.preview_image fill-250x250 as blog_img %}
<img style="border-radius: .3525rem" href="{{ post.url }}" src="{{ blog_img.url }}">
</div>
<div class="col-sm-9">
<a href="{{ post.url }}">
{{ post.title }}
</a>
<br/>
<p> {{ post.intro }}</p>
</div>
</div>
{% endfor %}
</div>
{% endblock content %}
what i want to do
I recommend using pagination : https://learnwagtail.com/tutorials/how-to-paginate-your-wagtail-pages/
Django 3.0.8
django-comments-xtd==2.6.2
I'm studyint this section of the tutorial:
https://django-comments-xtd.readthedocs.io/en/latest/tutorial.html#removal-suggestion
post_detail.html
{% extends "base.html" %}
{% load comments %}
{% load comments_xtd %}
{% block title %}{{ object.title }}{% endblock %}
{% block content %}
<div class="pb-3">
<h1 class="text-center">{{ object.title }}</h1>
<p class="small text-center">{{ object.publish|date:"l, j F Y" }}</p>
</div>
<div>
{{ object.body|linebreaks }}
</div>
{% get_comment_count for object as comment_count %}
<div class="py-4 text-center">
Back to the post list
⋅
{{ comment_count }} comment{{ comment_count|pluralize }}
ha{{ comment_count|pluralize:"s,ve" }} been posted.
</div>
{% if object.allow_comments %}
<div class="card card-block mb-5">
<div class="card-body">
<h4 class="card-title text-center pb-3">Post your comment</h4>
{% render_comment_form for object %}
</div>
</div>
{% endif %}
{% if comment_count %}
<ul class="media-list">
{% render_xtdcomment_tree for object allow_flagging allow_feedback %}
</ul>
{% endif %}
{% endblock %}
settings.py
COMMENTS_XTD_APP_MODEL_OPTIONS = {
'blog.post': {
'allow_flagging': True,
'allow_feedback': False,
'show_feedback': False,
}
}
Full code at Github: https://github.com/Kifsif/comments
Problem
I have loged in. But I can't see any flag at the right side of every comment’s header.
Could you give me a hint where the problem may be hiding?
I think you will have to import the font awesome stylesheet:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
I have contents which were published using tinymce editor. Now, I want to show my content, that's why I have to use safe filter. But, whenever I'm trying to use slice or truncate filter, the template breaks.
this is my HTML code.
{% extends 'blog/frontend/layouts/base.html' %}
{% block content %}
<div class="card border-primary">
{% for post in posts %}
<div class="card my-2 mx-1">
<div class="card-body">
<h5 class="card-title">{{ post.title }}</h5>
<hr>
<img src="{{ post.image.url }}" alt="Card image" width="85%" class="mx-auto d-block">
<p class="card-text mt-1">
{{ post.content|truncatewords:50|safe}}
</p>
<hr>
<div class="d-flex">
<div class="px-2 py-0 my-auto">
<h6><i class="fas fa-user-edit"></i> {{ post.author.username }}</h6>
</div>
<div class="px-2 py-0 my-auto">
<h6>Date posted: <span class="text-info">{{ post.date_posted|date:"d M, Y" }}</span></h6>
</div>
<div class="ml-auto px-2 my-auto ">
Read more
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock content %}
These are the image, first one without sliceor turncate filter, 2nd and 3rd one are with them.
Sorry, it was a stupid question to ask. Just in case anyone else is facing this kind of problem, use truncatechars_html or truncatewords_html just like this: {{ post.content|truncatewords_html:30|safe }} or {{ post.content|truncatechars_html:30|safe }}
I am returning the "comentarios" objects of the database through a for, but since the display of these objects takes up a lot of space in the html page, I would like to know how to divide the objects into more lists or into a hidden space, since when they pass from seven comments they exceed the size of the body.
template.html
{% extends 'baseR.html' %}
{% load static %}
{% block title %} Comentários - SMILE 3D {% endblock %}
{% block tamanho %} 2000px {% endblock %}
{% load bootstrap %}
{% block main %}
<div class="row b2">
<div class="col-1"></div>
<div class="col-10">
<h3 style="color:royalblue; font-weight:bold;">Pregão: </h3>
<hr>
<h2>{{msg}}</h2>
<br>
<ul style="list-sytle:none;">
<div class="container pregoes">
<li style="list-style:none;">
<p><strong>Dono: </strong>{{pregoe.usuario}}</p>
<p><strong>Tipo do pregão: </strong>{{ pregoe.tipo }}</p>
<p><strong>Dente: </strong>{{ pregoe.dente }}</p>
<p><strong>Cor: </strong>{{ pregoe.cor }}</p>
<p><strong>Escala: </strong>{{ pregoe.escala }}</p>
<p><strong>Material: </strong>{{ pregoe.material }}</p>
<p><strong>Observações: </strong>{{ pregoe.extra }}</p>
<p><strong>Preço inicial: </strong>R${{ pregoe.preco }}</p>
<p><strong>Data de registro: </strong><em>{{ pregoe.data }}</em></p>
<p><strong>Prazo: </strong><em>{{ pregoe.prazo }}</em></p>
</li>
</div>
<br>
<hr>
**<h3>Comentários: </h3>
{% for comentario in comentarios %}
<div class="container" style="background-color:gainsboro; padding-bottom:2px; padding-top:10px;">
<i class="far fa-times-circle" style="float: right;"></i>
<p><strong>{{comentario.user}}</strong> </p>
<p style="float:right;">{{comentario.comentario}}</p>
<div class="circle1">
<img src="../../media/{{comentario.user.foto}}" class="fotoPerfil img-fluid" style="max-width: 80px;">
</div>
</div>
<br>
{% endfor %}**
<br>
{{msg}}
NOVO COMENTÁRIO <i class="far fa-comment"></i>
</ul>
</div>
</div>
{% endblock %}
views.py
#login_required
def listaComentarios(request, id1, id2):
user = get_object_or_404(CustomUser, pk=id2)
pregao = get_object_or_404(Pregao, pk=id1)
comentarios = Comentario.objects.all().filter(pregao=pregao)
if user == pregao.usuario:
return render(request, 'comentarios/lista-comentarios-dono.html', {'comentarios': comentarios, 'pregoe': pregao})
return render(request, 'comentarios/lista-comentarios.html', {'comentarios': comentarios, 'pregoe': pregao})
You need to add pagination and you will receive your queryset by parts.
You can get information on about in official Django docs.
https://docs.djangoproject.com/en/2.1/topics/pagination/#using-paginator-in-a-view