how to make the divs at the same size - django

how can i make all the divs at the same size
i am using django ??
<div class="row text-left">
{% for meg in objj %}
<div class="col-lg-6 col-md-12">
<!--Image-->
<div class="view overlay rounded z-depth-1-half mb-3">
<img src="{{ meg.img.url }}" class="img-fluid" alt="Sample post image" height="100%"
width="150%">
<a>
<div class="mask rgba-white-slight"></div>
</a>
{% endfor %}
models:
class News(models.Model):
title = models.CharField(max_length=250)
body = models.TextField()
img = models.ImageField(upload_to='media/')
def __str__(self):
return self.title
enter image description here

The way you are doing, it is going to generate the divs of the same size only.
But then you are forgetting the </div> inside the for loop.
Fixing that will work for you.
{% for meg in objj %}
<div class="col-lg-6 col-md-12">
<!--Image-->
<div class="view overlay rounded z-depth-1-half mb-3">
<img src="{{ meg.img.url }}" class="img-fluid" alt="Sample post image" height="100%"
width="150%">
<a>
<div class="mask rgba-white-slight"></div>
</a>
<!---- !!!!!!!! you are missing the below 2 closing divs --->
</div>
</div>
{% endfor %}

Related

i am unable to pass data from view.py to html templates django

My name is arslan chaudhry, currently i am working with django. In my django project i have made some filters to filter the product category wise.i have successfully display the category of products. But when i click on the category image i recived an empity page no error is dispalyed.
I think data are not passing from view.py to html template.How i can fix this?
the code is given below.
views.py
def collectionsview(request, slug):
if(Category.objects.filter(slug=slug, status=0)):
products=Product.objects.filter(category__slug=slug)
category_name=Category.objects.filter(slug=slug).first()
contex={products:"products",category_name:"category_name"}
print(products)
return render(request, "store/product/index.html", contex)
else:
return HttpResponse('This is not a valid product')
html template
{% extends 'store/layouts/main.html' %}
{% block title %}Home{% endblock title %}
{% block body %}
<div class="container mt-3">
<div class="row">
<div class="col-md-12">
<h4>{{category_name}}</h4>
<div class="row">
{% for item in products %}
<div class="col-md-2">
<div class="card">
<a href="#">
<div class="card-body ">
<div class="card-image">
<img src="{{item.imge.url}}" alt="" width="100%" height="100%">
<h4 class="text-center mt-1" style="font-size: medium; font-weight: 600;">{{item.name}}</h4>
</div>
<span>{{item.original_price}}</span>
<span>{{item.selling_price}}</span>
</div>
</a>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% endblock body %}

How to make data that comes from Django database appear horizontally?

In this Image, the data appears in vertical format. But I want data in horizontal format.
{% block title %}Blog{% endblock title %}
{% block body %}
<div class="container">
<div class="row">
{% for post in posts%}
<div class="col-lg-3">
<div class="card" style="width: 31.25rem;">
<!-- <div class="card"> -->
<img class="img-fluid card-img-top" src="https://images.unsplash.com/photo-1591154669695-5f2a8d20c089?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80" alt="Card image cap" style="height: 250px;width: 500px;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
<div class="post block">
<h2 class="subtitle">{{post.title}}</h2>
<small>Posted At {{post.date_added}}</small>
<p>{{post.intro}}</p>
Read More
</div>
{% endfor %}
{% endblock body %}
Hi There I'm Newbie In Django
How Can I Able To Appear Horizontally The Data Is Come From Database
So The Problem Was I Was Ending Row Inside For Loop To Create New Row You Have To Put For Loop Outside
Check This Code
{% extends 'base.html' %}
{% block title %}Blog{% endblock title %}
{% block body %}
<div class="container">
<div class="row">
{% for post in posts%}
<div class="col-lg-4">
<div class="card" style="width: 31.25rem;">
<!-- <div class="card"> -->
<img class="img-fluid card-img-top" src="https://images.unsplash.com/photo-1591154669695-5f2a8d20c089?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80" alt="Card image cap" style="height: 250px;width: 500px;">
<div class="card-body">
<h5 class="card-title">{{post.title}}</h5>
{{post.date_added}}
<p class="card-text">{{post.intro}}</p>
Go somewhere
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock body %}

display data in multiple columns with for loop

