I am creating a Django blog app and I was wondering if it was possible to have the first blog post as pictured in this design.
What I have done so far is that I have been able to get the bottom three articles but I have been confused on how to approach the top post.
This is my template code so far:
<div class="row">
<!-- Blog Entries Column -->
{% for article in articles %}
<div class="col-lg-4 mt-4 ">
<div class="card mb-4">
<div class="card-body">
<h2 class="card-title">{{ article.title }}</h2>
<p class="card-text text-muted h6"> <img class="image-size radius-of_image" src="article/{{ article.upload_image }}"> | {{ article.author }} | {{ article.created_on | date}} </p>
<p class="card-text">{{article.content|slice:":200" }}</p>
Read More →
</div>
</div>
{% if forloop.counter|divisibleby:"3" and not forloop.last %}
<div class="row">
{% endif %}
</div>
{% endfor %}
</div>
</div>
This is how my views look like
def home(request):
if request.method == 'GET':
queryset = Post.objects.filter(status=1).order_by('-created_on')
articles = {
"articles": queryset
}
return render(request, 'home.htm', articles)
django has several template filters which are easy to use and avoid headache of developers. You can use {{ value|first }} to display the first model instance in your template from your query set
Related
I am trying to call parent and child element of a model, I have gone through the MPTT model documentation. I did as mentioned on the documentation, but my template is failing to print children
What can be the possible cause of this problem?
Here is my Views:
def category_view(request):
category = Categories.objects.all()
brands = Brands.objects.all()
context ={
'category':category,
'brands':brands,
}
return render(request,'./ecommerce/categories.html', context)
and Here is my template HTML:
{% load mptt_tags %}
{% recursetree category%}
<div class="category-wrap mb-4">
<div class="category category-group-image br-sm">
<div class="category-content">
<h4 class="category-name">{{ node.name }}
</h4>
<ul class="category-list">
{% if not node.is_leaf_node %}
<li>{{children}}</li>
{% endif %}
</ul>
</div>
</div>
</div>
<!-- End of Category Wrap -->
{% endrecursetree %}
Parent element is printed but children element is not being printed
Doing a lot of hit and trial, generic approach solved my problem. Others having similar problem could be benefited from my answer, hence posting the solution.
Views:
category = Categories.objects.filter(parent=None)
Template:
{% for category in categories %}
<div class="category-wrap mb-4">
<div class="category category-group-image br-sm">
<div class="category-content">
<h4 class="category-name">{{ category.name }}
</h4>
<ul class="category-list">
{% for cat in category.get_children %}
<li>{{ cat.name }} </li>
{% endfor %}
</ul>
</div>
</div>
</div>
<!-- End of Category Wrap -->
{% endfor %}
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
I am trying to edit the details I gathered using a form with POST method now I want to edit those details. I tried it but it is not working can you guys tell what am I doing wrong ?
View of edit post
#login_required()
def edit_product(request, product_id):
form = NewPro()
edit = get_object_or_404(Product, product_id)
if request.method == 'POST':
form = NewPro(request.POST, request.FILES)
if form.is_valid():
form.save()
return redirect('product')
else:
form = NewPro()
return render(request, "default/edit.html", {'form': form, 'edit': edit})
Url pattern
path('<int:product_id>/edit_product', views.edit_product, name='edit_product')
Html where I am trying to add the button
{% extends 'default/dashboard.html' %}
{% block content %}
<h1>Products Details </h1>
<p>These are the details of your product, {{ user.username }}</p>
<ul>
<li>{{ product_details.name }}</li>
<li>{{ product_details.price }}</li>
<li>{{ product_details.category }}</li>
<li>{{ product_details.store }}</li>
<li>{{ product_details.user }}</li>
</ul>
<a href={% url 'edit_product' edit.id %}>
<button>Edit Product</button>
</a>
{% endblock %}
Html where I am trying to show the form
{% extends 'default/dashboard.html' %}
<html>
<head><title>E-Commerce App</title></head>
{% block content %}
<h2>Edit Product</h2>
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">submit</button>
</form>
{% endblock %}
</html>
I want to used this card instead of the one you gave me.
<div class="card-deck">
<div class="card">
<img class="card-img-top" src=".../100px200/" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src=".../100px200/" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src=".../100px200/" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
You have to pass the instance of the product you want to edit to your form.
#login_required()
def edit_product(request, product_id):
product_to_edit = get_object_or_404(Product, pk=product_id)
form = NewPro(instance=product_to_edit)
if request.method == 'POST':
form = NewPro(request.POST, request.FILES, instance=product_to_edit)
if form.is_valid():
form.save()
return redirect('product')
else:
form = NewPro(instance=product_to_edit)
return render(request, "default/edit.html", {'form': form, 'product': product_to_edit})
On the comments you asked how to display all products inside cards so that there are 4 products per row. Try this out!
<div class="container">
<div class="row">
{% for product in products %}
<div class="col-sm-3">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">{{ product.title }}</h5>
<p class="card-text">{{ product.description }}</p>
Edit Product
</div>
</div>
</div>
{% endfor %}
</div>
</div>
For the issue you raise about using a card deck instead, This is how I would do it.
Please Note: I haven't tested it.
views.py:
def all_products(request):
products = Product.objects.all()
grouped_products = []
temp = []
for i in range(len(products)):
if (i+1) % 3 == 0:
grouped_products.append(temp)
temp = []
temp.append(products[i])
return render(request, 'products.html', {'products': grouped_products})
templates:
<div class="container">
{% for product_list in products %}
<div class="row">
<div class="card-deck">
{% for product in product_list %}
<div class="card">
<img class="card-img-top" src=".../100px200/" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
I'm studying django and trying to make a simple CRUD, following the djangoGirls tutorial. But unfortunatelly they don't show how to UPDATE data.
I'm already Inserting, Reading/listing how may I Delete and Update?
I listed the users with a link to edit it:
{% extends 'bloodDonation/master.html' %}
{% block content %}
<h1 class="center">LIST DONATORS<h1>
<ul>
{% for donator in donators %}
<div class="row">
<div class="container">
<div class="col s12 blue-grey lighten-5 border_lighten">
<div class="col s12 m12 padding_normal">
{{ donator.name }}
<div id="icon" class="right">
<i class="material-icons">edit</i>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</ul>
{% endblock %}
As you can see, I have an a tag pointing to edit_donator url.
How may I pass the ID/data of the selected/clicked user so I can pull his data and throw it inside the form?
Form creation:
class EditDonatorForm(forms.ModelForm):
class Meta:
model = Donator
fields = [ 'name', 'age', 'email', 'phone', 'bloodType', 'observation' ]
Trying to pass the ID:
url(r'^donator/(?P<pk>\d+)/update/$', views.edit_donator, name='edit_donator'),
How may I get data from database and already place it inside form so I can perform an Update?
You don't require to send the data to another link. You can update the details on the same URL.
Change your HTML to this:
{% extends 'bloodDonation/master.html' %}
{% block content %}
<h1 class="center">LIST DONATORS<h1>
<ul>
{% for donator in donators %}
<div class="row">
<div class="container">
<div class="col s12 blue-grey lighten-5 border_lighten">
<div class="col s12 m12 padding_normal">
{{ donator.name }}
<div id="icon" class="right">
<i class="material-icons">edit</i>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</ul>
{% endblock %}
In your view write,
if 'edit-donator' in request.GET:
edit_data = YourModel.objects.get(id=request.GET['edit-donator'])
form = EditDonatorForm(instance=edit_data)
This will get the data from the model and pass it to the template.
Now you can perform the update.
Hope this helps :)
the user is able to create a post and it will be shown the in the list. I've also created a users profile/summary page where the user can edit/delete their posts.
Currently, it's showing blank and I'm not quite sure why?Am I supposed to get the instance or is it fine the way it is?
Model
class Aircraft(AircraftModelBase):
user = models.ForeignKey(User)
manufacturer = SortableForeignKey(Manufacturer)
aircraft_type = SortableForeignKey(AircraftType)
View
def upload_overview(request):
uploaded_aircraft = Aircraft.objects.filter(user=request.user)
return render(request,'account/upload_overview.html',{'UploadedAircraft':uploaded_aircraft})
Template
<div class="container">
<div class="row aircraft">
{% if UploadedAircraft %}
{% for upload in UploadedAircraft %}
<div class="col-lg-offset-0 col-md-4 col-sm-3 item">
<div class="box"><img src="{{ upload.aircraft.image.url }}" width="200px" height="200px" alt="{{ upload.aircraft.title }}"/>
<h3 class="name">{{ upload.aircraft.name }}</h3>
</div>
</div>
{% endfor %}
{% else %}
<h2 class="text-center">No uploaded aircraft posts..</h2></div>
{% endif %}
</div>