show related images to product in Django? - django

Hi I am trying to display all the images related to a particular product in a popup
My problem is the When I upload a photo for one of This Objects, it display on a both of Object how can i filter them for to display on the relavent object?
All Of This Objects on a same page
Photo 1
Popup
Admin Panel
my models.py
class Portfolio_Detail(models.Model):
title = models.CharField(max_length=50)
image = models.ImageField(upload_to='Portfolio/')
def __str__(self):
return self.title
class Portfolio_Image(models.Model):
portfolio = models.ForeignKey(Portfolio_Detail,on_delete=models.CASCADE,related_name="portfolio")
image = models.ImageField(upload_to='Portfolio_Image/')
my views.py
def home(request):
portfolios = Portfolio_Detail.objects.all()
portfolio_images = Portfolio_Image.objects.filter()
context = {
'portfolios' : portfolios,
'portfolio_images' : portfolio_images,
}
return render(request, "index.html", context)
My Template
<!-- Portfolio Section Start -->
<section class="portfolio-section sec-padding" id="portfolio">
<div class="container">
<div class="row">
<div class="section-title">
<h2>Recent Works</h2>
</div>
</div>
<div class="row">
<!-- Portfolio Item1 Start -->
{% for item in portfolios %}
<div class="portfolio-item">
<div class="portfolio-item-thumbnail">
<img src="{{item.image.url}}" alt="portfolio item Thumb">
</div>
<h3 class="portfolio-item-title">{{item.title}}</h3>
<button type="button" class="btn view-project-btn">View Project</button>
<div class="portfolio-item-details">
<div class="description">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="general-info">
<ul>
<li>Created : <span>4 dec 2020</span></li>
<li>Technology : <span>Html</span></li>
<li>Role : <span>Frontend</span></li>
<li>View Online : <span>www.domain.com</span></li>
</ul>
</div>
</div>
</div>
<!-- Portfolio Item1 End -->
{% endfor %}
</div>
</div>
</section>
<div class="portfolio-popup">
<div class="pp-inner">
<div class="pp-content">
<div class="pp-header">
<button type="button" class="btn pp-close"><i class="fas fa-times"></i></button>
<div class="pp-thumbnail">
{% for item in portfolio_images %}
<img src="{{item.image.url}}" alt="">
{% endfor %}
</div>
<h3></h3>
</div>
<div class="pp-body">
</div>
</div>
</div>
My Template code
<body>
<!-- Main Start -->
<div class="main hidden">
<!-- Portfolio Section Start -->
<section class="portfolio-section sec-padding" id="portfolio">
<div class="container">
<div class="row">
<div class="section-title">
<h2>Recent Works</h2>
</div>
</div>
<div class="row">
<!-- Portfolio Item1 Start -->
<div class="portfolio-item">
<div class="portfolio-item-thumbnail">
<img src="img/portfolio/1.jpg" alt="portfolio item Thumb">
</div>
<h3 class="portfolio-item-title">App Landing Page</h3>
<button type="button" class="btn view-project-btn">View Project</button>
<div class="portfolio-item-details">
<div class="description">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui natus numquam praesentium quidem dolorum explicabo molestiae reiciendis, iure suscipit placeat recusandae non nesciunt similique? Reprehenderit quia numquam eos quasi repudiandae.</p>
</div>
<div class="general-info">
<ul>
<li>Created : <span>4 dec 2020</span></li>
<li>Technology : <span>Html</span></li>
<li>Role : <span>Frontend</span></li>
<li>View Online : <span>www.domain.com</span></li>
</ul>
</div>
</div>
</div>
<!-- Portfolio Item1 End -->
</div>
</div>
</section>
</div>
<!-- Main End -->
<!-- Portfolio Item Detail Start -->
<div class="portfolio-popup">
<div class="pp-inner">
<div class="pp-content">
<div class="pp-header">
<button type="button" class="btn pp-close"><i class="fas fa-times"></i></button>
<div class="pp-thumbnail">
<img src="" alt="">
</div>
<h3></h3>
</div>
<div class="pp-body">
</div>
</div>
</div>
</div>
<!-- Portfolio Item Detail End -->
<script src="js/script.js"></script>
</body>
</html>


