'how to display 6 of the latest properties
I am trying to show only 6 of the latest properties on my site by inserting each property literal inside their respective HTML tag because I have a fixed HTML layout for it I only know how to display everything in a for loop. and also how do I upload multiple images in Django
here are the models, views, and HTML codes below.
#views.py
from random import randint
from django.shortcuts import render, redirect
from django.contrib.auth.models import User, auth
from django.contrib import messages
from django.contrib.auth.decorators import login_required
from django.http import HttpResponse
from .models import Userprofile, Property
import random
# Create your views here.
def index(request):
l_property = Property.objects.order_by('-listed_on').last()
return render(request, 'index.html', {'l_property':l_property})
#models.py
built_on = models.DateTimeField(null=True)
listed_on =models.DateTimeField(auto_now_add=True, auto_now=False, null=True)
last_updated = models.DateTimeField(auto_now=True, null=True)
video_link = models.URLField(max_length=350, null=True, blank=True)
def __str__(self):
return self.property_name
#html
{% for properties in Property %}
<div class="grid-item-holder gallery-items gisp fl-wrap">
<!-- gallery-item-->
<div class="gallery-item for_sale">
<!-- listing-item -->
<div class="listing-item">
<article class="geodir-category-listing fl-wrap">
<div class="geodir-category-img fl-wrap">
<a href="listing-single.html" class="geodir-category-img_item">
<img src="images/all/3.jpg" alt="">
<div class="overlay"></div>
</a>
<div class="geodir-category-location">
<a href="#" class="single-map-item tolt" data-newlatitude="40.72956781" data-newlongitude="-73.99726866" data-microtip-position="top-left" data-tooltip="On the map"><i class="fas fa-map-marker-alt"></i> <span> 70 Bright St New York, USA</span></a>
</div>
<ul class="list-single-opt_header_cat">
<li><a href="#" class="cat-opt blue-bg">{{ Property.list_type}}</a></li>
<li><a href="#" class="cat-opt color-bg">Apartment</a></li>
</ul>
<a href="#" class="geodir_save-btn tolt" data-microtip-position="left" data-tooltip="Save"><span><i class="fal fa-heart"></i></span></a>
<a href="#" class="compare-btn tolt" data-microtip-position="left" data-tooltip="Compare"><span><i class="fal fa-random"></i></span></a>
<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 class="title-sin_item"><a href="listing-single.html">Gorgeous House For Sale</a></h3>
<div class="geodir-category-content_price">$ 600,000</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in pulvinar neque. Nulla finibus lobortis pulvinar. Donec a consectetur nulla.</p>
<div class="geodir-category-content-details">
<ul>
<li><i class="fal fa-bed"></i><span>3</span></li>
<li><i class="fal fa-bath"></i><span>2</span></li>
<li><i class="fal fa-cube"></i><span>450 ft2</span></li>
</ul>
</div>
<div class="geodir-category-footer fl-wrap">
<a href="agent-single.html" class="gcf-company"><img src="images/avatar/2.jpg" alt=""><span>By Liza Rose</span></a>
<div class="listing-rating card-popup-rainingvis tolt" data-microtip-position="top" data-tooltip="Good" data-starrating2="4"></div>
</div>
</div>
</article>
</div>
<!-- listing-item end-->
</div>
<!-- gallery-item end-->
<!-- gallery-item-->
<div class="gallery-item for_sale">
<!-- listing-item -->
<div class="listing-item">
<article class="geodir-category-listing fl-wrap">
<div class="geodir-category-img fl-wrap">
<a href="listing-single.html" class="geodir-category-img_item">
<img src="images/all/1.jpg" alt="">
<div class="overlay"></div>
</a>
<div class="geodir-category-location">
<a href="#" class="single-map-item tolt" data-newlatitude="40.88496706" data-newlongitude="-73.88191222" data-microtip-position="top-left" data-tooltip="On the map"><i class="fas fa-map-marker-alt"></i> <span> 40 Journal Square , NJ, USA</span></a>
</div>
<ul class="list-single-opt_header_cat">
<li><a href="#" class="cat-opt blue-bg">Sale</a></li>
<li><a href="#" class="cat-opt color-bg">Apartment</a></li>
</ul>
<a href="#" class="geodir_save-btn tolt" data-microtip-position="left" data-tooltip="Save"><span><i class="fal fa-heart"></i></span></a>
<a href="#" class="compare-btn tolt" data-microtip-position="left" data-tooltip="Compare"><span><i class="fal fa-random"></i></span></a>
<div class="geodir-category-listing_media-list">
<span><i class="fas fa-camera"></i> 47</span>
</div>
</div>
<div class="geodir-category-content fl-wrap">
<h3 class="title-sin_item"><a href="listing-single.html">Luxury Family Home</a></h3>
<div class="geodir-category-content_price">$ 320,000</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in pulvinar neque. Nulla finibus lobortis pulvinar. Donec a consectetur nulla.</p>
<div class="geodir-category-content-details">
<ul>
<li><i class="fal fa-bed"></i><span>4</span></li>
<li><i class="fal fa-bath"></i><span>2</span></li>
<li><i class="fal fa-cube"></i><span>460 ft2</span></li>
</ul>
</div>
<div class="geodir-category-footer fl-wrap">
<a href="agent-single.html" class="gcf-company"><img src="images/avatar/1.jpg" alt=""><span>By Anna Lips</span></a>
<div class="listing-rating card-popup-rainingvis tolt" data-microtip-position="top" data-tooltip="Excellent" data-starrating2="5"></div>
</div>
</div>
</article>
</div>
<!-- listing-item end-->
</div>
<!-- gallery-item end-->
<!-- gallery-item-->
<div class="gallery-item for_rent">
<!-- listing-item -->
<div class="listing-item">
<article class="geodir-category-listing fl-wrap">
<div class="geodir-category-img fl-wrap">
<a href="listing-single.html" class="geodir-category-img_item">
<img src="images/all/9.jpg" alt="">
<div class="overlay"></div>
</a>
<div class="geodir-category-location">
<a href="#" class="single-map-item tolt" data-newlatitude="40.94982541" data-newlongitude="-73.84357452" data-microtip-position="top-left" data-tooltip="On the map"><i class="fas fa-map-marker-alt"></i> <span> 34-42 Montgomery St , NY, USA</span></a>
</div>
<ul class="list-single-opt_header_cat">
<li><a href="#" class="cat-opt blue-bg">Rent</a></li>
<li><a href="#" class="cat-opt color-bg">House</a></li>
</ul>
<a href="#" class="geodir_save-btn tolt" data-microtip-position="left" data-tooltip="Save"><span><i class="fal fa-heart"></i></span></a>
<a href="#" class="compare-btn tolt" data-microtip-position="left" data-tooltip="Compare"><span><i class="fal fa-random"></i></span></a>
<div class="geodir-category-listing_media-list">
<span><i class="fas fa-camera"></i> 4</span>
</div>
</div>
<div class="geodir-category-content fl-wrap">
<h3 class="title-sin_item"><a href="listing-single.html">Family House for Rent</a></h3>
<div class="geodir-category-content_price">$ 700 / per month</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in pulvinar neque. Nulla finibus lobortis pulvinar. Donec a consectetur nulla.</p>
<div class="geodir-category-content-details">
<ul>
<li><i class="fal fa-bed"></i><span>2</span></li>
<li><i class="fal fa-bath"></i><span>1</span></li>
<li><i class="fal fa-cube"></i><span>220 ft2</span></li>
</ul>
</div>
<div class="geodir-category-footer fl-wrap">
<a href="agent-single.html" class="gcf-company"><img src="images/avatar/3.jpg" alt=""><span>By Mark Frosty</span></a>
<div class="listing-rating card-popup-rainingvis tolt" data-microtip-position="top" data-tooltip="Good" data-starrating2="4"></div>
</div>
</div>
</article>
</div>
<!-- listing-item end-->
</div>
<!-- gallery-item end-->
<!-- gallery-item-->
<div class="gallery-item for_sale">
<!-- listing-item -->
<div class="listing-item">
<article class="geodir-category-listing fl-wrap">
<div class="geodir-category-img fl-wrap">
<a href="listing-single.html" class="geodir-category-img_item">
<img src="images/all/6.jpg" alt="">
<div class="overlay"></div>
</a>
<div class="geodir-category-location">
<a href="#" class="single-map-item tolt" data-newlatitude="40.72228267" data-newlongitude="-73.99246214" data-microtip-position="top-left" data-tooltip="On the map"><i class="fas fa-map-marker-alt"></i> <span> W 85th St, New York, USA</span></a>
</div>
<ul class="list-single-opt_header_cat">
<li><a href="#" class="cat-opt blue-bg">Sale</a></li>
<li><a href="#" class="cat-opt color-bg">Apartment</a></li>
</ul>
<a href="#" class="geodir_save-btn tolt" data-microtip-position="left" data-tooltip="Save"><span><i class="fal fa-heart"></i></span></a>
<a href="#" class="compare-btn tolt" data-microtip-position="left" data-tooltip="Compare"><span><i class="fal fa-random"></i></span></a>
<div class="geodir-category-listing_media-list">
<span><i class="fas fa-camera"></i> 13</span>
</div>
</div>
<div class="geodir-category-content fl-wrap">
<h3 class="title-sin_item"><a href="listing-single.html">Contemporary Apartment</a></h3>
<div class="geodir-category-content_price">$ 1,600,000</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in pulvinar neque. Nulla finibus lobortis pulvinar. Donec a consectetur nulla.</p>
<div class="geodir-category-content-details">
<ul>
<li><i class="fal fa-bed"></i><span>4</span></li>
<li><i class="fal fa-bath"></i><span>1</span></li>
<li><i class="fal fa-cube"></i><span>550 ft2</span></li>
</ul>
</div>
<div class="geodir-category-footer fl-wrap">
<a href="agent-single.html" class="gcf-company"><img src="images/avatar/4.jpg" alt=""><span>By Bill Trust</span></a>
<div class="listing-rating card-popup-rainingvis tolt" data-microtip-position="top" data-tooltip="Excellent
" data-starrating2="5"></div>
</div>
</div>
</article>
</div>
<!-- listing-item end-->
</div>
<!-- gallery-item end-->
<!-- gallery-item-->
<div class="gallery-item for_sale for_rent">
<!-- listing-item -->
<div class="listing-item">
<article class="geodir-category-listing fl-wrap">
<div class="geodir-category-img fl-wrap">
<a href="listing-single.html" class="geodir-category-img_item">
<img src="images/all/5.jpg" alt="">
<div class="overlay"></div>
</a>
<div class="geodir-category-location">
<a href="#" class="single-map-item tolt" data-newlatitude="40.88496706" data-newlongitude="-73.88191222" data-microtip-position="top-left" data-tooltip="On the map"><i class="fas fa-map-marker-alt"></i> <span> 75 Prince St, NY, USA</span></a>
</div>
<ul class="list-single-opt_header_cat">
<li><a href="#" class="cat-opt blue-bg">Sale</a></li>
<li><a href="#" class="cat-opt color-bg">Villa</a></li>
</ul>
<a href="#" class="geodir_save-btn tolt" data-microtip-position="left" data-tooltip="Save"><span><i class="fal fa-heart"></i></span></a>
<a href="#" class="compare-btn tolt" data-microtip-position="left" data-tooltip="Compare"><span><i class="fal fa-random"></i></span></a>
<div class="geodir-category-listing_media-list">
<span><i class="fas fa-camera"></i> 12</span>
</div>
</div>
<div class="geodir-category-content fl-wrap">
<h3 class="title-sin_item"><a href="listing-single.html">Kayak Point House</a></h3>
<div class="geodir-category-content_price">$ 500.000</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in pulvinar neque. Nulla finibus lobortis pulvinar. Donec a consectetur nulla.</p>
<div class="geodir-category-content-details">
<ul>
<li><i class="fal fa-bed"></i><span>5</span></li>
<li><i class="fal fa-bath"></i><span>1</span></li>
<li><i class="fal fa-cube"></i><span>510 ft2</span></li>
</ul>
</div>
<div class="geodir-category-footer fl-wrap">
<a href="agent-single.html" class="gcf-company"><img src="images/avatar/6.jpg" alt=""><span>By Andy Sposty</span></a>
<div class="listing-rating card-popup-rainingvis tolt" data-microtip-position="top" data-tooltip="Average" data-starrating2="3"></div>
</div>
</div>
</article>
</div>
<!-- listing-item end-->
</div>
<!-- gallery-item end-->
<!-- gallery-item-->
<div class="gallery-item for_rent">
<!-- listing-item -->
<div class="listing-item">
<article class="geodir-category-listing fl-wrap">
<div class="geodir-category-img fl-wrap">
<a href="listing-single.html" class="geodir-category-img_item">
<img src="images/all/8.jpg" alt="">
<div class="overlay"></div>
</a>
<div class="geodir-category-location">
<a href="#" class="single-map-item tolt" data-newlatitude="40.76221766" data-newlongitude="-73.96511769" data-microtip-position="top-left" data-tooltip="On the map"><i class="fas fa-map-marker-alt"></i> <span> 70 Bright St, Jersey City, NJ USA</span></a>
</div>
<ul class="list-single-opt_header_cat">
<li><a href="#" class="cat-opt blue-bg">Rent</a></li>
<li><a href="#" class="cat-opt color-bg">Apartment</a></li>
</ul>
<a href="#" class="geodir_save-btn tolt" data-microtip-position="left" data-tooltip="Save"><span><i class="fal fa-heart"></i></span></a>
<a href="#" class="compare-btn tolt" data-microtip-position="left" data-tooltip="Compare"><span><i class="fal fa-random"></i></span></a>
<div class="geodir-category-listing_media-list">
<span><i class="fas fa-camera"></i> 21</span>
</div>
</div>
<div class="geodir-category-content fl-wrap">
<h3 class="title-sin_item"><a href="listing-single.html">Urban House</a></h3>
<div class="geodir-category-content_price">1500 / per month</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in pulvinar neque. Nulla finibus lobortis pulvinar. Donec a consectetur nulla.</p>
<div class="geodir-category-content-details">
<ul>
<li><i class="fal fa-bed"></i><span>5</span></li>
<li><i class="fal fa-bath"></i><span>3</span></li>
<li><i class="fal fa-cube"></i><span>1210 ft2</span></li>
</ul>
</div>
<div class="geodir-category-footer fl-wrap">
<a href="agent-single.html" class="gcf-company"><img src="images/avatar/5.jpg" alt=""><span>By Liza Kobart</span></a>
<div class="listing-rating card-popup-rainingvis tolt" data-microtip-position="top" data-tooltip="Excellent
" data-starrating2="5"></div>
</div>
</div>
</article>
</div>
<!-- listing-item end-->
</div>
<!-- gallery-item end-->
</div>
{% endfor %}
Solution 1:[1]
Try this...
l_property = Property.objects.order_by('-listed_on')[:6]
and you should use variable you define in for loop not the object
because your variable in {% for properties in Property %} is properties you should get contents from properties not Property like this...
{{ properties.list_type}}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |