So i have a for loop to display the every property in properties, I don't get why my property description gets repeated for every property.
every other output is not repeated only the property description.
{% for property in propertys %}
<div class="listing-item">
<article class="geodir-category-listing fl-wrap">
<div class="geodir-category-img fl-wrap">
<a href="listing/{{ property.id }}" class="geodir-category-img_item">
<img src="{{property.header_image.url}}" style=" max-height: 210px;" alt="{{ property.header_image.url}}">
<div class="overlay"></div>
</a>
<div class="geodir-category-location">
<i class="fas fa-map-marker-alt"></i> {{ property.location }}
</div>
<ul class="list-single-opt_header_cat">
<li>{{ property.list_type }}</li>
<li>{{ property.home_type}}</li>
</ul>
<span><i class="fal fa-heart"></i></span>
<span><i class="fal fa-random"></i></span>
<div class="geodir-category-listing_media-list">
<span><i class="fas fa-camera"></i> 8</span>
</div>
</div>
<div class="geodir-category-content fl-wrap">
<h3>{{ property.name }}</h3>
<div class="geodir-category-content_price">$ {{ property.price }}</div>
<p>{{ property.description }}</p>
<div class="geodir-category-content-details">
<ul>
<li><i class="fal fa-bed"></i><span>{{ property.bedrooms }}</span></li>
<li><i class="fal fa-bath"></i><span>{{ property.total_bathrooms }}</span></li>
<li><i class="fal fa-cube"></i><span>{{ property.lot_size}} ft2</span></li>
</ul>
</div>
<div class="geodir-category-footer fl-wrap">
<img src="{{ property.agent.profilepic.url }}" alt=""><span>By {{ property.agent.first_name }} {{ property.agent.last_name}}</span>
<div class="listing-rating card-popup-rainingvis tolt" data-microtip-position="top" data-tooltip="Good" data-starrating2="3.9"></div>
</div>
</div>
</article>
</div>
{% endfor %}
Related
So I'm getting this error when I visit the page, I'm trying to use paginator and I don't know where i'm wrong, index function handles the page I'm talking about
views.py
def index(request):
listings = Listing.objects.all()
paginator = Paginator(listings, 3)
page = request.GET.get('page')
paged_listings = paginator.get_page(page)
params = {'listings':paged_listings}
return render(request, 'listings/listings.html', params)
def listing(request, listing_id):
return render(request, 'listings/listing.html')
def search(request):
return render(request, 'listings/search.html')
listings.html
{% extends 'base.html' %}
{% block content %}
{% load humanize %}
<!-- Breadcrumb -->
<section id="bc" class="mt-3">
<div class="container">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="{% url 'index' %}">
<i class="fas fa-home"></i> Home</a>
</li>
<li class="breadcrumb-item active"> Browse Listings</li>
</ol>
</nav>
</div>
</section>
<!-- Listings -->
<section id="listings" class="py-4">
<div class="container">
<div class="row">
{% if listings %}
{% for listing in listings %}
<div class="col-md-6 col-lg-4 mb-4">
<div class="card listing-preview">
<img class="card-img-top" src="{{ listing.photo_main.url }}" alt="">
<div class="card-img-overlay">
<h2>
<span class="badge badge-secondary text-white">${{ listing.price | intcomma}}</span>
</h2>
</div>
<div class="card-body">
<div class="listing-heading text-center">
<h4 class="text-primary">{{ listing.title }}</h4>
<p>
<i class="fas fa-map-marker text-secondary"></i>{{ listing.city }} {{ listing.state }}, {{ listing.zipcode }}</p>
</div>
<hr>
<div class="row py-2 text-secondary">
<div class="col-6">
<i class="fas fa-th-large"></i>Sqfit: {{ listing.sqft }}</div>
<div class="col-6">
<i class="fas fa-car"></i>Garage: {{ listing.garage }}</div>
</div>
<div class="row py-2 text-secondary">
<div class="col-6">
<i class="fas fa-bed"></i>Bedrooms: {{ listing.bedrooms }}</div>
<div class="col-6">
<i class="fas fa-bath"></i>Bathrooms: {{ listing.bathrooms }}</div>
</div>
<hr>
<div class="row py-2 text-secondary">
<div class="col-12">
<i class="fas fa-user"></i>{{ listing.realtor.name }}</div>
</div>
<div class="row text-secondary pb-2">
<div class="col-6">
<i class="fas fa-clock"></i>{{ listing.list_date | timesince }}</div>
</div>
<hr>
More Info
</div>
</div>
</div>
{% endfor %}
{% else %}
<div class="col-md-12">
<p>No Listings Available</p>
</div>
{% endif %}
<!-- Listing 1 -->
</div>
<div class="row">
<div class="col-md-12">
{% if listings.has_other_pages %}
<ul class="pagination">
{% if listings.has_previous %}
<li class="page-item">
«
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link">«</a>
</li>
{% endif %}
</ul>
{% endif %}
{% for i in listings.paginator.page_rage %}
{% if listings.number == i %}
<li class="page-item active">
<a class="page-link">{{ i }}</a>
</li>
{% else %}
<li class="page-item">
{{i}}
</li>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</section>
{% endblock %}
urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name="listings"),
path('<int:listing_id>', views.listing, name="=listing"),
path('search', views.search, name="=search"),
]
There's a Typo in your urls.py
Try to use this :-
path('listing/<int:listing_id>/', views.listing, name='listing'),
Where was the typo ?
You were using this :-
path('<int:listing_id>', views.listing, name="=listing"),
----------------------------------------------^
I am making a django app. This is my index.html template:
{% extends "blog/base.html" %}
{% block content %}
{% if latest_post %}
<div class="jumbotron p-4 p-md-5 text-white rounded bg-dark">
<div class="col-md-6 px-0">
<h1 class="display-4 font-italic">
{{ latest_post.title }}
</h1>
<p class="lead my-3">
{{ latest_post.body|truncatewords:30 }}
</p>
<p class="lead mb-0">
Continue reading...
</p>
</div>
</div>
{% endif %}
{% for post in posts %}
<div class="row mb-2">
<div class="col-md-6">
<div
class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"
>
<div class="col p-4 d-flex flex-column position-static">
<h3 class="mb-0">{{ post.title }}</h3>
<div class="mb-1 text-muted">{{ post.date_posted }}</div>
<p class="mb-auto">
{{ post.body|truncatewords:30 }}
</p>
Continue reading
{% endfor %}
{% endblock %}
However, I am getting this error:
django.template.exceptions.TemplateSyntaxError: Unclosed tag on line 2: 'block'. Looking for one of: endblock. in django
I have made sure:
All the blocks are closed
There is no whitespaces between the percent signs and the block names
I am not missing any percent signs
Please help me
Inside for loop you have four opened <div> element after closing those it seems ok.
{% for post in posts %}
<div class="row mb-2">
<div class="col-md-6">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<h3 class="mb-0">{{ post.title }}</h3>
<div class="mb-1 text-muted">{{ post.date_posted }}</div>
<p class="mb-auto">
{{ post.body|truncatewords:30 }}
</p>
Continue reading
</div></div></div></div>
{% endfor %}
I'm trying to make a for loop to build an accordion in Bootstrap, but every time I click the button to expand/ collapse a card, every card expands/ collapses. I think this is due to a shared id across all cards, so I want to use the post title as the id selector for each card. Here is the code I currently have:
{% for post in blog_posts %}
<div id="accordion">
<div class="card">
<h3 class="card-header" id="header">
<button class="btn btn-info" data-toggle="collapse"
data-target="#body" aria-expanded="false"
aria-controls="post: ">
{{ post.title }}
<small><p>Posted by {{ post.author }} on
{{ post.date_added|date:'D M d, Y H:i' }}</p></small>
</button>
</h3>
<div id="body" class="collapse show" aria-labelledby="header"
data-parent="#accordion">
<div class="card-body">
{{ post.text|linebreaks }}
<small>
<a class="text-dark" href="{% url 'blogs:edit_post' post.id %}">
edit post</a>
</small>
</div>
</div>
</div>
{% empty %}
<p>There are no posts to display.</p>
{% endfor %}
I've tried changing the h3 id to {{ post.title }}, but that doesn't seem to work. Any help is much appreciated.
Example code:
https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example
You need the id's to be unique for each accordion section (otherwise they will all open at once), you could use the post.id for that.
{% if blog_posts %}
<div id="accordion">
{% for post in blog_posts %}
<div class="card">
<h3 class="card-header" id="header-{{post.id}}">
<button class="btn btn-info" data-toggle="collapse"
data-target="#post-{{post.id}}" aria-expanded="false"
aria-controls="post-{{post.id}}">
{{ post.title }}
<small><p>Posted by {{ post.author }} on
{{ post.date_added|date:'D M d, Y H:i' }}</p></small>
</button>
</h3>
<div id="post-{{post.id}}" class="collapse show" aria-labelledby="header-{{post.id}}"
data-parent="#accordion">
<div class="card-body">
{{ post.text|linebreaks }}
<small>
<a class="text-dark" href="{% url 'blogs:edit_post' post.id %}">
edit post</a>
</small>
</div>
</div>
{% endfor %}
</div>
{% else %}
<p>There are no posts to display.</p>
{% endif %}
So I am developing a website and for the life of me I can't figure out how to align the description, price, stock and add cart button in multiple versions of the same <div>. I know it is to do with the size of the image I am using but I'm not sure how to fix this.
Here is a diagram of how I want it to look:
But when I apply a 'h-100' class to the card <div> this is what happens:
I want the images to keep their positions but for the descriptions, add cart button and price/stock to all be horizontally aligned, as well as the height of the overall cards to be the same.
Here is my Django template code:
{% extends 'base.html' %}
{% block content %}
<div class="container-fluid">
<div class="jumbotron">
<h2>Welcome to MyTea</h4>
<p>Here we have teas of all varieties from all around the globe</p>
</div>
<div class="row">
<div class="col-sm-3">
<h4>Categories</h4>
<ul class="list-group">
All Categories
{% for c in countcat %}
<a href="{{ c.get_absolute_url }}" class="list-group-item catheight">{{c.name}}
<span class="badge badge-light">{{c.num_products}}</span>
</a>
{% endfor %}
</ul>
</div>
<div class="col-sm-9">
{% for product in products %}
{% if forloop.first %}<div class="row">{% endif %}
<div class="col-sm-6">
<div class="card border-primary mt-3 h-100">
<div class="card-header"><h3>{{product.name}}</h3></div>
<div class="card-body">
{% if product.image %}
<div class="h">
<img src="{{product.image.url}}" class="img-fluid">
</div>
{% endif %}
<p class="bg-light font-weight-light ">{{product.description}}</p>
{% if product.stock > 0 %}
<a href="{% url 'add_cart' product.id %}" type="button" class="btn btn-primary btn-sm mb-2">
<p class="m-0">Add to cart</p>
</a>
{% else %}
<a href="#" type="button "class="btn btn-danger btn-sm mb-2">
<p class="m-0">Out of stock</p>
</a>
{% endif %}
<div class="card-footer">
<p>Price: €{{product.price}}</p>
<p>Stock left: {{product.stock}}</p>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% endblock content %}
Thanks for any help
The code can be corrected with a simple re-alignment of the content inside .card and correctly closing </div> statements.
Remove {% if forloop.first %}<div class="row">{% endif %} statement and place <div class="row"> above the for loop.
Add to cart and Out of stock buttons should be placed inside .card-footer and .card-body should be closed appropriately. This will leave the image and description within .card-body
Make sure h-100 class is added to `.card'.
Might I suggest adding end of div comments to all the div statements. The code is readable better in this way and helps in mitigating missing or misplaced </div> statements.
{% extends 'base.html' %}
{% block content %}
<div class="container-fluid">
<div class="jumbotron">
<h2>Welcome to MyTea</h4>
<p>Here we have teas of all varieties from all around the globe</p>
</div>
<!-- .jumbotron -->
<div class="row">
<div class="col-sm-3">
<h4>Categories</h4>
<ul class="list-group">
All Categories
{% for c in countcat %}
<a href="{{ c.get_absolute_url }}" class="list-group-item catheight">{{c.name}}
<span class="badge badge-light">{{c.num_products}}</span>
</a>
{% endfor %}
</ul>
</div>
<!-- .col-sm-3 -->
<div class="col-sm-9">
<div class="row">
{% for product in products %}
<div class="col-sm-6">
<div class="card border-primary mt-3 h-100">
<div class="card-header">
<h3>{{product.name}}</h3>
</div>
<!-- .card-header -->
<div class="card-body">
{% if product.image %}
<div class="h">
<img src="{{product.image.url}}" class="img-fluid">
</div>
<!-- .h -->
{% endif %}
<p class="bg-light font-weight-light ">{{product.description}}</p>
</div>
<!-- .card-body -->
<div class="card-footer">
{% if product.stock > 0 %}
<a href="{% url 'add_cart' product.id %}" type="button" class="btn btn-primary btn-sm mb-2">
<p class="m-0">Add to cart</p>
</a>
{% else %}
<a href="#" type="button " class="btn btn-danger btn-sm mb-2">
<p class="m-0">Out of stock</p>
</a>
{% endif %}
<p>Price: €{{product.price}}</p>
<p>Stock left: {{product.stock}}</p>
</div>
<!-- .card-footer -->
</div>
<!-- .card -->
</div>
<!-- . col-sm-6 -->
{% endfor %}
</div>
<!-- .row -->
</div>
<!-- .col-sm-9 -->
</div>
<!-- .row -->
</div>
<!-- .container-fluid -->
{% endblock content %}
I have figured out how to use bootstrap carousel but problem is I want to render my featured stories to be in the carousel.
currently I have a carousel that shows three slides, but what I'm trying to do is to have featured stories instead of the three slides.
<div class='carousel slide' id="myCarousel">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#myCarousel"></li>
<li class="active" data-slide-to="1" data-target="#myCarousel"></li>
<li class="active" data-slide-to="2" data-target="#myCarousel"></li>
</ol>
<div class="carousel-inner">
<div class="item active" id="slide1">
<img src="http://i.imgur.com/SQ691ZO.jpg" >
<div class="carousel-caption">
<h4>hello</h4>
<p>hi you</p>
</div>
</div>
<div class="item" id="slide2">
<img src="http://i.imgur.com/zN4h51m.jpg" >
<div class="carousel-caption">
<h4>hello</h4>
<p>hi you</p>
</div>
</div>
<div class="item" id="slide3">
<img src="http://i.imgur.com/3ruWvoG.jpg">
<div class="carousel-caption">
<h4>hello</h4>
<p>hi you</p>
</div>
</div>
</div>
<a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a>
<a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a>
So this is what I tried that's not quite working.
I have
{% for a in featuredStory %}
{{a.title}}
{{a.sub}}
<img src='{{a.get_featuredImage_url}}' class="img-rounded" alt="Cinque Terre" width="330" height="236"/>
{% endfor %}
working fine, but problem is to incorporate these with carousel.
with one featured story it works but with more than one, I get one in the top one in the bottom.
Here;s what I tried
<div class="row">
<div class="col-sm-8">
{% for a in featuredStory %}
<div class='carousel slide' id="myCarousel">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#myCarousel"></li>
<li class="active" data-slide-to="1" data-target="#myCarousel"></li>
<li class="active" data-slide-to="2" data-target="#myCarousel"></li>
</ol>
<div class="carousel-inner">
<div class="item active" id="slide1">
<img src='{{a.get_featuredImage_url}}' class="img-rounded" alt="Cinque Terre" width="330" height="236"/> <div class="carousel-caption">
<h4> {{a.title}}</h4>
<p> {{a.sub}}
</p>
</div>
</div>
</div>
<a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a>
<a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a>
{% endfor %}
</div>
</div>
You can use the for loop inside carousel-inner:
<div class="carousel-inner">
{% for a in featuredStory %}
<div class="item {% if forloop.counter == 1 %}active{% endif %}" id="slide{{ forloop.counter }}">
<img src="{{ a.get_featuredImage_url }}" >
<div class="carousel-caption">
<h4>{{ a.title }}</h4>
<p>{{ a.sub}}</p>
</div>
</div>
{% endfor %}
</div>
Make sure to activate the first item by checking the counter:
{% if forloop.counter == 1 %}active{% endif %}
If there are other information such as class, title etc. that also you can set in context on the featuredStory and then render it here same as title or url.
Create div[class=item] dynamically with for loop in next way:
{% for item in featuredStory %}
<div class="item" id="slide{{forloop.counter}}">
<img src="item.get_featuredImage_url">
<div class="carousel-caption">
<h4>{{ item.title }}</h4>
<p>{{ item.sub }}</p>
</div>
</div>
{% endfor %}
I used loop.index instead of forloop.counter
<div class="carousel-inner">
{% for item in sliders %}
<div class="carousel-item {% if loop.index == 1 %}active{% endif %}" id="slide{{ loop.index }}" >
<img class="d-block w-100" width="330" height="236" src="{{ url_for('static', filename='images/sliders/') }}{{ item.imagelocation }}" alt="{{item.filmtitle}}">
<div class="carousel-caption">
<h4>{{ item.filmtitle }}</h4>
</div>
</div>
{% endfor %}
</div>