You can change your models.py like below:
class PortfolioImage(models.Model):
image = models.ImageField(upload_to='portfolio_image/')
class PortfolioDetail(models.Model):
title = models.CharField(max_length=50)
images = models.ManyToManyField(PortfolioImage)
def __str__(self):
return self.title
then in your HTML:
<!-- Portfolio Section Start -->
<section class="portfolio-section sec-padding" id="portfolio">
<div class="container">
<div class="row">
<div class="section-title">
<h2>Recent Works</h2>
</div>
</div>
<div class="row">
<!-- Portfolio Item1 Start -->
{% for item in portfolios %}
<div class="portfolio-item">
<div class="portfolio-item-thumbnail">
<img src="{{ item.image.url }}" alt="portfolio item Thumb">
</div>
<h3 class="portfolio-item-title">{{ item.title }}</h3>
<button type="button" class="btn view-project-btn">View Project</button>
<div class="portfolio-item-details">
<div class="description">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="general-info">
<ul>
<li>Created : <span>4 dec 2020</span></li>
<li>Technology : <span>Html</span></li>
<li>Role : <span>Frontend</span></li>
<li>View Online : <span>www.domain.com</span></li>
</ul>
</div>
</div>
</div>
<!-- Portfolio Item1 End -->
{% for portfolio_image in item.images.all %}
<div class="portfolio-popup">
<div class="pp-inner">
<div class="pp-content">
<div class="pp-header">
<button type="button" class="btn pp-close"><i class="fas fa-times"></i></button>
<div class="pp-thumbnail">
{% for item in portfolio_images %}
<img src="{{ item.image.url }}" alt="">
{% endfor %}
</div>
<h3></h3>
</div>
<div class="pp-body">
</div>
</div>
</div>
</div>
{% endfor %}
{% endfor %}
</div>
</div>
</section>

Related

Django forloop change template after x element

Hi, I try to achieve a custom grid with bootstrap 4 using forloop counter. Unfortunately for me, something causes the elements to fall apart. I know I'm close to achieving this but I try to do this for several hours and still I failed to do this.
My code:
{% for article in healtharticles %}
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
<!-- News block -->
{% if forloop.counter0 < 1 %}
<div>
<!-- Featured image -->
<div class="bg-image hover-overlay shadow-1-strong ripple rounded-5 mb-4" data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/fluid/city/113.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<!-- Article data -->
<div class="row mb-3">
<div class="col-6">
<a href="" class="text-info">
<i class="fas fa-plane"></i>
Travels
</a>
</div>
<div class="col-6 text-end">
<u> 15.07.2020</u>
</div>
</div>
<!-- Article title and description -->
<a href="" class="text-dark">
<h5>This is title of the news</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, iste aliquid. Sed
id nihil magni, sint vero provident esse numquam perferendis ducimus dicta
adipisci iusto nam temporibus modi animi laboriosam?
</p>
</a>
{% else %}
<hr />
<!-- News -->
<a href="" class="text-dark">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img src="https://mdbootstrap.com/img/new/standard/city/041.jpg"
class="img-fluid shadow-1-strong rounded" alt="" />
</div>
<div class="col-9">
<p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>
<p>
<u> 15.07.2020</u>
</p>
</div>
</div>
</a>
</div>
{% endif %}
<!-- News block -->
</div>
{% endfor %}
Maybe someone has an idea of what's is wrong.

You have not closed div in if condition and opened div in else condition.
{% if forloop.counter0 < 1 %}
<div>
......
</a>
</div> <!-- Close div here-->
{% else %}
<div> <!-- Open div here -->
.....
</div>
{% endif %}

How to limit data in html using django template?

I am using bootstrap carousel and i am using for template to iterate through data but i want two data at once so i wanted to do was if data exceeds 2 i want to display nothing after that can some one tell me how to do it.
<section id="latest-trip">
<div class="container">
<div class="row col-md-12">
<!-- Latest trip left part(carousel part) Start -->
<div id="treaking-list" class="col-md-7 ml-4">
<div
id="carouselExampleIndicators-three"
class="carousel slide"
data-ride="carousel"
>
<ol class="carousel-indicators">
<li
data-target="#carouselExampleIndicators-three"
data-slide-to="0"
class="active"
></li>
<li
data-target="#carouselExampleIndicators-three"
data-slide-to="1"
></li>
<li
data-target="#carouselExampleIndicators-three"
data-slide-to="2"
></li>
</ol>
<div class="carousel-inner">
{% for tour in tours %}
<div class="carousel-item {% if tour.id == 1 %} active {% endif %}">
<div class="row">
{% for tour in tours %}
<div class="treaking col-md-6">
<img
src="{{tour.image}}"
alt="Real Adventure Nepal - {{tour.tour_name}}"
title="{{tour.tour_name}}"
/>
<div class="treaking-head">
<h3>{{tour.tour_name}}</h3>
<p>
{{tour.description}}
</p>
</div>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<!-- Latest trip left part(carousel part) End -->
<!-- Latest trip right part(Description part) Start -->
<div class="col-md-4 ml-5 title">
<h2 class="treaking-title">Latest Trips</h2>
<span class="right-styled-para">Explore the unexplored world</span>
<p class="treaking-description">
Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod
tempor incididunt utlabore et dolore magna aliqua. Utenim ad minim
veniam quiso.
</p>
<button type="button" class="btn btn-primary join-us">
Join us now
</button>
</div>
<!-- Latest trip right part(Description part) End -->
</div>
</div>
</section>
What is Currently happening is that the data are going down and same thing keeps going on in carousel :

<section id="latest-trip">
<div class="container">
<div class="row col-md-12">
<!-- Latest trip left part(carousel part) Start -->
<div id="treaking-list" class="col-md-7 ml-4">
<div
id="carouselExampleIndicators-three"
class="carousel slide"
data-ride="carousel"
>
<ol class="carousel-indicators">
<li
data-target="#carouselExampleIndicators-three"
data-slide-to="0"
class="active"
></li>
<li
data-target="#carouselExampleIndicators-three"
data-slide-to="1"
></li>
<li
data-target="#carouselExampleIndicators-three"
data-slide-to="2"
></li>
</ol>
<div class="carousel-inner">
{% for tour in tours[:2] %}
<div class="carousel-item {% if tour.id == 1 %} active {% endif %}">
<div class="row">
{% for tour in tours %}
<div class="treaking col-md-6">
<img
src="{{tour.image}}"
alt="Real Adventure Nepal - {{tour.tour_name}}"
title="{{tour.tour_name}}"
/>
<div class="treaking-head">
<h3>{{tour.tour_name}}</h3>
<p>
{{tour.description}}
</p>
</div>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<!-- Latest trip left part(carousel part) End -->
<!-- Latest trip right part(Description part) Start -->
<div class="col-md-4 ml-5 title">
<h2 class="treaking-title">Latest Trips</h2>
<span class="right-styled-para">Explore the unexplored world</span>
<p class="treaking-description">
Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod
tempor incididunt utlabore et dolore magna aliqua. Utenim ad minim
veniam quiso.
</p>
<button type="button" class="btn btn-primary join-us">
Join us now
</button>
</div>
<!-- Latest trip right part(Description part) End -->
</div>
</div>
</section>
Adding [:2] after tours will resolve it. See my above answer.

Django data saved in the database but not show in the template

