Images are not showing in slider in Django Website
I have completed all the requisite steps to display the images slider of my Django Website Project. But the images are not shown without displaying any error, I think there is a mistake in my home.html file Django code. For this guide me. Thanks for your kind anticipation
models.py
from django.db import models
from datetime import datetime
from ckeditor.fields import RichTextField
from multiselectfield import MultiSelectField
# Create your models here.
class Car(models.Model):
state_choice=(
('PU', 'Punjab'),
('KPK', 'Khyber PukhtunKha'),
('BL', 'Balochestan'),
('SN', 'Sindh'),
('FD', 'Federal Territory'),
)
TRANSMISSION_CHOICES = (
('M', 'Manual'),
('A', 'Automatic'),
)
door_choices = (
('2', '2'),
('3', '3'),
('4', '4'),
('5', '5'),
('6', '6'),
)
features_choices=(
('Cruise Control', 'Cruise Control'),
('Audio Interface', 'Audio Interface'),
('Airbags', 'Airbags'),
('Air Conditioning', 'Air Conditioning'),
('Seat Heating', 'Seat Heating'),
('Alarm System', 'Alarm System'),
('ParkAssist', 'ParkAssist'),
('Power Steering', 'Power Steering'),
('Reversing Camera', 'Reversing Camera'),
('Direct Fuel Injection', 'Direct Fuel Injection'),
('Auto Start/Stop', 'Auto Start/Stop'),
('Wind Deflector', 'Wind Deflector'),
('Bluetooth Handset', 'Bluetooth Handset'),
)
year_choice = []
for r in range(2000, (datetime.now().year+1)):
year_choice.append((r,r))
car_title = models.CharField(max_length=255)
state = models.CharField(choices=state_choice, max_length=100)
city = models.CharField(max_length=100)
color = models.CharField(max_length=100)
model = models.CharField(max_length=100)
year = models.IntegerField(('year'), choices=year_choice)
condition = models.CharField(max_length=100)
price = models.IntegerField()
description = RichTextField()
car_photo = models.ImageField(upload_to='photos/%Y/%m/%d/')
car_photo_1 = models.ImageField(upload_to='photos/%Y/%m/%d/', blank=True)
car_photo_2 = models.ImageField(upload_to='photos/%Y/%m/%d/', blank=True)
car_photo_3 = models.ImageField(upload_to='photos/%Y/%m/%d/', blank=True)
car_photo_4 = models.ImageField(upload_to='photos/%Y/%m/%d/', blank=True)
features = MultiSelectField(choices=features_choices, max_length=255)
body_style = models.CharField(max_length=100)
engine = models.CharField(max_length=100)
transmission = models.CharField(max_length=100)
interior = models.CharField(max_length=100)
miles = models.IntegerField()
doors = models.CharField(choices=door_choices, max_length=10)
passengers = models.IntegerField()
vin_no = models.CharField(max_length=100)
milage = models.IntegerField()
fuel_type = models.CharField(max_length=50)
no_of_owners = models.CharField(max_length=100)
is_featured = models.BooleanField(default=False)
created_date = models.DateTimeField(default=datetime.now, blank=True)
views.py
from django.shortcuts import get_object_or_404, render
from cars.models import Car
# Create your views here.
def cars(request):
cars = Car.objects.order_by('-created_date')
data = {
'cars': cars,
}
return render(request, 'cars/cars.html', data)
def car_detail(request, id):
single_car = get_object_or_404(Car, pk=id)
data = {
'single_car': single_car,
}
all_cars = Car.objects.order_by('-created-date')
data = {
'all_cars' : all_cars,
}
return render(request, 'cars/car_detail.html', data)
home.html I think my Django code in home.html is error-prone. help in this regard.
<div class="featured-car content-area">
<div class="container">
<!-- Main title -->
<div class="main-title">
<h1>Latest <span>Cars</span></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="row">
{% for car in all_cars %}
<div class="col-lg-4 col-md-6">
<div class="car-box">
<div class="car-thumbnail">
<a href="{{car.car_photo}}" class="car-img">
<div class="tag">For Sale</div>
<img class="d-block w-100" src="{{car.car_photo.url}}" alt="car">
<div class="facilities-list clearfix">
<ul>
<li>
<span><i class="flaticon-way"></i></span>4,000 km
</li>
<li>
<span><i class="flaticon-calendar-1"></i></span>2020
</li>
<li>
<span><i class="flaticon-manual-transmission"></i </span>Manual
</li>
</ul>
</div>
</a>
<div class="carbox-overlap-wrapper">
<div class="overlap-box">
<div class="overlap-btns-area">
<div class="car-magnify-gallery">
{% if car.car_photo_1 %}
<a href="{{car.photo_1}}" class="overlap-btn">
<i class="fa fa-expand"></i>
<img class="hidden" src="{{ car.car_photo_1.url }}">
</a>
{% endif %}
{% if car.car_photo_2 %}
<a href="{{ car.car_photo_2 }}" class="hidden">
<img class="hidden" src="{{ car.car_photo_2.url }}">
</a>
{% endif %}
{% if car.car_photo_3 %}
<a href="{{ car.car_photo_3 }}" class="hidden">
<img class="hidden" src="{{ car.car_photo_3.url }}">
</a>
{% endif %}
{% if car.car_photo_4 %}
<a href="{{ car.car_photo_4 }}" class="hidden">
<img class="hidden" src="{{ car.car_photo_4.url }}">
</a>
{% endif %}
{% if car.car_photo_5 %}
<a href="{{ car.car_photo_5 }}" class="hidden">
<img class="hidden" src="{{ car.car_photo_5.url }}">
{% endif %}
</a>
</div>
</div>
</div>
</div>
</div>
<div class="detail">
<h1 class="title">
<a href="car-details.html">Lamborghini Huracán</a>
</h1>
<div class="location">
<a href="car-details.html">
<i class="flaticon-pin"></i>123 Kathal St. Tampa City,
</a>
</div>
</div>
<div class="footer clearfix">
<div class="pull-left ratings days">
<p class="cartype">Sedan</p>
</div>
<div class="pull-right">
<p class="price">$850.00</p>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
I made a similar project and everything works. These are the steps I followed
add
MEDIA_ROOTandMEDIA_URLin settingsMEDIA_ROOT = os.path.join(BASE_DIR,'photos') MEDIA_URL = '/photos/'add
MEDIA_ROOTandMEDIA_URLin urlsfrom django.conf import settings from django.conf.urls.static import static urlpatterns = [ # you urls here ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
And you also have several mistakes
in views car_detail replace
all_cars = Car.objects.order_by('-created-date')
with
all_cars = Car.objects.order_by('-created_date')
and in your templates where you defined <a></a> for car
<a href="{{car.car_photo}}" class="car-img">
...
</a>
you must pass the url in href like this
<a href="{{car.car_photo.url}}" class="car-img">
...
</a>
and base on MDN docs Dealing with files
It's also advisable to separate words with hyphens, rather than underscores: my-file.html vs. my_file.html.
so your html file should be car-detail.html not car_detail.html
if its not working for you try delete old records on database and add them again with new settings