I'm sure this is a simple answer but for the life of me I cant figure / find out how to go about this.
I want to display blog posts from my data base in three equal columns.
When I start looking into the bootstrap docs this is the code given.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
However If I go to implement it I dont understand how i would be able to put the for loop on it without it repeating everything 3 times. IE:
{% for post in posts.all %}
<div class="row">
<div class="col-sm">
<img class="post-image" src="{{ post.image.url }}" />
</div>
<div class="col-sm">
<img class="post-image" src="{{ post.image.url }}" />
</div>
<div class="col-sm">
<img class="post-image" src="{{ post.image.url }}" />
</div>
</div>
{% endfor %}
If you could please point me in the right direction on how to go about this it would be very much appreciated bootstrap is not a requirement.
The view should "prepare" the data to make it easy to enumerate over this. We can create chunks with:
def some_view(request):
posts = list(Post.objects.all())
posts = [posts[i:i+3] for i in range(0, len(posts), 3)]
return render(request, 'some-template.html', {'products': products})
in the template we can then work with a double {% for … %}…{% endfor %} loop [Django-doc]:
{% for chunk in posts %}
<div class="row">
{% for post in chunk %}
<div class="col-sm">
<img class="post-image" src="{{ post.image.url }}" />
</div>
{% endfor %}
</div>
{% endfor %}

How to filter out Friends of user in search users function Django

I'm trying to filter out the friends of a user and also the current logged in user from a "search_users" function, I've tried using exclude() but keep getting an error I'm not sure whats wrong. I also wanted to add a "add friend" button next to the users, which I think I've done correctly on 'search_users.html.
Error
views.py
#login_required
def search_users(request):
query = request.GET.get('q')
object_list = User.objects.filter(username__icontains=query).exclude(friends=request.user.profile.friends.all())
context ={
'users': object_list
}
return render(request, "users/search_users.html", context)
search_users.html
{% extends "feed/layout.html" %} {% load static %}
{% block searchform %}
<form
class="form-inline my-2 my-lg-0 ml-5"
action="{% url 'search_users' %}"
method="get"
>
<input name="q" type="text" placeholder="Search users.." />
<button class="btn btn-success my-2 my-sm-0 ml-10" type="submit">
Search
</button>
</form>
{% endblock searchform %} {% block content %}
<div class="container">
<div class="row">
<div class="col-md-8">
{% if not users %}
<br /><br />
<h2><i>No such users found!</i></h2>
{% else %}
<div class="card card-signin my-5">
<div class="card-body">
{% for user_p in users %}
<a href="{{ user_p.profile.get_absolute_url }}"
><img
src="{{ user_p.profile.image.url }}"
class="rounded mr-2"
width="40"
height="40"
alt=""
/></a>
<a class="text-dark" href="{{ user_p.profile.get_absolute_url }}"
><b>{{ user_p }}</b></a
>
<small class="float-right">
<a
class="btn btn-primary mr-2"
href="/users/friend-request/send/{{ user_p.username }}"
>Add Friend</a>
</small>
<br/><br />
{% endfor %}
</div>
</div>
{% endif %}
</div>
<div class="col-md-4">
<div class="card card-signin my-5">
<a href="{{ request.user.profile.get_absolute_url }}"
><img
class="card-img-top"
src="{{ request.user.profile.image.url }}"
alt=""
/></a>
<div class="card-body">
<h5 class="card-title text-center">{{ request.user }}</h5>
<h6 class="text-center">
{{ request.user.profile.friends.count }}
<p class="text-muted">Friends</p>
</h6>
<p class="card-text text-center">{{ request.user.profile.bio }}</p>
</div>
</div>
</div>
</div>
{% endblock content %}
</div>
models.py
class Profile(models.Model):
user = models.OneToOneField(User, on_delete=models.CASCADE)
image = models.ImageField(default='default.png', upload_to='profile_pics')
slug = AutoSlugField(populate_from='user')
bio = models.CharField(max_length=255, blank=True)
friends = models.ManyToManyField('Profile', blank=True)
I would have done like this :
object_list = User.objects\
.filter(username__icontains=query)\
.exclude(profile__friends__in=request.user.profile.friends.all())\
.exclude(id=request.user.id)
It should be
User.profile.objects.filter(username__icontains=query).exclude(friends=request.user.profile.friends.all())
You were getting an error earlier because you referred to the user object earlier and not the profile itself. User.profile gives the one to one related model profile instead.
You can read more about one to one relationships here. https://docs.djangoproject.com/en/3.1/topics/db/examples/one_to_one/

Django - NoReverseMatch at /project/3/evillio

I'm working on a portfolio project and i face a strange problem when trying to list a project, ( class-based-views-DetailView). More specifically when trying to list a project for example /project/3/evillio i got following error Reverse for 'project-detail' with arguments '('', '')' not found. 1 pattern(s) tried: ['project/(?P<pk>[0-9]+)/(?P<slug>[-a-zA-Z0-9_]+)$'] but when i add a new project, i'm able to list /project/3/evillio with no problem, however i got the same error on the next project /project/4/urban.
For example i add 2 projects in project table (using Postgres) then going to list details of each project. Click on project1 and works fine. Then click on project 2 and i got error above. Then i add a third project in project table and going to list details of each project. Click on project1 works fine, click on project2 works fine, click on project3 and i got the same error as on project2 before adding project3.
I hope is more clear.
urls.py
path('project/<int:pk>/<slug:slug>', WorkProjectsDetailView.as_view(), name='project-detail'),
views.py
class IndexView(ListView):
model = Project
template_name = 'pages/index.html'
context_object_name = 'projects'
def get_context_data(self, **kwargs):
context = super(IndexView, self).get_context_data(**kwargs)
context['slider_projects'] =
Project.objects.all().filter(slider_project=True)
return context
class WorkProjectsView(ListView):
model = Project
template_name = 'work/work.html'
queryset = Project.objects.all()
context_object_name = 'projects'
ordering = ['-date_created']
def get_context_data(self, *, object_list=None, **kwargs):
context = super(WorkProjectsView, self).get_context_data(**kwargs)
context['categories'] = Category.objects.all()
return context
class WorkProjectsDetailView(DetailView):
model = Project
template_name = 'work/project-detail.html'
context_object_name = 'single_project'
def get_context_data(self, **kwargs):
context = super(WorkProjectsDetailView, self).get_context_data(**kwargs)
context['next'] = Project.objects.filter(id__gt=self.kwargs['pk']).order_by('pk').first()
return context
work.html
<div class="projects-list gallery">
{% if projects %}
{% for project in projects %}
<div class="item brand">
<a href="{% url 'project-detail' pk=project.pk slug=project.slug %}" class="effect-ajax" data-dsn-ajax="work"
data-dsn-grid="move-up">
<img class="has-top-bottom" src="{{ project.featured_image.url }}" alt="" />
<div class="item-border"></div>
<div class="item-info">
<h5 class="cat">{{ project.category }}</h5>
<h4>{{ project.title }}</h4>
<span><span>View Project</span></span>
</div>
</a>
</div>
{% endfor %}
{% else %}
<div class="col-lg-8">
<p>No Projects Available</p>
</div>
{% endif %}
</div>
index.html
{% for project in slider_projects %}
<div class="work-item slick-slide">
<img class="has-top-bottom" src="{{ project.featured_image.url }}" alt="">
<div class="item-border"></div>
<div class="item-info">
<a href="{% url 'project-detail' pk=project.pk slug=project.slug %}" data-dsn-grid="move-up" class="effect-ajax">
<h5 class="cat">{{ project.category}}</h5>
<h4>{{ project.title }}</h4>
<span><span>View Project</span></span>
</a>
</div>
</div>
{% endfor %}
project-detail.html
{% extends 'base.html' %}
{% load static %}
{% block content %}
<main class="main-root">
<div id="dsn-scrollbar">
<header>
<div class="headefr-fexid" data-dsn-header="project">
<div class="bg w-100" id="dsn-hero-parallax-img" data-dsn-ajax="img">
<div class="bg-image cover-bg" data-overlay="4"
data-image-src="{{ single_project.hero_image.url }}"></div>
</div>
<div class="scroll" data-dsn-animate="ajax">
<span class="background"></span>
<span class="triangle"></span>
</div>
<div class="project-title" id="dsn-hero-parallax-title" style="margin-top: 100px;">
<div class="title-text-header">
<div class="cat">
<span>{{ single_project.category}}</span>
</div>
<span class="title-text-header-inner">
<span data-dsn-animate="ajax">{{ single_project.title }}</span>
</span>
</div>
<div class="sub-text-header" data-dsn-animate="ajax">
<h5>Published</h5>
<span>- {{ single_project.date_created }}</span>
</div>
</div>
<div class="project-page__inner">
<div class="h-100">
<div class="row justify-content-center align-items-end h-100">
<div id="descover-holder" class="col-lg-12 project-meta__content">
<div class="link">
<a target="_blank"
href="https://www.behance.net/gallery/57437111/Under-Armour-Cal?tracking_source=search%7CPhotography">View
Website</a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="wrapper">
<div class="root-project">
<div class="container intro-project section-margin">
<div class="intro-text">
<div class="title-cover" data-dsn-grid="move-section" data-dsn-opacity="0.1"
data-dsn-duration="170%" data-dsn-move="0%">
Nile
</div>
<div class="inner">
<h2 data-dsn-animate="text">A whole new brand</h2>
<p data-dsn-animate="up">Striking and powerful Aston Martin Vantage captivates you at
the first sight. We couldn’t resist the temptation to create a series of beautiful
images for this car.</p>
<a class="bottom-link" data-dsn-animate="up"
href="https://www.behance.net/gallery/66646747/Nile" target="_blank">
<span></span>
<span></span>
<div class="content">
<div class="inner">
<p>VISIT SITE</p>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="container section-margin">
<div class="img-box-small dsn-parallax-full" data-dsn-grid="move-up">
<img src="{{ single_project.photo_1.url }}" alt="">
<div class="cap">
<span>Web Design</span>
</div>
</div>
</div>
<div class="container-fluid section-margin">
<div class="img-box-small dsn-parallax-full" data-dsn-grid="move-up" data-dsn-triggerhook="0">
<img src="{{ single_project.photo_2.url }}" alt="" data-dsn-y="30%" data-dsn-scale="1.08">
<div class="cap">
<span>Web Design</span>
</div>
</div>
</div>
<div class="container intro-project section-p section-margin">
<div class="intro-text text-center">
<div class="title-cover" data-dsn-grid="move-section" data-dsn-opacity="0.1"
data-dsn-duration="170%" data-dsn-move="0%">
Nile
</div>
<div class="inner">
<h2 data-dsn-animate="text">
The Brief team has been sincerely committed to
designing great communication around our projects. Our customers love
their
creative work - and so do we!
</h2>
</div>
</div>
</div>
<!--Video-->
<div class=" " data-dsn="video" data-overlay="4" data-dsn-ajax="img">
<video class="image-bg cover-bg dsn-video" controls loop muted>
<source src="{{ single_project.video.url }}" type="video/mp4">
</video>
</div>
<!--<div class="container section-margin">
<div class="img-box-small dsn-parallax-full" data-dsn-grid="move-up">
<img src="{{ single_project.photo_3.url }}" alt="">
<div class="cap">
<span>Web Design</span>
</div>
</div>
</div>-->
<div class="container-fluid section-margin">
<div class="img-box-small dsn-parallax-full" data-dsn-grid="move-up" data-dsn-triggerhook="0">
<img src="{{ single_project.photo_4.url }}" alt="" data-dsn-y="30%" data-dsn-scale="1.08">
<div class="cap">
<span>Web Design</span>
</div>
</div>
</div>
</div>
<div class="next-project" data-dsn-footer="project">
<div id="dsn-next-parallax-img" class="bg">
<div class="bg-image cover-bg" data-overlay="2"
data-image-src="{{ next.featured_image.url }}"></div>
</div>
<div id="dsn-next-parallax-title" class="project-title">
<a href="{% url 'project-detail' next.pk next.slug %}" class="effect-ajax" data-dsn-ajax="next-project">
<div class="title-text-header">
<div class="title-text-header-inner">
<span>{{ next.title }}</span>
</div>
</div>
<div class="sub-text-header">
<h5>Next Project</h5>
</div>
</a>
</div>
</div>
Any help appreciated.
The error you're receiving is because of this line toward the bottom of project-detail.html:
<a href="{% url 'project-detail' next.pk next.slug %}" class="effect-ajax" data-dsn-ajax="next-project">
if there is no next (context["next"]), then django can't figure out the url, and you get the error you're seeing.
Wrap the last segment for the link to "next" with {% if next %}:
{% if next %}
<div class="next-project" data-dsn-footer="project">
<div id="dsn-next-parallax-img" class="bg">
<div class="bg-image cover-bg" data-overlay="2"
data-image-src="{{ next.featured_image.url }}"></div>
</div>
<div id="dsn-next-parallax-title" class="project-title">
<a href="{% url 'project-detail' next.pk next.slug %}" class="effect-ajax" data-dsn-ajax="next-project">
<div class="title-text-header">
<div class="title-text-header-inner">
<span>{{ next.title }}</span>
</div>
</div>
<div class="sub-text-header">
<h5>Next Project</h5>
</div>
</a>
</div>
</div>
{% endif %}