Django data is saved in the database but, when access the data in template its display nothing.the models.py, views.py and home.html file code is below, when I entered data in the field and print it in add function it display but does not display in the template. Im using the modal to display the data
models.py
from django.db import models
class ToDo(models.Model):
title = models.CharField(max_length=100)
detail = models.TextField()
published_date = models.DateTimeField()
def __str__(self):
return self.title
views.py
from django.shortcuts import render, HttpResponse, redirect
from django.utils import timezone
from todoapp.models import ToDo
def home(request):
todo_items = ToDo.objects.all()
context = {'todoItems': todo_items}
return render(request, 'todoapp/home.html', context)
def add(request):
if request.method=="POST":
addTitle = request.POST['addTitle']
addDetail = request.POST['addDetail']
current_date = timezone.now()
addedObject = ToDo.objects.create(title=addTitle, detail=addDetail, published_date=current_date)
return redirect('home')
return render(request, 'todoapp/home.html')
home.html "Template file"
{%load static%} {%include 'header.html'%}
<!-- Navigation -->
<nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="{% url 'home'%}">todo application</a>
<button class="navbar-toggler navbar-toggler-right text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" data-toggle="modal" data-target="#addModal" href="add">add new</a>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="{%url 'home'%}">todo list</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Masthead -->
<header class="masthead bg-primary text-white text-center">
<div class="container d-flex align-items-center flex-column">
<!-- Masthead Avatar Image -->
<img class="masthead-avatar mb-5" src="{%static 'images/avataaars.svg' %}" alt="">
<!-- Masthead Heading -->
<h1 class="masthead-heading text-uppercase mb-0">Todo Application </h1>
<!-- Icon Divider -->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon">
<i class="fas fa-star"></i>
</div>
<div class="divider-custom-line"></div>
</div>
<!-- Masthead Subheading -->
<p class="masthead-subheading font-weight-light mb-0">Web Developer - Web Designer - Coder</p>
</div>
</header>
<!-- Portfolio Section -->
<section class="page-section portfolio" id="portfolio">
<div class="container">
<!-- Portfolio Section Heading -->
<h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">portfolio</h2>
<!-- Icon Divider -->
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon">
<i class="fas fa-star"></i>
</div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Grid Items -->
<div class="row">
<!-- Portfolio Item 1 -->
<div class="col-md-6 col-lg-4">
<div class="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal1">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white">
<i class="fas fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="{% static 'images/portfolio/cabin.png'%}" alt="">
</div>
</div>
</div>
<!-- /.row -->
</div>
</section>
<!-- About Section -->
<section class="page-section bg-primary text-white mb-0" id="about">
<div class="container">
<!-- About Section Heading -->
<h2 class="page-section-heading text-center text-uppercase text-white">About</h2>
<!-- Icon Divider -->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon">
<i class="fas fa-star"></i>
</div>
<div class="divider-custom-line"></div>
</div>
<!-- About Section Content -->
<div class="row">
<div class="col-lg-12 ml-auto text-center">
<p class="lead">Hi! Im Zeeshan Tariq. I have 3 plus years of experience in web Application Development, Software Development, Front End Development, WordPress theme customization , woocommerce customization, wordpress security, SEO, keywords research, on-page seo, off-page seo,speed optimization, custom web application development using python django web framework, API design, database design and development.</p>
</div>
</div>
</div>
</section>
<!-- Portfolio Modals -->
<!-- add Modal -->
<div class="portfolio-modal modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModal" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
<i class="fas fa-times"></i>
</span>
</button>
<div class="modal-body text-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Portfolio Modal - Title -->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">Add Todo</h2>
<!-- Icon Divider -->
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon">
<i class="fas fa-star"></i>
</div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Image -->
<!-- Portfolio Modal - Text -->
<p class="mb-5">
<div class="row">
<div class="col-lg-8 mx-auto">
<form action="{% url 'add'%}" method="post">
{%csrf_token%}
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Title </label>
<input class="form-control" id="addTitle" name="addTitle" type="text" placeholder="Title" required="required" data-validation-required-message="Please enter the title.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Detail</label>
<input class="form-control" id="addDetail" name="addDetail" type="text" placeholder="Detail" required="required" data-validation-required-message="Please enter the description.">
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="success"></div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-xl" id="sendMessageButton">Add</button>
</div>
</form>
</div>
</div>
</p>
<button class="btn btn-primary" href="#" data-dismiss="modal">
<i class="fas fa-times fa-fw"></i> Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 1 -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-labelledby="portfolioModal1Label" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
<i class="fas fa-times"></i>
</span>
</button>
<div class="modal-body text-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Portfolio Modal - Title -->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">{{todoItems.title}}</h2>
<!-- Icon Divider -->
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon">
<i class="fas fa-star"></i>
</div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Image -->
<img class="img-fluid rounded mb-5" src="img/portfolio/cabin.png" alt="">
<!-- Portfolio Modal - Text -->
<p class="mb-5">{{todoItems.detail}}</p>
<button class="btn btn-primary" href="#" data-dismiss="modal">
<i class="fas fa-times fa-fw"></i> Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{%include 'footer.html'%}

For loop in Django template while changing the HTML each iteration

So I have this piece of HTML:
<div class="core-features-single">
<div class="row">
<div class="col-sm-6">
<div class="core-feature-img">
<img src="assets/images/watch-4.png" class="img-responsive" alt="Image">
</div>
</div>
<div class="col-sm-6">
<div class="core-feature-content arrow-left">
<i class="icofont icofont-brand-android-robot"></i>
<h4>Android and iOS Apps Install</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat.</p>
</div>
</div>
</div>
</div>
<div class="core-features-single">
<div class="row">
<div class="col-sm-6">
<div class="core-feature-content arrow-right">
<i class="icofont icofont-ui-text-chat"></i>
<h4>Live Chat With Friends</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat.</p>
</div>
</div>
<div class="col-sm-6">
<div class="core-feature-img">
<img src="assets/images/watch-5.png" class="img-responsive" alt="Image">
</div>
</div>
</div>
</div>
Which generates this kind output in the webpage:
But how do I iterate an HTML element like this? Because the text and image block order are changing each iteration.
What I came up with:
{% for entry in page.product_features_showcase.all %}
{% image entry.image height-1000 as img %}
<div class="core-features-single">
<div class="row">
<div class="col-sm-6">
<div class="core-feature-content arrow-{% cycle 'left' 'right' 'left' 'right' 'left' 'right' 'left' 'right' %}">
<i class="icofont icofont-phone"></i>
<h4>{{ page.product_features_showcase_title }}</h4>
<p>{{ page.product_features_showcase_description }}</p>
</div>
</div>
<div class="col-sm-6">
<div class="core-feature-img">
<img src="{{ img.url }}" class="img-responsive" alt="Image">
</div>
</div>
</div>
</div>
{% endfor %}
I know I can use cycle to make different CSS classes each iteration. But how to change the order of the HTML element? To make this HTML work in a loop.

Use forloop.counter and divisibleby inside a for loop to render different HTML blocks in odd and even loops:
{% if forloop.counter|divisibleby:2 %}
Right-arrow block
{% else %}
Left-arrow block
{% endif %}
In Django docs: https://docs.djangoproject.com/en/2.2/ref/templates/builtins/#divisibleby

