I am new to Django, I am trying to use bootstrap carousel in Django, all images are getting loaded, but slider is not working.
<link rel="stylesheet" href="{% static 'Monitoring/css/bootstrap/bootstrap.min.css' %}" />
<script src="{% static 'Monitoring/js/jquery/jquery-1.12.4.min.js' %}" ></script>
<script src="{% static 'Monitoring/js/bootstrap/bootstrap.min.js' %}"> </script>
<style>
.carousel-inner{
height:600px !important;
}
</style>
Below is the body :
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="width:100%;">
<!-- Indicators -->
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="{% static 'Monitoring/media/login/image1.png' %}" alt="Chania" height="600" width="100%">
</div>
<div class="item">
<img src="{% static 'Monitoring/media/login/image2.png' %}" alt="Chania" height="600" width="100%">
</div>
<div class="item">
<img src="{% static 'Monitoring/media/login/image3.png' %}" alt="Chania" height="600" width="100%">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Also, is there any better way to read all images from a particular folder and use them for carousel slider. In the above code, I am doing same thing for all three images, is it possible to do the same with loop all images in folder.
the below mentioned script works with inclusion of bootstrap 4 in your <head> tag
**<!-- Slideshow container -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100 h-50" src="{% static 'images/IMG_1972.JPG' %}" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100 h-50" src="{% static 'images/IMG_1972.JPG' %}" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100 h-50" src="{% static 'images/IMG_1972.JPG' %}" alt="First slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>**
If you want to get more control over images, you have to save images in the model. Then you can iterate through your images through the loop as many times as you want.
<div class="carousel-inner">
{% for i in your_view_context %}
<div class="item">
<img src="{{i.image.url}}" alt="Chania" height="600" width="100%">
</div>
{% endfor %}
</div>
Your model will be:
class ImageModel(models.MODEL):
image = models.ImageField(blank = False, null = False)
Your view will be:
def myview(request):
queryset = ImageModel.objects.all()
context = {
your_view_context = queryset
}
return render(request, 'template.html' , context)
Related
i also want it in col-md-6 size with some pleasing slideshow effect.
i could not display image or show item fetched from database.
I was unable to figure out how to dynamically create 1 item so I added 3 variables of each (image1,image2,image3,etc.)
i dont want form than 10 images in my carousel
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
{% for object in obj %}
<div class="carousel-item {% if forloop.counter0 == 0 %} active {% endif %}">
<img class="d-block w-100" src="{{ object.image.url }}" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>{{ object.title }}</h5>
<p>{{ object.sub_title }}</p>
</div>
{% endfor %}
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
I have an error in my template. I have tried to see where I've gone wrong, but couldn't identify the bug.
This is index.1.html:
{% extends 'clinic/clinicbase.html' %}
{% load static %}
{% block content %}
{% if username %}
<div class="jumbotron">
<div class="container">
<h3>Welcome, Dr {{ name }}</h3>
<p>You can manage your clinics here:</p>
<p><a class="btn btn-primary btn-sm" href="#" role="button">Learn more ยป</a></p>
</div>
</div>
{% if nodoc}
{% if clinics %}
{% for clinic in clinics %}
<div class="col-sm-8 card-deck">
<div class="card mb-3 mr-3 ml-3 shadow bg-white rounded">
<div class="card-body">
<div id="id" style="display: none;">{{ clinic.clinicid }} </div>
<h2 class="card-title">
{{ clinic.name}}
</a>
</h2>
<h6 class="card-subtitle mb-2 text-muted">Label: {{ clinic.label }}</h6>
<p class="card-text">Phone: {{ clinic.mobile }}</p>
<p class="card-text">About Clinic: {{ clinic.about }}</p>
<p class="card-text">Website: {{ clinic.website }}</p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/appointments/doctor/edit/{{ doc.docid }}" class="btn btn-primary mr-1 mybtndocedit" data-id="{{ doc.docid }}">
<i class="fas fa-user-edit"></i>
</a>
<a href="/appointments/doctor/appointments/{{ doc.docid }}" class="btn btn-primary mr-1 mybtnviewapp"
data-id="{{ doc.docid }}">
<i class="fas fa-calendar"></i>
</a>
<a href="/appointments/doctor/appointment/add/{{ doc.docid }}" class="btn btn-primary mr-1 mybtnaddapp"
data-id="{{ doc.docid }}">
<i class="fas fa-calendar-plus"></i>
</a>
<a href="/appointments/doctor/remove/{{ doc.docid }}" class="btn btn-danger mr-1 mybtndel" data-id="{{ doc.docid }}">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</div>
</div>
</div>
{% endfor %}
{% else %}
<div class="alert alert-danger" role="alert">
You are not a member of any clinic. If you are an administrator, you can add yourself to a clinic here.
</div>
{% endif %}
{% else %}
<div class="alert alert-danger" role="alert">
You are not registered as a doctor in the system. Please contact Support..
</div>
{% endif %}
{% else %}
<div class="container bg-light">
<p>You are not authorized. Please login.</p>
{% endif %}
</div>
{% endblock %}
This is clinic/clinicbase.html:
{% load static %}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{% include "clinic/common_css.html" %}
{% block cssblock %}
{% endblock %}
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<div id="navbar">
{% block navbar %}
{% include "clinic/topbar.html" with screen="newappointment" %}
{% endblock %}
</div>
<nav aria-label="breadcrumb">
<ol id="breadcrumb" class="breadcrumb">
{% block breadcrumb %}{% endblock %}
</ol>
</nav>
{% block content %}
{% endblock %}
{% include "clinic/common_js.html" %}
{% block jsblock %}
{% endblock %}
</body>
</html>
clinic/topbar.html:
<header>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
<a class="navbar-brand" href="/"><i class="fas fa-plus"></i> Mysite</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-user-md"></i> Clinic
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/clinic/"><i class="fas fa-car"></i> Waiting Patients</a>
<a class="dropdown-item" href="/clinic/seen" id="BtnPatientsSeen"><i class="fas fa-check-square"></i>
Seen Patients</a>
<a class="dropdown-item" href="/clinic/newclinic" id="AddNewClinic"><i class="fas fa-check-square"></i>
Add new clinic</a>
<a class="dropdown-item" href="/clinic/clinics" id="ListClinics"><i class="fas fa-check-square"></i>
Show Clinics</a>
<a class="dropdown-item" href="/clinic/permissions" id="SetPermissions"><i class="fas fa-check-square"></i>
Set mapping and permissions</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-address-book"></i> Registration
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/clinic/register" id="registration"><i class="fas fa-clipboard"></i>
Register Patient</a>
<a class="dropdown-item" href="/clinic/checkin"><i class="fas fa-clipboard-check"></i> Checkin Patient</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" id="listRegistered" href="#"><i class="fas fa-list"></i> List Registered
Patients</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/appointments/getappointment" id="appointment"><i class="fas fa-calendar-plus"></i> Appointments
</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Welcome, {{ user.get_username }}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{% url 'logout'%}?next={{request.path}}"><i class="fas fa-sign-out-alt"></i>
Logout</a>
<a class="dropdown-item" href="/clinic/myprofile"><i class="fas fa-user-alt"></i> My Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/appointments/myappointments"><i class="fas fa-calendar"></i> My Appointments</a>
</div>
</li>
{% else %}
<li class="nav-item active">
<a class="nav-link" href="{% url 'login'%}?next={{request.path}}"><i class="fas fa-key"></i> Login
</a>
</li>
{% endif %}
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
clinic/common_css.html:
{% load static %}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{% static 'clinic/css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/datepicker.0.6.5.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/fontawesome.5.2.0.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/jquery-ui/jquery-ui.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/jquery-ui/jquery-ui.structure.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/jquery-ui/jquery-ui.theme.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/fullcalendar.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/calcustomcolors.css' %}?dev={{ rnd_num }}">
<link rel="stylesheet" href="{% static 'appointments/propellor/typography.css' %}">
<link rel="stylesheet" href="{% static 'appointments/propellor/materialicons.css' %}">
<link rel="stylesheet" href="{% static 'appointments/propellor/button.css' %}">
<link rel="stylesheet" href="{% static 'appointments/propellor/floating-action-button.css' %}">
<link rel="stylesheet" href="{% static 'appointments/propellor/google-icons.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/mytheme.css' %}">
clinic/common_js.html:
{% load static %}
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="{% static 'appointments/js/jquery-3.3.1.min.js' %}"></script>
<script src="{% static 'appointments/js/jquery-ui/jquery-ui.js' %}?dev={{ rnd_num }}"></script>
<script src="{% static 'appointments/js/popper.min.js' %}"></script>
<script src="{% static 'appointments/js/bootstrap.min.js' %}"></script>
<script src="{% static 'appointments/js/notify.0.4.2.js' %}"></script>
<script src="{% static 'appointments/js/datepicker.0.6.5.js' %}"></script>
<script src="{% static 'appointments/lib/moment.min.js' %}"></script>
<script src="{% static 'appointments/js/fullcalendar.js' %}"></script>
<script src="{% static 'appointments/js/search.js' %}?dev={{ rnd_num }}"></script>
<script src="{% static 'appointments/js/appointment.js' %}?dev={{ rnd_num }}"></script>
The error I get is:
In template /home/joel/myappointments/appointments/templates/clinic/index.1.html, error at line 60
Invalid block tag on line 60: 'else', expected 'endblock'. Did you forget to register or load this tag?
Is there an obvious bug in the template?
{% if nodoc} on line 12 - you're missing a %, this line should be {% if nodoc %}.
I want my main content and Sidewidget in the same row. With my knowledge of bootstrap grid, I tried to make this work but the sidewidget is stacking below the content and not in the sides. Here is the required snippets.
body.html
<!-- Navigation -->
{% include 'nav.html' %}
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 ">
{% block content %}
{% endblock %}
</div>
<div class="col-lg-4">
{% block sidewidget %}
{% endblock %}
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'js/tinymce/tinymce.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/tinymce/custom.js' %}" ></script>
nav.html
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'add' %}">Add Article</a>
</li>
{% endif %}
</ul>
</div>
</div>
My {% block content %}
{% for post in posts %}
<h2 class="mt-4">{{post.title}}</h2>
<!-- Author -->
<p class="lead">
by
{{post.author}}
</p>
<hr>
<!-- Date/Time -->
<p class="lead">Published on <b>{{post.published_date}}</b></p>
<hr>
<!-- Preview Image -->
<img class="img-fluid" src="{{post.image.url}}" alt="Img Placeholder">
<p>{{post.images}}</p>
{% for tag in post.tags.all %}
<p>{{tag.name}}</p>
{% endfor %}
<hr>
<!-- Post Content -->
<p class="lead">{{post.content|safe|truncatewords:"60"|linebreaks}}</p>
<footer class="entry-footer">
<button class="btn btn-primary">Read More</button>
</footer>
<hr>
{% empty %}
<h1> Nothing to display</h1>
{% endfor %}
{% endblock %}
My {% Sidewidget %} block
<!-- Search Widget -->
<div class="card my-4">
<h5 class="card-header">Search</h5>
<div class="card-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>
<!-- Categories Widget -->
<div class="card my-4">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
Web Design
</li>
<li>
HTML
</li>
<li>
Freebies
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
JavaScript
</li>
<li>
CSS
</li>
<li>
Tutorials
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Side Widget -->
<div class="card my-4">
<h5 class="card-header">Side Widget</h5>
<div class="card-body">
You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers!
</div>
</div>
{% endblock %}
I have tried tweaking but nothing seems to work
I want the page like this:
|*****************************|
|navigationbar |
|*****************************|
|Post1(Col1-Col8) |SIDEWIDGET|
|***** | |
|Post2(Col1-Col8) | |
|***** | |
|PostN(Col1-Col8) | |
|*****************************|
|Footer |
Your code should work. The col-lg-* modifier applies only for screens that are over 1200px wide as per bootstrap's documentation. Maybe you're using a smaller screen and you also need to add the col-sm and col-md modifiers. Please try those and let me know if it works.
<div class="container">
<div class="row">
<div class="col-sm-8 col-lg-8 ">
{% block content %}
{% endblock %}
</div>
<div class="col-sm-4 col-lg-4">
{% block sidewidget %}
{% endblock %}
</div>
</div>
</div>
you can't use a bootstarp grid system for it because the sidewidget is going to take up the column of the whole three rows .You would have to use flex box for it. by using grid system columns can be individually used in different rows but you cannot have a whole column spanning over the different rows .
In the 'nav' section the 'nav' tag is not closed </nav>. close it and try again.
I think that will solve your problem.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'add' %}">Add Article</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
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
Hello I am developing a django cms for my company but running into issues with the navbar in IE8.
using:
-Python 2.7.6
-Django (1, 7, 8, 'final', 0)
-django-cms 3.1.0
-boostrap 3.3.4
here is my template
{% load cms_tags staticfiles sekizai_tags menu_tags %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}This is my new project home page{% endblock title %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
{% render_block "css" %}
</head>
<body style="padding-top:60px">
{% cms_toolbar %}
<div class="container">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{% show_menu 0 1 100 100 "menu.html" %}
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
{% block content %}
{% endblock content %}
</div>
<script src="{% static 'js/jquery.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
{% render_block "js" %}
</body>
</html>
The issue is the navbar is always collapsed regardless of the screen size
I have already had the navbar working in IE + Bootstrap and that template is like so:
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'core:home' %}">
{% load staticfiles %}
<img alt='Bell logo' src="{% static 'core/images/bell_logo.png' %}">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Liens</li>
<li>Tools</li>
<li>Doc</li>
<li>Wiki</li>
<li>Project</li>
<li>CAB</li>
<li>DB</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
I tried adapting my django cms template so it would look like the one I originally had, but no success. What am I doing wrong?
Had to add respond.js to page, but i thought the cms and django would take care of that