"""
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>
Related
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>
The django 'extends' template is not loading the content. In this I am trying to extend index.html to homepage.html. Both the files are under the same templates directory. The code snippets are shown below:
index.html
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Tashi eComm</title>
<!-- adding title icon -->
<link rel = "icon" href ="{% static 'images/TecommLogo.png' %}" type = "image/x-icon">
<!-- Bootstrap 5 link -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!-- Bootstrap 5 popper and javascript link -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.3/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
<!--Bootstrap icons-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<!-- stylesheet -->
<link rel="stylesheet" type="text/css" href="{% static 'css/stylesheet.css' %}"/>
</head>
<body>
<div class="wrapper">
<div class="panel panel-default">
<div class="panel-heading">
<div class="d-flex justify-content-end ">
<div class="top-header m-2 ">
Marketplace
</div>
<div class="top-header m-2 ">|</div>
<div class="top-header m-2">
Buyer Protection
</div>
<div class="top-header m-2 ">|</div>
<div class="top-header m-2">
Track Order
</div>
<div class="top-header m-2 ">|</div>
<div class="top-header m-2">
<div class="form-group">
<select id="demo_overview_minimal" class="select-picker" data-role="select-dropdown" data-profile="minimal">
<!-- options -->
<option>BTN</option>
<option>USD</option>
<option>EUR</option>
</select>
</div>
</div>
</div>
</div>
<div class="panel-body">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand ms-5" href="#"><img src="{% static 'images/TecommLogo.png' %}" alt="Logo" height="60px" width="60px"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Shop by Category
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form class="d-flex Search col-5">
<input class="form-control me-auto col-8" type="search" placeholder="Search for anything" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
{% block content %}
{% endblock content%}
<footer>
<div class="panel panel-default">
<div class="panel-footer bg-light ">
<div class="row ms-5 me-5">
<div class="col-sm-3">
<div class="row">
<h3>Policies</h3>
</div>
<div class="row">
Privacy Policies
</div>
<div class="row">
Refund Policies
</div>
<div class="row">
Terms & Conditions
</div>
</div>
<div class="col-sm-3">
<div class="row">
<h3>Vendor</h3>
</div>
<div class="row">
Start Selling
</div>
<div class="row">
Learn to Sell
</div>
</div>
<div class="col-sm-3">
<div class="row">
<h3>Connect With Us</h3>
</div>
<div class="row">
<i class="bi bi-facebook"></i>Facebook
</div>
<div class="row">
<i class="bi bi-twitter"></i>Twiiter
</div>
<div class="row">
<i class="bi bi-instagram"></i>Instagram
</div>
</div>
<div class="col-sm-3">
<div class="row">
<h3>Help & Contact</h3>
</div>
<div class="row">
Contact
</div>
<div class="row">
About Us
</div>
<div class="row">
FAQs
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
homepage.html
{% extends 'index.html' %}
{% block content %}
Hello! this is my block content
{% endblock content %}
urls.py
from django.conf import settings
from django.conf.urls.static import static
from django.contrib import admin
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.urls import path, include
from . import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.homepage, name="homepage"),
# path('accounts/', include('accounts.urls')),
]
urlpatterns += staticfiles_urlpatterns()
urlpatterns += static(settings.MEDIA_URL,
document_root=settings.MEDIA_ROOT)
views.py
from django.shortcuts import render
def homepage(request):
return render(request, 'index.html')
I have done the similar projects earlier but it was working fine. I don't know why it doesn't work in this project while i have done everything similar
I have been trying this for a whole day. Any help will be appreciated.
You want to extend index.html to homepage.html so you have to call homepage.html in your views.py file.
from django.shortcuts import render
def homepage(request):
return render(request, 'homepage.html')
I am working on a django application and everything is working fine except I am getting an error Not Found: /about-us/undefined when I visit the url 127.0.0.1:8000/about-us/
With a view as below the error is not showing:
def about_us(request):
if request.method == 'GET':
return HttpResponse('<h1>About Page</h1>')
But when I render an HTML template as shown below then the error shows
def home(request):
if request.method == 'GET':
return render(request, 'website_files/index.html', {'home' : True})
website.urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.home, name="home"),
path('about-us/', views.about_us, name="about-us"),
path('why_us/', views.why_us, name="why_us"),
path('out_team/', views.out_team, name="out_team"),
path('it_solutions/', views.it_solutions, name="it_solutions"),
path('it_solutions/it_management_services', views.it_management_services, name="it_management_services"),
path('it_solutions/cyber_security_services', views.cyber_security_services, name="cyber_security_services"),
path('it_solutions/software_dev_services', views.software_dev_services, name="software_dev_services"),
path('it_solutions/networking_and_cloud_services', views.networking_services, name="networking_and_cloud_services"),
path('it_solutions/it_consultations', views.consulting_services, name="it_consultations"),
path('it_solutions/data_backup_and_recovery', views.backup_services, name="data_backup_and_recovery"),
path('it_solutions/email_hosting', views.email_hosting, name="email_hosting"),
path('it_solutions/web_hosting', views.web_hosting, name="web_hosting"),
path('stories', views.blogging, name="stories"),
path('contact_us', views.contact, name="contact_us"),
path('find_out', views.find_out, name="find_out"),
path('request_quote', views.get_quote, name="request_quote"),
]
main urls.py
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
# path('admin/', admin.site.urls),
path('', include('website.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
What am I missing? You assistance will greatly appriciated.
Edit
Below is the index.html
index.html
{% extends 'website_files/base.html' %}
{% load static %}
{% block content %}
<section class="slider">
<div class="slick-carousel carousel-arrows-light carousel-dots-light m-slides-0"
data-slick='{"slidesToShow": 1, "arrows": true, "dots": true, "speed": 700,"fade": true,"cssEase": "linear"}'>
<div class="slide-item align-v-h bg-overlay">
<div class="bg-img"><img src="{% static 'assets/images/sliders/Top-6-Software-Development-Methodologies.jpg' %}" alt="slide img"></div>
<div class="container">
<div class="row align-items-center">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-7">
<div class="slide-item__content">
<h2 class="slide-item__title">Latest Software To Your Possible Customers!!</h2>
<p class="slide-item__desc">We are experienced professionals who understand that IT services are
changing, and are true partners who care about your success.</p>
Get Started
</div>
</div>
</div>
</div>
</div>
<div class="slide-item align-v-h bg-overlay">
<div class="bg-img"><img src="{% static 'assets/images/sliders/Online-Presence.jpg' %}" alt="slide img"></div>
<div class="container">
<div class="row align-items-center">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-7">
<div class="slide-item__content">
<h2 class="slide-item__title">Online Presence <br> To Ensure High Availability.</h2>
<p class="slide-item__desc">We understand the importance of having an online presence. We are therefore, strive to help you have a digital footprint</p>
Get Started
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="features-layout3 pt-0 pb-90 bg-gray">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-8">
<div class="row features-wrapper">
<div class="col-sm-4 feature-item">
<h4 class="feature-item__title">Software Asset</h4>
<p class="feature-item__desc">All aspects of your software assets including development, purchasing, deployment &
maintenance.</p>
<i class="icon-arrow-right icon-outlined"></i>
</div>
<div class="col-sm-4 feature-item">
<h4 class="feature-item__title">Enterprise Services</h4>
<p class="feature-item__desc">Ranging from but not limited to IT Counsultation, Software Development, Email Hosting etc.</p>
<i class="icon-arrow-right icon-outlined"></i>
</div>
<div class="col-sm-4 feature-item">
<h4 class="feature-item__title">Custom Requests</h4>
<p class="feature-item__desc">We build bespoke and dynamic systems with associated workflows, and tasks.</p>
<i class="icon-arrow-right icon-outlined"></i>
</div>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-4">
<div class="feature-item feature-item-custom bg-primary">
<h4 class="feature-item__title">Thinking insights, verified and realtime information help you
make the right decisions!
</h4>
<a href="{% url 'it_solutions' %}" class="btn btn__white btn__link">
<span>Find Your Solution</span><i class="icon-arrow-right icon-outlined"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<section class="about-layout6 bg-gray pt-0 pb-0">
<div class="container">
<div class="row heading-layout2 mb-70">
<div class="col-12">
<h2 class="heading__subtitle color-body">Nationwide Service, Local Expertise</h2>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-7">
<h3 class="heading__title mb-30">Keep your business safe & ensure high availability.</h3>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-5 about__Text">
<h5 class=" mb-30">Message from our Founder.</h5>
<p>Here at <b>TechTitan</b>, we strive to help you improve efficiency, leverage tech, and provide better customer experiences with the modern technology
services available all over the world. Our skilled personnel, utilising the latest technologies
combined with decades of experience will help you and your business archieve the standard that you strive for and give you a competitive advantage over your peers</p>
<!-- <img src="{% static 'assets/images/about/Isaac.jpg' %}" alt="singnture" class="mb-20"> -->
</div>
</div>
</div>
<div class="image-wrapper bg-white">
<div class="container">
<div class="row align-items-end">
<div class="col-sm-12 col-md-12 col-lg-7">
<div class="about__img">
<img src="{% static 'assets/images/about/IMG_0752.jpg' %}" alt="about">
</div>
</div>
<!-- <div class="col-sm-12 col-md-12 col-lg-5">
<ul class="list-items list-unstyled mb-30" style="margin-top: -500px;">
<li> Continued support to our clients</li>
<li> Provided the best solutions that your need</li>
<li> Ensuring that you are moving with the changing worldmwith our updates</li>
</ul>
<a href="{% url 'about-us' %}" class="btn btn__primary btn__icon btn__xl">
<span>More About Us</span><i class="icon-arrow-right"></i>
</a>
</div> -->
</div>
</div>
</div>
</section>
<section class="services-layout2 services-masonry bg-no-repeat bg-size-auto bg-top-right pt-130 pb-90">
<div class="bg-img"><img src="{% static 'assets/images/backgrounds/6.png' %}" alt="background"></div>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-6 offset-lg-3">
<div class="heading heading-layout2 text-center mb-50">
<h2 class="heading__subtitle">Only settle for the best</h2>
<h3 class="heading__title">Our technology allows you to offer the best service to your possible
customers!
</h3>
</div>
</div>
</div>
<div class="row services-wrapper">
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="service-item">
<div class="service-item__content">
<div class="service-item__icon">
<i class="icon-server"></i>
</div>
<h4 class="service-item__title">IT Management <br> Services</h4>
<p class="service-item__desc">IT management services that manages and oversees the IT infrastructure of your
organization responsible for networking and operations.</p>
<a href="{% url 'it_management_services' %}" class="btn btn__secondary btn__link">
<span>Read More</span>
<i class="icon-arrow-right"></i>
</a>
</div>
<div class="service-item__overlay bg-overlay bg-overlay-primary">
<div class="bg-img"><img src="{% static 'assets/images/services/1.jpg' %}" alt="background"></div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="service-item">
<div class="service-item__content">
<div class="service-item__icon">
<i class="icon-cloud"></i>
</div>
<h4 class="service-item__title">Cyber Security<br> Services</h4>
<p class="service-item__desc">Drive your business and manage risk with us when it comes
cyber security, cloud, and manage security services and extend your team with leading experts.</p>
<a href="{% url 'cyber_security_services' %}" class="btn btn__secondary btn__link">
<span>Read More</span>
<i class="icon-arrow-right"></i>
</a>
</div>
<div class="service-item__overlay bg-overlay bg-overlay-primary">
<div class="bg-img"><img src="{% static 'assets/images/services/2.jpg' %}" alt="background"></div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="service-item">
<div class="service-item__content">
<div class="service-item__icon">
<i class="icon-programming"></i>
</div>
<h4 class="service-item__title">Software Development<br> Services</h4>
<p class="service-item__desc">We develop solutions that help you make informed decisions that keep your business going forward especially with rapid changes we face on a daily basis.</p>
<a href="{% url 'software_dev_services' %}" class="btn btn__secondary btn__link">
<span>Read More</span>
<i class="icon-arrow-right"></i>
</a>
</div>
<div class="service-item__overlay bg-overlay bg-overlay-primary">
<div class="bg-img"><img src="{% static 'assets/images/services/5.jpg' %}" alt="background"></div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="service-item">
<div class="service-item__content">
<div class="service-item__icon">
<i class="icon-network"></i>
</div>
<h4 class="service-item__title">Networking and Cloud Computing<br> Services</h4>
<p class="service-item__desc">Cloud computing is the on-demand, availability of computer system
resources, especially data storage and computing power, without direct active management by the user.
</p>
<a href="{% url 'networking_and_cloud_services' %}" class="btn btn__secondary btn__link">
<span>Read More</span>
<i class="icon-arrow-right"></i>
</a>
</div>
<div class="service-item__overlay bg-overlay bg-overlay-primary">
<div class="bg-img"><img src="{% static 'assets/images/services/3.jpg' %}" alt="background"></div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="service-item">
<div class="service-item__content">
<div class="service-item__icon">
<i class="icon-technician"></i>
</div>
<h4 class="service-item__title">IT Consulting <br> Services</h4>
<p class="service-item__desc">Trying to implement new technologies can be a challenge. With us on you side, we will give you information on the current technologies to ensure you have the best technologies possible.</p>
<a href="{% url 'it_consultations' %}" class="btn btn__secondary btn__link">
<span>Read More</span>
<i class="icon-arrow-right"></i>
</a>
</div>
<div class="service-item__overlay bg-overlay bg-overlay-primary">
<div class="bg-img"><img src="{% static 'assets/images/services/4.jpg' %}" alt="background"></div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="service-item">
<div class="service-item__content">
<div class="service-item__icon">
<i class="icon-file"></i>
</div>
<h4 class="service-item__title">Backup & Recovery<br> Services</h4>
<p class="service-item__desc">While you can’t predict unexpected events, we’ll ensure the right
precautions are in place to minimize downtime and keep you moving in the right direction.</p>
<a href="{% url 'data_backup_and_recovery' %}" class="btn btn__secondary btn__link">
<span>Read More</span>
<i class="icon-arrow-right"></i>
</a>
</div>
<div class="service-item__overlay bg-overlay bg-overlay-primary">
<div class="bg-img"><img src="{% static 'assets/images/services/6.jpg' %}" alt="background"></div>
</div>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-sm-12 col-md-12 col-lg-5">
<p class="fz-16 my-4">Trusted by multiple organizations, for 5 years and running, it has been
delivering
smiles to hundreds of IT advisors, developers, users, and business owners.
</p>
</div>
<div class="col-sm-12 col-md-12 col-lg-7 d-flex align-items-center justify-content-end">
Find Your Solution
</div>
</div>
</div>
</section>
<section id="features" class="features-layout1 pt-130 pb-220">
<div class="bg-img"><img src="{% static 'assets/images/backgrounds/10.jpg' %}" alt="background"></div>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
<div class="heading heading-layout2 mb-40">
<h2 class="heading__subtitle color-body">Ensure High Availability of Your Services</h2>
<h3 class="heading__title color-white">Easy solutions for all difficult IT problems, keep businesses safe &
ensure high availability.</h3>
</div>
<a href="{% url 'contact_us' %}" class="btn btn__white btn__bordered btn__xl btn__icon minwidth-170">
<span>Get Started</span>
<i class="icon-arrow-right"></i>
</a>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-6">
<div class="row features-wrapper mt-40">
<div class="col-sm-6 feature-item">
<div class="feature-item__icon">
<i class="icon-statistic"></i>
</div>
<div class="d-flex align-items-center justify-content-between">
<h4 class="feature-item__title mb-0">Software Development</h4>
<i class="icon-arrow-right icon-outlined"></i>
</div>
</div>
<div class="col-sm-6 feature-item">
<div class="feature-item__icon">
<i class="icon-management"></i>
</div>
<div class="d-flex align-items-center justify-content-between">
<h4 class="feature-item__title mb-0">IT Counsultation</h4>
<i class="icon-arrow-right icon-outlined"></i>
</div>
</div>
<div class="col-sm-6 feature-item">
<div class="feature-item__icon">
<i class="icon-software"></i>
</div>
<div class="d-flex align-items-center justify-content-between">
<h4 class="feature-item__title mb-0">Email Hosting</h4>
<i class="icon-arrow-right icon-outlined"></i>
</div>
</div>
<div class="col-sm-6 feature-item">
<div class="feature-item__icon">
<i class="icon-relational"></i>
</div>
<div class="d-flex align-items-center justify-content-between">
<h4 class="feature-item__title mb-0">Website Hosting</h4>
<i class="icon-arrow-right icon-outlined"></i>
</div>
</div>
</div>
<div class="row mt-50 contact-text">
<div class="col-sm-9 px-0">
<strong class="color-white">If you have any questions or need help, feel free to contact with our team,
or call
(+260) 966477311</strong>
</div>
<div class="col-sm-3 px-0 d-flex justify-content-end">
Contact Us
</div>
</div>
</div>
</div>
</div>
</section>
<div class="bg-no-repeat bg-top">
<div class="bg-img"><img src="{% static 'assets/images/backgrounds/11.jpg' %}" alt="backgrounds"></div>
<section id="contact" class="contact-layout2 pt-0">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="contact-panel d-flex flex-wrap mt--170">
<div class="contact-panel__banner bg-overlay bg-overlay-primary d-flex flex-column justify-content-between" style="background-color:red">
<div class="bg-img"><img src="{% static 'assets/images/banners/6.jpg' %}" alt="background"></div>
<div class="heading heading-layout2 heading-light">
<h3 class="heading__title mb-30">Perfect Solutions For Your Business!</h3>
<p class="heading__desc mb-30">TechTitan has been helping organizations throughout the World to manage
their IT with our unique approach to technology management and consultancy solutions. </p>
</div>
<div class="d-flex flex-wrap">
<a href="{% url 'contact_us' %}" class="btn btn__white btn__bordered btn__icon">
<span>Get Started</span><i class="icon-arrow-right"></i>
</a>
</div>
</div>
<form class="contact-panel__form" method="post" action="{% url 'find_out' %}" id="contactForm">
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="form-group">
<label for="contact-name">Name (required)</label>
<input type="text" required class="form-control" placeholder="Name" id="contact-name" name="contact-name"
required>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="form-group">
<label for="contact-email">Email (required)</label>
<input type="email" required class="form-control" placeholder="Email" id="contact-email"
name="contact-email" required>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="form-group">
<label for="contact-Phone">Inquiry (required)</label>
<select required class="form-control">
<option value="">Select Service</option>
<option value="Email Hosting">IT Management</option>
<option value="IT Counsultation">Cyber Security</option>
<option value="Software Development">Software Development</option>
<option value="Website Developemnt">Networking And Cloud Computing</option>
<option value="Website Developemnt">IT Consulting</option>
<option value="Website Developemnt">Backup & Recovery</option>
<option value="Website Developemnt">Email Hosting</option>
<option value="Website Developemnt">Website Hosting</option>
</select>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="form-group">
<label for="contact-message">Additional Details (required)</label>
<textarea required class="form-control" placeholder="Describe your inquiry!" id="contact-message"
name="contact-message"></textarea>
</div>
<button type="submit" class="btn btn__secondary btn__xl btn__block">Submit Request </button>
<div class="contact-result"></div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
</div>
<section class="clients border-top pt-50 pb-50">
<div class="container">
<div class="row align-items-center">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="slick-carousel"
data-slick='{"slidesToShow": 6, "arrows": false, "dots": false, "autoplay": true,"autoplaySpeed": 2000, "infinite": true, "responsive": [ {"breakpoint": 992, "settings": {"slidesToShow": 4}}, {"breakpoint": 767, "settings": {"slidesToShow": 3}}, {"breakpoint": 480, "settings": {"slidesToShow": 2}}]}'>
<div class="client">
<img src="{% static 'assets/images/clients/1.jpg' %}" alt="client">
<img src="{% static 'assets/images/clients/1.jpg' %}" alt="client">
</div>
<div class="client">
<img src="{% static 'assets/images/clients/Techmasters.png' %}" alt="client">
<img src="{% static 'assets/images/clients/Techmasters.png' %}" alt="client">
</div>
<div class="client">
<img src="{% static 'assets/images/clients/idsp.jpg' %}" alt="client">
<img src="{% static 'assets/images/clients/idsp.jpg' %}" alt="client">
</div>
<div class="client">
<img src="{% static 'assets/images/clients/4.png' %}" alt="client">
<img src="{% static 'assets/images/clients/4.png' %}" alt="client">
</div>
<div class="client">
<img src="{% static 'assets/images/clients/5.png' %}" alt="client">
<img src="{% static 'assets/images/clients/5.png' %}" alt="client">
</div>
<div class="client">
<img src="{% static 'assets/images/clients/6.png' %}" alt="client">
<img src="{% static 'assets/images/clients/6.png' %}" alt="client">
</div>
<div class="client">
<img src="{% static 'assets/images/clients/7.png' %}" alt="client">
<img src="{% static 'assets/images/clients/7.png' %}" alt="client">
</div>
</div>
</div>
</div>
</div>
</section>
<section class="banner-layout2 pt-0 pb-100">
<div class="bg-img"><img src="{% static 'assets/images/backgrounds/brickred.svg' %}" alt="background"></div>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-5">
<div class="banner-text">
<div class="heading-layout2 heading-light mb-40">
<h3 class="heading__title mb-30">Timely service delivery!!</h3>
<p class="heading__desc">We ensure that the services we offer are delivered when they are scheduled for. No delays because we understand that your business as to go forward at all times.
</p>
</div>
Get Started
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-7">
<div class="banner-img">
<img src="{% static 'assets/images/logo/TechTitan_Logo_1.jpg' %}" alt="banner">
</div>
</div>
</div>
</div>
</section>
{% endblock %}
I tried all steps and commands to enable the static part when project deployed on Cpanel python app but I failed. Please help me out. Thanks in advance.
Deployed:
Deployed my codes on Cpanel on goDaddy
Images which are visible are from imported from the Internet not from static file
Expected: (On local machine)
I'm able to open each tab in local but getting 404 error on deployed one.
views.py
from django.shortcuts import render, redirect
from django.contrib import messages
from django.http import HttpResponse
from django.http import HttpResponseRedirect
from .forms import ManuForm
def home(request):
if request.method == 'GET':
return render(request, 'manufacture_page/homepage.html', {'form': ManuForm()})
else:
try:
form = ManuForm(request.POST)
if form.is_valid():
form.save(commit=True)
messages.info(request, 'Thanks! Will contact you back.')
return redirect(request.META['HTTP_REFERER'])
else:
print("IN ERROR")
errmsg= str(form.errors)
print(errmsg)
if "Phone already exists" in errmsg:
errmsg="Error!! Entered Number already exists!"
elif "Enter a valid phone number" in errmsg:
errmsg="Error!! Enter number with country code. (e.g. +917529984220)."
else:
errmsg="Error!! Bad data passed in!"
messages.error(request,errmsg)
# return render(request.META['HTTP_REFERER'], 'homepage.html', {'form': ManuForm(), 'error': errmsg})
return redirect(request.META['HTTP_REFERER'], {'form': ManuForm(), 'error': errmsg})
return redirect(home)
except ValueError:
return render(request, 'manufacture_page/homepage.html', {'form': ManuForm(), 'error':'Bad data passed in!'})
def about(request):
return render(request, 'manufacture_page/about.html')
def services(request):
return render(request, 'manufacture_page/services.html')
settings.py
import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
SECRET_KEY = '2dh-pafar$e$te&(m)b^z&yif035l1q=gid!q%$*+#l6r*&%*x'
DEBUG = False
ALLOWED_HOSTS = ['prezotech.in']
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'manufacture_page',
'phonenumber_field',
]
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 = 'lable_manufacturer.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'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 = 'lable_manufacturer.wsgi.application'
# Database
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
# Password validation
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/3.0/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/3.0/howto/static-files/
STATICFILES_DIRS=[BASE_DIR+"/static"]
STATIC_URL = '/static/'
STATIC_ROOT= os.path.join(BASE_DIR, 'static')
urls.py
from django.contrib import admin
from django.urls import path
from manufacture_page import views
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.home),
path('homepage.html', views.home),
path('about.html', views.about),
path('services.html', views.services),
path('homepage.html#newsletter', views.home),
]+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
homepage.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/solid.css" integrity="sha384-v2Tw72dyUXeU3y4aM2Y0tBJQkGfplr39mxZqlTBDUZAb9BGoC40+rdFCG0m10lXk" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="{% static "/manufacture_page/style.css" %}">
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" href="{% static "/manufacture_page/logo.png" %}">
<title>Label manufacturer</title>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
<div class="container">
<!-- logo -->
<a href="" class="navbar-brand">
<img src="https://i.ibb.co/523F1fP/poster5-20-12359-1.png" width="45" height="35">
</a>
Prezotech
<a href="https://api.whatsapp.com/send?phone=917529984220" style="font-size:17px;color:grey">
<!-- Send Message</a>-->
<!-- <a href="whatsapp://send?text=Hello World!&phone=+917529984220">-->
<!-- <i class="fa fa-whatsapp style="font-size:22px;color:blue" " aria-hidden="true"></i>-->
Send Msg <i class="fa fa-whatsapp" style="font-size:23px;color:#25D366; "></i>
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
Home
</li>
<li class="nav-item">
About Us
</li>
<li class="nav-item">
Products & Services
</li>
<li class="nav-item">
Connect with Us
</li>
</ul>
</div>
</div>
</nav>
<!-- SHOWCASE SLIDER -->
<section id="showcase">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item carousel-image-1 ">
<div class="container">
<div class="carousel-caption d-sm-block text-right mb-5 text-dark">
<h1 class="brown_bk"><span>Contact Us</span></h1>
<p class="lead"><span>
Phone Number:
General Query: +91 9990768844 <br>
Sales Team: +91 9990764567<br>
Manufacturing Team: +91 9990768876<br>
Technical Team: +91 9990768833
</span></p>
Contact Details
</div>
</div>
</div>
<div class="carousel-item carousel-image-2">
<div class="container">
<div class="carousel-caption d-sm-block mb-5">
<h1 class="brown_bk"><span>Reviews</span></h1>
<p class="lead"><span>We have the most satisfied customers.
Check out customers review in different sites.</span></p>
<a target="_blank" href="https://www.google.com/search?safe=active&tbm=lcl&sxsrf=ALeKk01Q1Rq0ZRY_DswG94FRSh3b8_7qFg%3A1591739597842&ei=zQTgXs_3Mt_S1fAP3OakmAo&q=prezotech+solutions+private+limited&oq=Prezotech+sol&gs_l=psy-ab.3.0.35i39k1l2j0.878.1332.0.2388.4.4.0.0.0.0.128.386.3j1.4.0....0...1c.1.64.psy-ab..0.4.386...0i30k1.0.a1stxb_bjpo#rlfi=hd:;si:17620352125786189722,l,CiNwcmV6b3RlY2ggc29sdXRpb25zIHByaXZhdGUgbGltaXRlZEjUysywg6uAgAhaWgojcHJlem90ZWNoIHNvbHV0aW9ucyBwcml2YXRlIGxpbWl0ZWQQABABEAIQAxgAGAEYAhgDIiNwcmV6b3RlY2ggc29sdXRpb25zIHByaXZhdGUgbGltaXRlZA;mv:[[28.633411,77.31693310000001],[28.629303200000003,77.31207959999999]]"
class="btn btn-primary btn-sm"> Google</a>
<a target="_blank" href="https://www.justdial.com/Delhi/Prezotech-Solutions-Pvt-Ltd-Near-Nexa-Maruti-Showroom-Ghazipur/011PXX11-XX11-171218141608-Q5M6_BZDET/reviews/page-20?xid=THVkaGlhbmEgV292ZW4gTGFiZWwgTWFudWZhY3R1cmVycyBMb2xheQ=="
class="btn btn-primary btn-sm"> JustDial</a>
<a target="_blank" href="https://www.indiamart.com/prezotech/testimonial.html"
class="btn btn-primary btn-sm"> IndiaMart</a>
<a target="_blank" href="https://www.facebook.com/Prezotech/reviews/?ref=page_internal"
class="btn btn-primary btn-sm"> Facebook</a>
</div>
</div>
</div>
<div class="carousel-item carousel-image-3 active">
<div class="container">
<div class="carousel-caption d-sm-block text-right mb-5">
<h1 class="brown_bk"><span>Prezotech Label Manufacturer</span></h1>
<p class="lead"><span>Leader in the field of label manufacturing and Barcode related solution provider.</span></p>
Learn More About Us
</div>
</div>
</div>
</div>
<a href="#myCarousel" data-slide="prev" class="carousel-control-prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#myCarousel" data-slide="next" class="carousel-control-next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
<!--HOME ICON SECTION -->
<section id="home-icons" class="py-5">
<div class="container">
<div class="row">
<div class="col-md-4 mb-4 text-center">
<i class="fas fa-handshake fa-3x mb-2"></i>
<h3><b>TRUST!</b></h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero, veniam.</p>
</div>
<div class="col-md-4 mb-4 text-center">
<i class="fas fa-user-lock fa-3x mb-2"></i>
<h3><b>COMMITMENT!</b></h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero, veniam.</p>
</div>
<div class="col-md-4 mb-4 text-center">
<i class="fas fa-thumbs-up fa-3x mb-2"></i>
<h3><b>QUALITY!</b></h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero, veniam.</p>
</div>
</div>
</div>
</section>
<!-- HOME HEADING SECTION -->
<section id="home-heading" class="p-5">
<div class="dark-overlay">
<div class="row">
<div class="col">
<div class="container pt-5">
<h1>Our Motto: Customer First!</h1>
<p class="d-none d-md-block">
"Happy customers are your biggest advocates and can become your most successful sales team."
</p>
</div>
</div>
</div>
</div>
</section>
<!-- INFO SECTION -->
<section id="info" class="py-3">
<div class="container">
<div class="row">
<div class="col-md-6 align-self-center">
<h3>Our Team is Our Family!</h3>
<p>With a bunch of experienced team members and Japanese machines we deliver standard and on time
label with any size demanded.</p>
Learn More
</div>
<div class="col-md-6">
<img src="{% static "/manufacture_page/label.gif" %}" alt="" class="img-fluid">
</div>
</div>
</div>
</section>
<!-- VIDEO PLAY -->
<section id="video-play">
<div class="dark-overlay">
<div class="row">
<div class="col">
<div class="container p-5">
<a href="#" class="video" data-video="https://www.youtube.com/embed/cafgEkr2wcc" data-toggle="modal" data-target="#videoModal">
<i class="fas fa-play fa-3x"></i>
</a>
<h1>See What We Do</h1>
</div>
</div>
</div>
</div>
</section>
<!-- PHOTO GALLERY -->
<section id="gallery" class="py-5">
<div class="container">
<h1 class="text-center">Photo Gallery</h1>
<p class="text-center">Check out our photos</p>
<div class="row mb-4">
<div class="col-md-4">
<a href="{% static "/manufacture_page/one.jpg" %}" data-toggle="lightbox" data-gallery="img-gallery" data-height="560"
data-width="560">
<img src="{% static "/manufacture_page/one.jpg" %}" alt="" class="img-fluid">
</a>
</div>
<div class="col-md-4">
<a href="{% static "/manufacture_page/two.png" %}" data-toggle="lightbox" data-gallery="img-gallery" data-height="561"
data-width="561">
<img src="{% static "/manufacture_page/two.png" %}" alt="" class="img-fluid">
</a>
</div>
<div class="col-md-4">
<a href="{% static "/manufacture_page/three.jpg" %}" data-toggle="lightbox" data-gallery="img-gallery" data-height="562"
data-width="562">
<img src="{% static "/manufacture_page/three.jpg" %}" alt="" class="img-fluid">
</a>
</div>
</div>
<div class="row mb-4">
<div class="col-md-4">
<a href="{% static "/manufacture_page/four.jpg" %}" data-toggle="lightbox" data-gallery="img-gallery" data-height="563"
data-width="563">
<img src="{% static "/manufacture_page/four.jpg" %}" alt="" class="img-fluid">
</a>
</div>
<div class="col-md-4">
<a href="{% static "/manufacture_page/five.png" %}" data-toggle="lightbox" data-gallery="img-gallery" data-height="564"
data-width="564">
<img src="{% static "/manufacture_page/five.png" %}" alt="" class="img-fluid">
</a>
</div>
<div class="col-md-4">
<a href="{% static "/manufacture_page/six.jpeg" %}" data-toggle="lightbox" data-gallery="img-gallery" data-height="565"
data-width="565">
<img src="{% static "/manufacture_page/six.jpeg" %}" alt="" class="img-fluid">
</a>
</div>
</div>
</div>
</section>
<!-- NEWSLETTER -->
<section id="newsletter" class="text-center p-5 bg-dark text-white">
<div class="container">
<div class="row">
<div class="col">
<div class ="newsletter1 {% if active_tab == 'newsletter1' %} active{% endif %}">
<label><h1>Get In Touch</h1></label>
<!-- <h2>{{ error }}</h2>-->
{% for message in messages %}
<div class="alert alert-success">
<a class="close" href="#" data-dismiss="alert">×</a>
<h6> {{ message }} </h6>
</div>
{% endfor %}
<form method="POST" class="form-inline justify-content-center">
{% csrf_token %}
<input type="text" name="name" class="form-control mb-2 mr-2" placeholder="Enter Name" id="name" required>
<input type="tel" name="phone" class="form-control mb-2 mr-2" placeholder="Enter Phone" id="phone" required>
<input type="email" name="email" class="form-control mb-2 mr-2" placeholder="Enter Email" id="email" >
<input type="text" name="query" class="form-control mb-2 mr-2" placeholder="Any Query?" id="query">
<button class="btn btn-primary mb-2" type="submit">Send</button>
</form>
</div>
<br>
<!-- Social media-->
<li class="nav-item ml-auto active">
<a href="https://www.prezotech.com/" class="nav-link" >
<input type="image" src="https://i.ibb.co/kchdgsK/poster5-23-205140-1.png" />
</a>
</li>
<li class="nav-item ml-auto">
<i class="fab fa-instagram" style="font-size:32px;color:red"></i>
</li>
<li class="nav-item ml-auto">
<i class="fab fa-youtube" style="font-size:32px;color:red" ></i>
</li>
<li class="nav-item ml-auto">
<i class="fab fa-facebook-f" style="font-size:27px;color:blue" ></i>
</li>
<li class="nav-item ml-auto">
<i class="fa fa-linkedin" style="font-size:29px;color:blue" ></i>
</li>
<li class="nav-item ml-auto">
<i class="fa fa-twitter" style="font-size:29px;color:blue" ></i>
</li>
<li class="nav-item ml-auto">
<i class="fas fa-comment-dots" style="font-size:29px;color:purple" ></i>
</li>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer id="main-footer" class="text-center p-4">
<div class="container">
<div class="row">
<div class="col">
<p>Copyright ©
<span id="year"></span> Prezotech</p>
</div>
</div>
</div>
</footer>
<!-- VIDEO MODAL -->
<div class="modal fade" id="videoModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
<iframe src="" frameborder="0" height="350" width="100%" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.min.js"></script>
<script>
// Get the current year for the copyright
$('#year').text(new Date().getFullYear());
// Configure Slider
$('.carousel').carousel({
interval: 6000,
pause: 'hover'
});
// Lightbox Init
$(document).on('click', '[data-toggle="lightbox"]', function (event) {
event.preventDefault();
$(this).ekkoLightbox();
});
// Video Play
$(function () {
// Auto play modal video
$(".video").click(function () {
var theModal = $(this).data("target"),
videoSRC = $(this).attr("data-video"),
videoSRCauto = videoSRC + "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1";
$(theModal + ' iframe').attr('src', videoSRCauto);
$(theModal + ' button.close').click(function () {
$(theModal + ' iframe').attr('src', videoSRC);
});
});
});
</script>
</body>
</html>
Directory structure
enter link description here
P.S: I have already used collectstatic
Run this command to build all the static files:
python manage.py collectstatic
After this, a static folder containing all the required static files will be created at the project root. Just upload that folder onto cPanel and paste the URL back in your Django app.
I am new at django and I have an app in django project. My base.html has navigation bar through which you can redirect to "about", 'contact us', 'home'.
The first page when app starts (after loging in) is home.
<!DOCTYPE html>
<html lang="en">
<head>
{%load staticfiles%}
<meta charset="utf-8">
<title>Ekyam: India's First Entrepreneurial Ecosystem</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900" rel="stylesheet">
<!-- Bootstrap CSS File -->
<link href="{% static "visit/lib/bootstrap/css/bootstrap.min.css" %}" rel="stylesheet">
<!-- Libraries CSS Files -->
<link href="{% static "visit/lib/font-awesome/css/font-awesome.min.css"%}" rel="stylesheet">
<link href="{% static "visit/lib/owlcarousel/owl.carousel.min.css" %}" rel="stylesheet">
<link href="{% static "visit/lib/owlcarousel/owl.theme.min.css"%}" rel="stylesheet">
<link href="{% static "visit/lib/owlcarousel/owl.transitions.min.css" %}" rel="stylesheet">
<!-- Main Stylesheet File -->
<link href="{%static "visit/css/style.css"%}" rel="stylesheet">
<!--Your custom colour override - predefined colours are: colour-blue.css, colour-green.css, colour-lavander.css, orange is default-->
<link href="#" id="colour-blue" rel="stylesheet">
</head>
<body class="page-index has-hero">
<!--Change the background class to alter background image, options are: benches, boots, buildings, city, metro -->
<div id="background-wrapper" class="city" data-stellar-background-ratio="0.1">
<!-- ======== #Region: #navigation ======== -->
<div id="navigation" class="wrapper">
<!--Hidden Header Region-->
<div class="header-hidden collapse">
<div class="header-hidden-inner container">
<div class="row">
<div class="col-md-3">
<h3>
About Us
</h3>
<p>Ekyam is dedicated to support and nourish Startups and accelaration</p>
<i class="fa fa-plus"></i> Learn more
</div>
<div class="col-md-3">
<!--#todo: replace with company contact details-->
<h3>
Contact Us
</h3>
<address>
<strong>EKYAM</strong>
<abbr title="Address"><i class="fa fa-pushpin"></i></abbr>
MMMDU, Mullana, Ambala- Haryana
<br>
<abbr title="Phone"><i class="fa fa-phone"></i></abbr>
8219984448
<br>
<abbr title="Email"><i class="fa fa-envelope-alt"></i></abbr>
info#ekyam.com
</address>
</div>
<div class="col-md-6">
<!--Colour & Background Switch for demo - #todo: remove in production-->
<h3>
Theme Variations
</h3>
<div class="switcher">
<div class="cols">
Backgrounds:
<br>
Benches Boots Buildings
City Metro
</div>
<div class="cols">
Colours:
<br>
Orange Green Blue <a href="#lavender" class="colour lavender "
title="Lavender">Lavender</a>
</div>
</div>
<p>
<small>Selection is not persistent.</small>
</p>
</div>
</div>
</div>
</div>
<!--Header & navbar-branding region-->
<div class="header">
<div class="header-inner container">
<div class="row">
<div class="col-md-8">
<!--navbar-branding/logo - hidden image tag & site name so things like Facebook to pick up, actual logo set via CSS for flexibility -->
<a class="navbar-brand" title="Home" href = "{% url "visit:index"%}">
<h1 class="hidden">
<h1>EKYAM</h1>
</h1>
</a>
<br/>
<div class="navbar-slogan">
Hub Of StartUp
<br> By The Brogrammers
</div>
</div>
<!--header rightside-->
<div class="col-md-4">
<!--user menu-->
<ul class="list-inline user-menu pull-right">
</ul>
<ul class="list-inline user-menu pull-right">
<li class="user-register"><i class="fa fa-edit text-primary "></i> Register</li>
<li class="user-login"><i class="fa fa-sign-in text-primary"></i> Login</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="navbar navbar-default">
<!--mobile collapse menu button-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<!--everything within this div is collapsed on mobile-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" id="main-menu">
<li class="icon-link">
<i class="fa fa-home"></i>
</li>
<li class="dropdown">
Comunity<b class="caret"></b>
<!-- Dropdown Menu -->
<ul class="dropdown-menu">
<li class="dropdown-header"> </li>
<li>Services</li>
<li>About Us</li>
<li>Login</li>
<li>Sign-Up</li>
<li class="dropdown-footer">Connect</li>
</ul>
</li>
<li>Join Us</li>
<li class="dropdown dropdown-mm">
Mega Menu<b class="caret"></b>
<!-- Dropdown Menu -->
<ul class="dropdown-menu dropdown-menu-mm dropdown-menu-persist">
<li class="row">
<ul class="col-md-6">
<li class="dropdown-header">Websites and Apps</li>
<li>Analysis and Planning</li>
<li>User Experience / Information Architecture</li>
<li>User Interface Design / UI Design</li>
<li>Code & Development / Implementation & Support</li>
</ul>
<ul class="col-md-6">
<li class="dropdown-header">Enterprise solutions</li>
<li>Business Analysis</li>
<li>Custom UX Consulting</li>
<li>Quality Assurance</li>
</ul>
</li>
<li class="dropdown-footer">
<div class="row">
<div class="col-md-7">Like the lite version? <strong>Get the extended version of Flexor.</strong></div>
<div class="col-md-5">
<i class="fa fa-cloud-download"></i> Get It Now
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
<!--/.navbar-collapse -->
</div>
</div>
</div>
<div class="hero" id="highlighted">
<div class="inner">
<!--Slideshow-->
<div id="highlighted-slider" class="container">
<div class="item-slider" data-toggle="owlcarousel" data-owlcarousel-settings='{"singleItem":true, "navigation":true, "transitionStyle":"fadeUp"}'>
<!--Slideshow content-->
<!--Slide 1-->
{%block content%}
{%endblock%}
</div>
<div class="col-md-6 hidden-xs">
<img src="img/slides/slide2.png" alt="Slide 2" class="center-block img-responsive">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer id="footer" class="block block-bg-grey-dark" data-block-bg-img="img/bg_footer-map.png" data-stellar-background-ratio="0.4">
<div class="container">
<div class="row" id="contact">
<div class="col-md-3">
<address>
<strong>JunityMe Inc</strong>
<br>
<i class="fa fa-map-pin fa-fw text-primary"></i> Maharishi Markendeshver Engineering College
<br>
<i class="fa fa-phone fa-fw text-primary"></i> 8219984448
<br>
<i class="fa fa-envelope-o fa-fw text-primary"></i> info#junity.com
<br>
</address>
</div>
Top
</div>
</footer>
The problem is, only this template is getting rendered. When I click on the other options on the navigation bar, the url changer(/incubator/) but the template remains the same.
urls.py:
from django.conf.urls import url
from . import views
app_name = 'main'
urlpatterns = [
url(r'^', views.home, name='home'),
url(r'incubators/', views.incubators, name='incubators'),
url(r'about/', views.about, name='about'),
]
I don't see any kinds of error. Somehow I think my urls are unable to connect to views.py.
views.py:
from django.shortcuts import render
from django.http import HttpResponse
def home(request):
return render(request, 'main/home.html')
def incubators(request):
return render(request, 'main/incubators.html')
def about(request):
return HttpResponse("dsfsddsf")
Please suggest edits if I can make it as simple as possible.
The problem is
url(r'^', views.home, name='home'),
The ^ sign means start of url so that matches all urls that have a start, i.e every url. So any URL will be rendered by views.home.
move that one to the bottom of the list, Then it will only match anything when all the other URLs have tried and it will do what you want.
If you really want to match only / then add
url(r'^$', views.home, name='home'),
$ means the end of an url, so that matches where there is nothing at all between the start and the end, i.e a empty url path