Images are not getting loaded from static file

"""
codes in settings.py
"""
import os
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '*-by0qr_kjdy8soie*gt*lg0vo+pc(1#34b5g-q1e=uv5%phzt'
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = []
# Application definition
INSTALLED_APPS = [
'travello.apps.TravelloConfig',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'telusko.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')]
,
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'telusko.wsgi.application'
# Database
# https://docs.djangoproject.com/en/2.2/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
# Password validation
# https://docs.djangoproject.com/en/2.2/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/2.2/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR,'static')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'assets')
MEDIA_ROOT = '/static/images/media'
MEDIA_URL = '/media/'
Added bellow code but still it has not solved
MEDIA_ROOT = '/static/images/media'
MEDIA_URL = '/media/'
STATIC_URL = '/static/'
STATICFILES_DIR = [
os.path.join(BASE_DIR,'static')
]
STATIC_ROOT = os.path.join(BASE_DIR,'assets')
I have added bootstrap template to my Django project. I am facing the problem with the images are not getting load when check index.html in local host, when I inspect the html code it's showing error like this "GET /images/destination_4.jpg HTTP/1.1" 404 2300" while All other static files are getting loaded. I have ensured that the presense of 'django.contrib.staticfiles', in installed app, also added STATIC_DIR and STATIC_ROOT in settings.py and in html page static files are loaded. Please let me know the solution. I have added index.html code and STATIC_URL below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Travello</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Travello template project">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'styles/bootstrap4/bootstrap.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'plugins/OwlCarousel2-2.2.1/owl.carousel.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'plugins/OwlCarousel2-2.2.1/owl.theme.default.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'plugins/OwlCarousel2-2.2.1/animate.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/main_styles.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/responsive.css' %}">
</head>
<body>
<div class="super_container">
<!-- Header -->
<header class="header">
<div class="container">
<div class="row">
<div class="col">
<div class="header_content d-flex flex-row align-items-center justify-content-start">
<div class="header_content_inner d-flex flex-row align-items-end justify-content-start">
<div class="logo">Travello</div>
<nav class="main_nav">
<ul class="d-flex flex-row align-items-start justify-content-start">
<li class="active">Home</li>
<li>About us</li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
<div class="header_phone ml-auto">Call us: 00-56 445 678 33</div>
<!-- Hamburger -->
<div class="hamburger ml-auto">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header_social d-flex flex-row align-items-center justify-content-start">
<ul class="d-flex flex-row align-items-start justify-content-start">
<li><i class="fa fa-pinterest" aria-hidden="true"></i></li>
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li><i class="fa fa-dribbble" aria-hidden="true"></i></li>
<li><i class="fa fa-behance" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin" aria-hidden="true"></i></li>
</ul>
</div>
</header>
<!-- Menu -->
<div class="menu">
<div class="menu_header d-flex flex-row align-items-center justify-content-start">
<div class="menu_logo">Travello</div>
<div class="menu_close_container ml-auto"><div class="menu_close"><div></div><div></div></div></div>
</div>
<div class="menu_content">
<ul>
<li>Home</li>
<li>About us</li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<div class="menu_social">
<div class="menu_phone ml-auto">Call us: 00-56 445 678 33</div>
<ul class="d-flex flex-row align-items-start justify-content-start">
<li><i class="fa fa-pinterest" aria-hidden="true"></i></li>
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li><i class="fa fa-dribbble" aria-hidden="true"></i></li>
<li><i class="fa fa-behance" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin" aria-hidden="true"></i></li>
</ul>
</div>
</div>
<!-- Home -->
<div class="home">
<!-- Home Slider -->
<div class="home_slider_container">
<div class="owl-carousel owl-theme home_slider">
<!-- Slide -->
<div class="owl-item">
<div class="background_image" style="background-image: url(images/home_slider.jpg)"></div>
<div class="home_slider_content_container">
<div class="container">
<div class="row">
<div class="col">
<div class="home_slider_content">
<div class="home_title"><h2>Let us take you away</h2></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slide -->
<div class="owl-item">
<div class="background_image" style="background-image:url(images/home_slider.jpg)"></div>
<div class="home_slider_content_container">
<div class="container">
<div class="row">
<div class="col">
<div class="home_slider_content">
<div class="home_title"><h2>Let us take you away</h2></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slide -->
<div class="owl-item">
<div class="background_image" style="background-image:url(images/home_slider.jpg)"></div>
<div class="home_slider_content_container">
<div class="container">
<div class="row">
<div class="col">
<div class="home_slider_content">
<div class="home_title"><h2>Let us take you away</h2></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="home_page_nav">
<ul class="d-flex flex-column align-items-end justify-content-end">
<li>Offers<span>01</span></li>
<li>Testimonials<span>02</span></li>
<li>Latest<span>03</span></li>
</ul>
</div>
</div>
</div>
<!-- Search -->
<div class="home_search">
<div class="container">
<div class="row">
<div class="col">
<div class="home_search_container">
<div class="home_search_title">Search for your trip</div>
<div class="home_search_content">
<form action="#" class="home_search_form" id="home_search_form">
<div class="d-flex flex-lg-row flex-column align-items-start justify-content-lg-between justify-content-start">
<input type="text" class="search_input search_input_1" placeholder="City" required="required">
<input type="text" class="search_input search_input_2" placeholder="Departure" required="required">
<input type="text" class="search_input search_input_3" placeholder="Arrival" required="required">
<input type="text" class="search_input search_input_4" placeholder="Budget" required="required">
<button class="home_search_button">search</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Intro -->
<div class="intro">
<div class="intro_background" style="background-image:url(images/intro.png)"></div>
<div class="container">
<div class="row">
<div class="col">
<div class="intro_container">
<div class="row">
<!-- Intro Item -->
<div class="col-lg-4 intro_col">
<div class="intro_item d-flex flex-row align-items-end justify-content-start">
<div class="intro_icon"><img src="images/beach.svg" alt=""></div>
<div class="intro_content">
<div class="intro_title">Top Destinations</div>
<div class="intro_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
</div>
</div>
</div>
<!-- Intro Item -->
<div class="col-lg-4 intro_col">
<div class="intro_item d-flex flex-row align-items-end justify-content-start">
<div class="intro_icon"><img src="images/wallet.svg" alt=""></div>
<div class="intro_content">
<div class="intro_title">The Best Prices</div>
<div class="intro_subtitle"><p>Sollicitudin mauris lobortis in.</p></div>
</div>
</div>
</div>
<!-- Intro Item -->
<div class="col-lg-4 intro_col">
<div class="intro_item d-flex flex-row align-items-end justify-content-start">
<div class="intro_icon"><img src="images/suitcase.svg" alt=""></div>
<div class="intro_content">
<div class="intro_title">Amazing Services</div>
<div class="intro_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Destinations -->
<div class="destinations" id="destinations">
<div class="container">
<div class="row">
<div class="col text-center">
<div class="section_subtitle">simply amazing places</div>
<div class="section_title"><h2>Popular Destinations</h2></div>
</div>
</div>
<div class="row destinations_row">
<div class="col">
<div class="destinations_container item_grid">
<!-- Destination -->
<div class="destination item">
<div class="destination_image">
<img src="images/destination_1.jpg" alt="">
<div class="spec_offer text-center">Special Offer</div>
</div>
<div class="destination_content">
<div class="destination_title">Bali</div>
<div class="destination_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
<div class="destination_price">From $679</div>
</div>
</div>
<!-- Destination -->
<div class="destination item">
<div class="destination_image">
<img src="images/destination_2.jpg" alt="">
</div>
<div class="destination_content">
<div class="destination_title">Indonesia</div>
<div class="destination_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
<div class="destination_price">From $679</div>
</div>
</div>
<!-- Destination -->
<div class="destination item">
<div class="destination_image">
<img src="images/destination_3.jpg" alt="">
</div>
<div class="destination_content">
<div class="destination_title">San Francisco</div>
<div class="destination_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
<div class="destination_price">From $679</div>
</div>
</div>
<!-- Destination -->
<div class="destination item">
<div class="destination_image">
<img src="images/destination_4.jpg" alt="">
</div>
<div class="destination_content">
<div class="destination_title">Paris</div>
<div class="destination_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
<div class="destination_price">From $679</div>
</div>
</div>
<!-- Destination -->
<div class="destination item">
<div class="destination_image">
<img src="images/destination_5.jpg" alt="">
</div>
<div class="destination_content">
<div class="destination_title">Phi Phi Island</div>
<div class="destination_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
<div class="destination_price">From $679</div>
</div>
</div>
<!-- Destination -->
<div class="destination item">
<div class="destination_image">
<img src="images/destination_6.jpg" alt="">
</div>
<div class="destination_content">
<div class="destination_title">Mykonos</div>
<div class="destination_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
<div class="destination_price">From $679</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Testimonials -->
<div class="testimonials" id="testimonials">
<div class="parallax_background parallax-window" data-parallax="scroll" data-image-src="images/testimonials.jpg" data-speed="0.8"></div>
<div class="container">
<div class="row">
<div class="col text-center">
<div class="section_subtitle">simply amazing places</div>
<div class="section_title"><h2>Testimonials</h2></div>
</div>
</div>
<div class="row testimonials_row">
<div class="col">
<!-- Testimonials Slider -->
<div class="testimonials_slider_container">
<div class="owl-carousel owl-theme testimonials_slider">
<!-- Slide -->
<div class="owl-item text-center">
<div class="testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. lobortis dolor. Cras placerat lectus a posuere aliquet. Curabitur quis vehicula odio.</div>
<div class="testimonial_author">
<div class="testimonial_author_content d-flex flex-row align-items-end justify-content-start">
<div>john turner,</div>
<div>client</div>
</div>
</div>
</div>
<!-- Slide -->
<div class="owl-item text-center">
<div class="testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. lobortis dolor. Cras placerat lectus a posuere aliquet. Curabitur quis vehicula odio.</div>
<div class="testimonial_author">
<div class="testimonial_author_content d-flex flex-row align-items-end justify-content-start">
<div>john turner,</div>
<div>client</div>
</div>
</div>
</div>
<!-- Slide -->
<div class="owl-item text-center">
<div class="testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. lobortis dolor. Cras placerat lectus a posuere aliquet. Curabitur quis vehicula odio.</div>
<div class="testimonial_author">
<div class="testimonial_author_content d-flex flex-row align-items-end justify-content-start">
<div>john turner,</div>
<div>client</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="test_nav">
<ul class="d-flex flex-column align-items-end justify-content-end">
<li>City Breaks Clients<span>01</span></li>
<li>Cruises Clients<span>02</span></li>
<li>All Inclusive Clients<span>03</span></li>
</ul>
</div>
</div>
<!-- News -->
<div class="news" id="news">
<div class="container">
<div class="row">
<div class="col-xl-8">
<div class="news_container">
<!-- News Post -->
<div class="news_post d-flex flex-md-row flex-column align-items-start justify-content-start">
<div class="news_post_image"><img src="images/news_1.jpg" alt=""></div>
<div class="news_post_content">
<div class="news_post_date d-flex flex-row align-items-end justify-content-start">
<div>02</div>
<div>june</div>
</div>
<div class="news_post_title">Best tips to travel light</div>
<div class="news_post_category">
<ul>
<li>lifestyle & travel</li>
</ul>
</div>
<div class="news_post_text">
<p>Pellentesque sit amet elementum ccumsan sit amet mattis eget, tristique at leo. Vivamus massa.Tempor massa et laoreet.</p>
</div>
</div>
</div>
<!-- News Post -->
<div class="news_post d-flex flex-md-row flex-column align-items-start justify-content-start">
<div class="news_post_image"><img src="images/news_2.jpg" alt=""></div>
<div class="news_post_content">
<div class="news_post_date d-flex flex-row align-items-end justify-content-start">
<div>01</div>
<div>june</div>
</div>
<div class="news_post_title">Best tips to travel light</div>
<div class="news_post_category">
<ul>
<li>lifestyle & travel</li>
</ul>
</div>
<div class="news_post_text">
<p>Tempor massa et laoreet malesuada. Pellentesque sit amet elementum ccumsan sit amet mattis eget, tristique at leo.</p>
</div>
</div>
</div>
<!-- News Post -->
<div class="news_post d-flex flex-md-row flex-column align-items-start justify-content-start">
<div class="news_post_image"><img src="images/news_3.jpg" alt=""></div>
<div class="news_post_content">
<div class="news_post_date d-flex flex-row align-items-end justify-content-start">
<div>29</div>
<div>may</div>
</div>
<div class="news_post_title">Best tips to travel light</div>
<div class="news_post_category">
<ul>
<li>lifestyle & travel</li>
</ul>
</div>
<div class="news_post_text">
<p>Vivamus massa.Tempor massa et laoreet malesuada. Aliquam nulla nisl, accumsan sit amet mattis.</p>
</div>
</div>
</div>
</div>
</div>
<!-- News Sidebar -->
<div class="col-xl-4">
<div class="travello">
<div class="background_image" style="background-image:url(images/travello.jpg)"></div>
<div class="travello_content">
<div class="travello_content_inner">
<div></div>
<div></div>
</div>
</div>
<div class="travello_container">
<a href="#">
<div class="d-flex flex-column align-items-center justify-content-end">
<span class="travello_title">Get a 20% Discount</span>
<span class="travello_subtitle">Buy Your Vacation Online Now</span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="parallax_background parallax-window" data-parallax="scroll" data-image-src="images/footer_1.jpg" data-speed="0.8"></div>
<div class="container">
<div class="row">
<div class="col">
<div class="newsletter">
<div class="newsletter_title_container text-center">
<div class="newsletter_title">Subscribe to our newsletter to get the latest trends & news</div>
<div class="newsletter_subtitle">Join our database NOW!</div>
</div>
<div class="newsletter_form_container">
<form action="#" class="newsletter_form d-flex flex-md-row flex-column align-items-start justify-content-between" id="newsletter_form">
<div class="d-flex flex-md-row flex-column align-items-start justify-content-between">
<div><input type="text" class="newsletter_input newsletter_input_name" id="newsletter_input_name" placeholder="Name" required="required"><div class="input_border"></div></div>
<div><input type="email" class="newsletter_input newsletter_input_email" id="newsletter_input_email" placeholder="Your e-mail" required="required"><div class="input_border"></div></div>
</div>
<div><button class="newsletter_button">subscribe</button></div>
</form>
</div>
</div>
</div>
</div>
<div class="row footer_contact_row">
<div class="col-xl-10 offset-xl-1">
<div class="row">
<!-- Footer Contact Item -->
<div class="col-xl-4 footer_contact_col">
<div class="footer_contact_item d-flex flex-column align-items-center justify-content-start text-center">
<div class="footer_contact_icon"><img src="images/sign.svg" alt=""></div>
<div class="footer_contact_title">give us a call</div>
<div class="footer_contact_list">
<ul>
<li>Office Landline: +44 5567 32 664 567</li>
<li>Mobile: +44 5567 89 3322 332</li>
</ul>
</div>
</div>
</div>
<!-- Footer Contact Item -->
<div class="col-xl-4 footer_contact_col">
<div class="footer_contact_item d-flex flex-column align-items-center justify-content-start text-center">
<div class="footer_contact_icon"><img src="images/trekking.svg" alt=""></div>
<div class="footer_contact_title">come & drop by</div>
<div class="footer_contact_list">
<ul style="max-width:190px">
<li>4124 Barnes Street, Sanford, FL 32771</li>
</ul>
</div>
</div>
</div>
<!-- Footer Contact Item -->
<div class="col-xl-4 footer_contact_col">
<div class="footer_contact_item d-flex flex-column align-items-center justify-content-start text-center">
<div class="footer_contact_icon"><img src="images/around.svg" alt=""></div>
<div class="footer_contact_title">send us a message</div>
<div class="footer_contact_list">
<ul>
<li>youremail#gmail.com</li>
<li>Office#yourbusinessname.com</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col text-center"><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by Colorlib
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --> </div>
</footer>
</div>
<script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'styles/bootstrap4/popper.js' %}"></script>
<script src="{% static 'styles/bootstrap4/bootstrap.min.js' %}"></script>
<script src="{% static 'plugins/OwlCarousel2-2.2.1/owl.carousel.js' %}"></script>
<script src="{% static 'plugins/Isotope/isotope.pkgd.min.js' %}"></script>
<script src="{% static 'plugins/scrollTo/jquery.scrollTo.min.js' %}"></script>
<script src="{% static 'plugins/easing/easing.js' %}"></script>
<script src="{% static 'plugins/parallax-js-master/parallax.min.js' %}"></script>
<script src="{% static 'js/custom.js' %}"></script>
<style type="text/css">
.background_image {
background-image: url(images/home_slider.jpg);
}
</style>
</body>
</html>

Once again, this log record
GET /images/destination_4.jpg HTTP/1.1" 404 2300
is clearly saying that you're trying to access URL which is not under STATIC_URL address. Since you said that some of files work fine I surmised that config is correct but image URL is not.
Here is an example of well defined static file URL:
<link rel="stylesheet" type="text/css" href="{% static 'styles/bootstrap4/bootstrap.min.css' %}">
here all your Django settings for static files will take effect.
Below is one of the problematic places:
<img src="images/destination_4.jpg" alt="">
static template tag is not used here thus this is just a constant URL. Moreover, this is relative URL (because it does not start with /) and will result in different absolute URL on different pages. Fix this, start using static template tag here and images will load just fine (if they exist in specified folder).
One more thing which is perhaps the cause of other problems:
you defined MEDIA_ROOT as /static/images/media which is inside static files folder. That is not really a good idea. Note, media files in Django mean dynamic, editable files uploaded by users. If an image or a video is a part of your solution (like logo, favicon, backround image) - they are not "media" in terms of Django - they are "static" files. Yes, you can put them into separate subfolder just like any .js or .css files - but they will remain static and you have to work with them like with other static files.
You should not mix media files with static inside one directory because you will be overwriting static folder from time to time during deployment of new releases of your Django project.

Problem solved!
Thanks to Ivan Starostin. He suggested to to add static tag to all images, I followed his instruction made changes now the code is working.
Before changes class="background_image" style="background-image:url(images/home_slider.jpg)"></div>
After changes <div class="background_image" style="background-image: url({% static 'images/home_slider.jpg' %})"></div>