I am making a news website and i have made a model of an image, title, description,url(for clickable image), but the final output is not just showing up and there is no error .
Please also look into image links I have attached The output Screenshot and The admin Page screenshot
Main Code
{% load static %}
{% block content %}
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>World Vision</title>
<!-- plugin css for this page -->
<link
rel="stylesheet"
href="{% static 'techworld/assets/vendors/mdi/css/materialdesignicons.min.css' %}"
/>
<link rel="stylesheet" href="{% static 'techworld/assets/vendors/aos/dist/aos.css/aos.css' %}" />
<link
rel="stylesheet"
href="{% static 'techworld/assets/vendors/owl.carousel/dist/assets/owl.carousel.min.css' %}"
/>
<link
rel="stylesheet"
href="{% static 'techworld/assets/vendors/owl.carousel/dist/assets/owl.theme.default.min.css' %}"
/>
<!-- End plugin css for this page -->
<link rel="shortcut icon" href="{% static 'techworld/assets/images/favicon.png' %}" />
<!-- inject:css -->
<link rel="stylesheet" href="{% static 'techworld/assets/css/style.css' %}">
<!-- endinject -->
<!-- Bootstrap -->
<link href="{% static 'techworld/box/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'techworld/box/ionicons/css/ionicons.min.css' %}" rel="stylesheet">
<!-- main css -->
<link href="{% static 'techworld/box/css/style.css' %}" rel="stylesheet">
<!-- modernizr -->
<script src="{% static 'techworld/box/js/modernizr.js' %}"></script>
<link
rel="stylesheet"
href="{% static 'techworld/worldtime/assets/vendors/mdi/css/materialdesignicons.min.css' %}"
/>
<link rel="stylesheet" href="{% static 'techworld/worldtime/assets/vendors/aos/dist/aos.css/aos.css' %}" />
<!-- End plugin css for this page -->
<link rel="shortcut icon" href="{% static 'techworld/worldtime/assets/images/favicon.png' %}" />
<!-- inject:css -->
<link rel="stylesheet" href="{% static 'techworld/worldtime/assets/css/style.css' %}">
<!-- endinject -->
<title>Tech-World</title>
</head>
<body>
<!-- Preloader -->
<div id="preloader">
<div class="pre-container">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
</div>
<!-- end Preloader -->
<!-- Intro Slide
<div class="container-fluid">
<section class="box-intro">
<div class="table-sell">
<h1 class="box-headline letters rotate-2">
<span class="box-words-wrapper">
<b class="is-visible">Choose What you Read</b>
<b> To see all the latest talks Scroll down</b>
</span>
</h1>
<h5>More than everything You need</h5>
</div>
<div class="mouse">
<div class="scroll"></div>
</div>
</section>
</div>-->
<!-- End Intro slide -->
<div class="container-fluid">
<!-- box header -->
<!-- end box header -->
<!-- box-intro -->
<section class="box-intro">
<div class="table-cell">
<h1 class="box-headline letters rotate-2">
<span class="box-words-wrapper">
<b class="is-visible">design. mbkm</b>
<b> coding.</b>
<b>graphic.</b>
</span>
</h1>
<h5>We always server more than everythin you need </h5>
</div>
<div class="mouse">
<div class="scroll"></div>
</div>
</section>
<!-- end box-intro -->
</div>
<!-- portfolio div -->
<div class="portfolio-div">
<div class="portfolio">
<div class="no-padding portfolio_container">
<!-- single work -->
<div class="col-md-3 col-sm-6 fashion logo">
<a href="single-project.html" class="portfolio_item">
<img src="{% static 'techworld/img/apple.png' %}" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Latest Talks from Apple</span>
<em>Apple TechWorld</em>
</div>
</div>
</div>
</a>
</div>
<!-- end single work -->
<div class="col-md-3 col-sm-6 ads graphics">
<a href="#" class="portfolio_item">
<img src="{% static 'techworld/img/tablet.png' %}" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Latest Productivity Tablets</span>
<em>Latest Tablets</em>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-6 col-sm-12 photography">
<a href="#" class="portfolio_item">
<img src="{% static 'techworld/img/mobile.jpg' %}" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Its all About SmartPhones</span>
<em>Reviews,Latest news and much more</em>
</div>
</div>
</div>
</a>
</div>
<!-- Single workflow area end -->
<!-- Dual workflow area part 2 -->
<div class="col-md-3 col-sm-6 fashion ads">
<a href="#" class="portfolio_item">
<img src="{% static 'techworld/img/samsung.png' %}" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Empty space</span>
<em>Empty space</em>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-sm-6 graphics ads">
<a href="#" class="portfolio_item">
<img src="{% static 'techworld/img/samsung.png' %}" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Empty space</span>
<em>Empty space</em>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-6 col-sm-12 photography">
<a href="#" class="portfolio_item">
<img src="{% static 'techworld/img/samsung.png' %}" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Empty space</span>
<em>Empty space</em>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-sm-6 graphics ads">
<a href="#" class="portfolio_item">
<img src="{% static 'techworld/img/samsung.png' %}" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Empty space</span>
<em>Empty space</em>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-sm-6 graphics ads">
<a href="#" class="portfolio_item">
<img src="{% static 'techworld/img/samsung.png' %}" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Empty space</span>
<em>Empty space</em>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-sm-6 graphics ads">
<a href="#" class="portfolio_item">
<img src="{% static 'techworld/img/samsung.png' %}" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Empty space</span>
<em>Empty space</em>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-sm-6 graphics ads">
<a href="#" class="portfolio_item">
<img src="{% static 'techworld/img/samsung.png' %}" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Empty space</span>
<em>Empty space</em>
</div>
</div>
</div>
</a>
</div>
</div>
<!-- end portfolio_container -->
</div>
<!-- portfolio -->
</div>
<!-- end portfolio div -->
<br>
<br>
<br>
<div class="container-scroller">
<div class="main-panel">
<!-- partial:partials/_navbar.html -->
<!-- partial -->
<div class="content-wrapper">
<div class="container">
<div class="row" data-aos="fade-up">
{% for AllProject in allprojects %}
<div class="col-xl-8 stretch-card grid-margin">
<div class="position-relative">
{% if AllProject.url %}
<a href="{{ AllProject.url }}"><img
src="{{ AllProject.image.url }}"
alt="banner"
class="img-fluid" />
</a>
{% else %}
<img src="{{ AllProject.image.url }}" alt="banner" class="img-fluid" />
{% endif %}
<div class="banner-content">
<div class="badge badge-danger fs-12 font-weight-bold mb-3">
global news
</div>
<h1 class="mb-0">{{ AllProject.title }}</h1>
<h1 class="mb-2">
{{ AllProject.description }}
</h1>
<div class="fs-12">
<span class="mr-2">Photo </span>10 Minutes ago
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="row" data-aos="fade-up">
<div class="col-lg-3 stretch-card grid-margin">
<div class="card">
<div class="card-body">
<h2>Category</h2>
<ul class="vertical-menu">
<li>Politics</li>
<li>International</li>
<li>Finance</li>
<li>Health care</li>
<li>Technology</li>
<li>Jobs</li>
<li>Media</li>
<li>Administration</li>
<li>Sports</li>
<li>Game</li>
<li>Art</li>
<li>Kids</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-9 stretch-card grid-margin">
<div class="card">
<div class="card-body">
{% for Flash in flashes %}
<div class="row">
<div class="col-sm-4 grid-margin">
<div class="position-relative">
<div class="rotate-img">
{% if Flash.url %}
<a href="{{ Flash.url }}">
<img src="{{ project.image.url }}" alt="thumb" class="img-fluid" />
</a>
{% else %}
<img src="{{ project.image.url }}" alt="thumb" class="img-fluid" />
{% endif %}
</div>
<div class="badge-positioned">
<span class="badge badge-danger font-weight-bold"
>Flash news</span
>
</div>
</div>
</div>
<div class="col-sm-8 grid-margin">
<h2 class="mb-2 font-weight-600">
{{ Flash.title }}
</h2>
<div class="fs-13 mb-2">
<span class="mr-2">Photo </span>10 Minutes ago
</div>
<p class="mb-0">
{{ Flash.description }}
</p>
</div>
</div>
{% endfor %}
{% endblock %}
</div>
</div>
</div>
</div>
Views.py
from django.shortcuts import render
from .models import AllProject
from .models import Flash
def techhome(request):
allprojects = AllProject.objects.all()
return render(request, 'techworld/techhome.html', {'allprojects':allprojects})
def Flashnews(request):
flashes = Flash.objects.all()
return render(request, 'techworld/techhome1.html', {'flashes':flashes})
Models.py
from django.db import models
class AllProject(models.Model):
title = models.CharField(max_length=100)
description = models.CharField(max_length=250)
image = models.ImageField(upload_to='techworld/images/')
url = models.URLField(blank=True)
date = models.DateField(blank=True)
def __str__(self):
return self.title
class Flash(models.Model):
title = models.CharField(max_length=100)
description = models.CharField(max_length=250)
image = models.ImageField(upload_to='techworld/images/')
url = models.URLField(blank=True)
date = models.DateField(blank=True)
def __str__(self):
return self.title
Please also look into image links I have attached The output Screenshot and The admin Page screenshot
You are using both allprojects and flashes in your template, but you pass them in separate views to different templates.
It's not clear (to me, at least) which of these views corresponds to this template. I'm guessing you're trying to use the techhome() view, since you appear to be unable to get the Flash data to appear. You'll need to pass both allprojects and flashes as context to the template so they can be rendered. If, for example, you wish techhome() to display both, you could do the following:
def techhome(request):
allprojects = AllProject.objects.all()
flashes = Flash.objects.all()
context = {'allprojects':allprojects, 'flashes':flashes}
return render(request, 'techworld/techhome.html', context)
Related
hello im having a problem with the index code in my views.py, aparrently the HTML index is out of range for some reason i dont understand, because before i wanted to make the page to add images as avatars work perfectly fine
the index .html is in a templates folder , inside the APP folder, and i created a media folder outside of the APP for storage of media
this is the views.py
from django.http import HttpResponse
from django.shortcuts import render
from django.views.generic import ListView
from django.views.generic.detail import DetailView
from django.views.generic.edit import UpdateView, DeleteView, CreateView
from django.contrib.auth.views import LoginView, LogoutView
from django.contrib.auth.decorators import login_required
from django.contrib.auth.mixins import LoginRequiredMixin
from .forms import PosteoForm, SignUpForm, UserEditForm
from .models import Posteo, Avatar
from django.urls import reverse_lazy
# Create your views here.
def mostrar_index(request):
imagenes = Avatar.objects.filter(user=request.user.id)
return render(request, 'index.html', {'url': imagenes[0].images.url})
def mostrar_gallery(request):
return render(request,'gallery.html')
def mostrar_contact(request):
return render(request,'contact.html')
def cursoPost(request):
return render(request,'Posts.html')
#login_required
def crear_post(request):
if request.method == 'POST':
posteo = PosteoForm(request.POST)
print('posteo')
if posteo.is_valid():
data = posteo.cleaned_data
posteo = Posteo (titulo=data['titulo'], texto=data['texto'])
posteo.save()
return render(request,'index.html')
else:
posteo = PosteoForm()
print('formulario')
return render(request,'Posts.html',{'posteo':posteo})
def buscar_post(request):
return render(request,'buscador.html')
def buscador (request):
if request.GET.get ('titulo', False):
titulo = request.GET ['titulo']
post = Posteo.objects.filter(titulo__icontains=titulo)
return render (request, 'buscador.html',{'post':post})
else:
respuesta = 'no hay datos'
return render (request, 'buscador.html', {'respuesta':respuesta})
class PosteoList(ListView):
model = Posteo
template_name = 'mostrar_post.html'
class PosteoDetail(DetailView):
model = Posteo
template_name = 'posteo_detalle.html'
def base(request):
return render(request,'base.html')
class PosteoDeleteView(LoginRequiredMixin, DeleteView):
model = Posteo
template_name = 'post_confirm_delete.html'
success_url = '/mostrarPost'
class PosteoUpdateView(LoginRequiredMixin, UpdateView):
model = Posteo
template_name = 'modificar_post.html'
success_url = '/mostrarPost'
fields =['titulo', 'subtitulo','texto','nombre', 'email']
class SignUpView(CreateView):
form_class = SignUpForm
success_url = reverse_lazy('index')
template_name = "registro.html"
def editar_usuario(request):
usuario = request.User
if request.method == 'POST':
usuario_form = UserEditForm(request.POST)
if usuario_form.is_valid():
informacion = usuario_form.cleaned_data
usuario.username = informacion['username']
usuario.email = informacion['email']
usuario.password1 = informacion['password1']
usuario.password2 = informacion ['password2']
usuario.save()
return render(request,'inicio.html')
else:
usuario_form = UserEditForm(initial={'username': usuario.username, 'email': usuario.email})
return render(request, 'admin_update.html', {'form': usuario_form, 'usuario': usuario})
class AdminLoginView(LoginView):
template_name = 'login.html'
class AdminLogoutView(LogoutView):
template_name = 'logout.html'
the index.html
<!DOCTYPE html>
<html lang="en">
<head>
{% load static %}
<!-- basic -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- mobile metas -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<!-- site metas -->
<title>Entro</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">
<!-- fevicon -->
<!-- bootstrap css -->
<link rel="stylesheet" href={% static "css/bootstrap.min.css" %}>
<!-- style css -->
<link rel="stylesheet" href={% static "css/style.css" %}>
<!-- Responsive-->
<link rel="stylesheet" href={% static "css/responsive.css" %}>
<!-- Scrollbar Custom CSS -->
<link rel="stylesheet" href={% static "css/jquery.mCustomScrollbar.min.css" %}>
<!-- Tweaks for older IEs-->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
</head>
<!-- body -->
<body class="main-layout">
<!-- loader -->
<div class="loader_bg">
<div class="loader"><img src={% static "images/loading.gif" %} alt="#" /></div>
</div>
<!-- end loader -->
<!-- header -->
<header>
<!-- header inner -->
<div class="header-top">
<div class="header">
<div class="container">
<div class="row">
<div class="col-xl-2 col-lg-2 col-md-2 col-sm-3 col logo_section">
<div class="full">
<div class="center-desk">
<!-- <div class="logo">
<img src={% static "images/logo.png" %} alt="#" />
</div> --> <!-- boton izquierdo de ticket -->
</div>
</div>
</div>
<div class="col-xl-10 col-lg-10 col-md-10 col-sm-9">
<div class="menu-area">
<div class="limit-box">
<nav class="main-menu ">
<ul class="menu-area-main">
<li class="active"> Inicio </li>
<li> Mostrar Posts </li>
<li> Crear Posts </li>
<li> Buscar Posts </li>
<li> Galeria </li>
<li> base </li>
<li> Usuario </li>
<li> <a class="last_manu" href="{% url 'buscar' %}"><img src={% static "images/search_icon.png" %} alt="#" /></a> </li>
{% if request.user.is_authenticated %}
<li> Logout </li>
{% else %}
<li> Login </li>
{% endif %}
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end header inner -->
<!-- end header -->
<section class="slider_section">
<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 active">
<div class="container">
<div class="carousel-caption">
<div class="row">
<div class="col-md-12">
<div class="text-bg">
{% if request.user.is_authenticated %}
<img src="{{url}}" alt="">
<h1>Hola {{user.username}} como te va? </h1>
<p>Si deseas deslogearte haz click aqui! </p>
<li> Logout </li>
{% else %}
<span>La web</span>
<h1>de musica para vos</h1>
<p>Esta es una web diseñada para dejar al alcance de tus manos lo que necesitas para tu musica</p>
<li> Login </li>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container ">
<div class="carousel-caption">
<div class="row">
<div class="col-md-12">
<div class="text-bg">
<span>La web</span>
<h1>de musica para vos</h1>
<p>Haz click en los botones para crear algun posteo o ver los posteos existentes</p>
Crea un post Post Musicales
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="carousel-caption ">
<div class="row">
<div class="col-md-12">
<div class="text-bg">
<span>La web</span>
<h1>de musica para vos</h1>
<p>y algo más..</p>
Crea un post Post Musicales
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<i class="fa fa-long-arrow-left" aria-hidden="true"></i>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</a>
</div>
</section>
</div>
</header>
<!-- about -->
<div id="about" class="about">
<div class="container">
<div class="row display_boxflex">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div class="about-box">
<h2>Acerca de Nosotros</h2>
<p>Somos dos estudiantes del curso de Python de Coder House y este es el blog de presentacion de proyecto final</p>
Leer más
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div class="about-box">
<figure><img src={% static "images/about.png" %} alt="#" /></figure>
</div>
</div>
</div>
</div>
</div>
<!-- end abouts -->
<!-- upcoming -->
<!-- end upcoming -->
{% block codigoDinamico %}
{% endblock %}
<!-- Gallery -->
<!--
<div id="gallery" class="Gallery">
<div class="container">
<div class="row display_boxflex">
<div class="col-xl-8 col-lg-8 col-md-8 col-sm-12">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 margi_bott">
<div class="Gallery_img">
<figure><img src={% static "images/Gallery1.jpg"%} alt="#"/></figure>
</div>
<div class="hover_box">
<ul class="icon_hu">
<h3>Music night</h3>
<li><img src={% static "icon/h.png"%} alt="#"/></li>
<li><img src={% static "icon/h.png"%} alt="#"/></li>
</ul>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 margi_bott">
<div class="Gallery_img">
<figure><img src={% static "images/Gallery2.jpg"%} alt="#"/></figure>
</div>
<div class="hover_box">
<ul class="icon_hu">
<h3>Music night</h3>
<li><img src={% static "icon/h.png"%} alt="#"/></li>
<li><img src={% static "icon/h.png"%} alt="#"/></li>
</ul>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 margi_bott1">
<div class="Gallery_img">
<figure><img src={% static "images/Gallery3.jpg"%} alt="#"/></figure>
</div>
<div class="hover_box">
<ul class="icon_hu">
<h3>Music night</h3>
<li><img src={% static "icon/h.png"%} alt="#"/></li>
<li><img src={% static "icon/h.png"%} alt="#"/></li>
</ul>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div class="Gallery_img">
<figure><img src={% static "images/Gallery4.jpg"%} alt="#"/></figure>
</div>
<div class="hover_box">
<ul class="icon_hu">
<h3>Music night</h3>
<li><img src={% static "icon/h.png"%} alt="#"/></li>
<li><img src={% static "icon/h.png"%} alt="#"/></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="Gallery_text">
<div class="titlepage">
<h2>Gallery</h2>
</div>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to usin</p>
Read More
</div>
</div>
</div>
</div>
</div>
-->
<!-- end Gallery -->
<!-- footer -->
<footr>
<div class="footer ">
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="contact_bg">
<div class="row">
<div class="col-md-12">
<div class="titlepage">
<h2>Contactanos</h2>
</div>
<div class="col-md-12">
<input class="contactus" placeholder="Tu nombre" type="text" name="Your Name">
</div>
<div class="col-md-12">
<input class="contactus" placeholder="Tu Email" type="text" name="Your Email">
</div>
<div class="col-md-12">
<input class="contactus" placeholder="Numero de telefono" type="text" name="Your Phone">
</div>
<div class="col-md-12">
<textarea class="textarea" placeholder="Mensaje" type="text" name="Message"></textarea>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
<button class="send">Enviar</button>
</div>
</div>
</div>
</form>
</div>
<div class="col-md-12 border_top">
<form class="news">
<h3>Newsletter</h3>
<input class="newslatter" placeholder="ENTER YOUR MAIL" type="text" name=" ENTER YOUR MAIL">
<button class="submit">Subscribe</button>
</form>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 ">
<div class="row">
<!-- <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 ">
<div class="address">
<ul class="loca">
<li>
<img src={% static "icon/loc.png" %}alt="#" />Locations
<li>
<img src={% static "icon/call.png"%} alt="#" />+12586954775 </li>
<li>
<img src={% static "icon/email.png"%} alt="#" />demo#gmail.com </li>
</ul>
-->
</div>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 ">
<ul class="social_link">
<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-linkedin-square" aria-hidden="true"></i></li>
<li><i class="fa fa-instagram" aria-hidden="true"></i></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="copyright">
<p>Copyright 2019 All Right Reserved By Free html Templates</p>
</div>
</div>
</div>
</footr>
<!-- end footer -->
<!-- Javascript files-->
<script src={% static "js/jquery.min.js"%}></script>
<script src={% static "js/popper.min.js"%}></script>
<script src={% static "js/bootstrap.bundle.min.js"%}></script>
<script src={% static "js/jquery-3.0.0.min.js"%}></script>
<script src={% static "js/plugin.js"%}></script>
<!-- sidebar -->
<script src={% static "js/jquery.mCustomScrollbar.concat.min.js"%}></script>
<script src={% static "js/custom.js"%}></script>
<script src="https:cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
</body>
</html>
def mostrar_index(request):
imagenes = Avatar.objects.filter(user=request.user.id)
return render(request, 'index.html', {'avatar': imagenes})
{% if request.user.is_authenticated %}
{% if avatar %}
<img src="{{avatar.images.url}}" alt="">
{% else %}
<img src="{% static 'default/image.ext' %}" alt="">
{% endif %}
<h1>Hola {{user.username}} como te va? </h1>
<p>Si deseas deslogearte haz click aqui! </p>
<li> Logout </li>
{% else %}
...
{% endif %}
I am trying to apply bootstrap in my shared html file in a Django project and the dropdown list just won't work I tried everything I could cdn local bootstrap and when I click the dropdown list nothing happens.
Below is the template file:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
<title> {% block title %}{% endblock %} </title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="{% url 'home' %}">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarCollapse" aria-controls="navbarCollapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
{% if user.is_authenticated %}
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="userMenu"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
{{ user.username }}
</a>
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="userMenu">
<a class="dropdown-item"
href="{% url 'upload'%}">Upload</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'logout' %}">
Log Out</a>
</div>
</li>
</ul>
{% else %}
<form class="form-inline ms-auto">
<a href="{% url 'login' %}" class="btn btn-outline-secondary">
Log In</a>
<a href="{% url 'signup' %}" class="btn btn-primary ms-2">
Sign up</a>
</form>
{% endif %}
</div>
</nav>
<div class="container">
{% block content %}
{% endblock content %}
</div>
<script src="{% static 'js/bootstrap.bundle.js'%}"></script>
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>
Use data-bs-toggle='dropdown', refer from boostrap 5.0 docs and make sure that the user is authenticated.
Try this template code:
{% if user.is_authenticated %}
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="userMenu"
data-bs-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
{{ user.username }}
</a>
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="userMenu">
<a class="dropdown-item"
href="#">Upload</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
Log Out</a>
</div>
</li>
</ul>
{% else %}
<form class="form-inline ms-auto">
<a href="#" class="btn btn-outline-secondary text-white">
Log In</a>
<a href="#" class="btn btn-primary ms-2 text-white">
Sign up</a>
</form>
{% endif %}
I've created a dorm in Django:
#forms.py
from django import forms
class ContactForm(forms.Form):
name = forms.CharField()
number = forms.FloatField()
eail_user = forms.EmailField()
and imported in in views.py
#views.py
from django.shortcuts import render
from .models import Cards
from cards.forms import ContactForm
def index(request):
cards = Cards.objects.all()
return render(request,'card.html', {'cards':cards})
def contact(request):
form = ContactForm()
return render(request,'name.html', {'form': form})
I have created three html files, name.html, base.html and card.html. The form is showing up in name.html properly, however, in cards.html, it just shows a single button and it omits {{ form }} tag. Any idea how to solve the issue?
Thanks.
#name.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="/your-name/" method="post">
{% csrf_token %}
{{ form }}
<input type="submit" value="Submit">
</form>
</body>
</html>
This is base.html
#base.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="{% static 'css/stylesheet.css' %}" rel="stylesheet" type="text/css">
<!------ Include the above in your HEAD tag ---------->
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<section id="team" class="pb-5">
<div class="container">
<h5 class="section-title h1">OUR TEAM</h5>
<div class="row">
{% block content %}
{% endblock %}
</div>
</div>
</section>
</body>
</html>
And this is card.html which extends from base.html
#card.html
{% extends 'base.html' %}
{% block content %}
<!-- Team -->
{% for card in cards %}
<!-- Team member -->
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="image-flip" ontouchstart="this.classList.toggle('hover');">
<div class="mainflip">
<div class="frontside">
<div class="card">
<div class="card-body text-center">
<p><img class=" img-fluid"
src="https://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_01.png"
alt="card image"></p>
<h4 class="card-title">{{ card.name }}</h4>
<p class="card-text">{{ card.description }}</p>
<i class="fa fa-plus"></i>
</div>
</div>
</div>
<div class="backside">
<div class="card">
<div class="card-body text-center mt-4">
<h4 class="card-title">{{ card.name }}</h4>
<!--<p class="card-text"> {{ card.back_description }}-->
<form action="/your-name/" method="post">
{% csrf_token %}
{{ form }}
<input type="submit" value="Submit">
</form>
<!--</p> -->
<ul class="list-inline">
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-skype"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-google"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ./Team member -->
{% endfor %}
{% endblock %}
Function index is missing a ContactFrom initialization, that's why it's not showing up. Try this:
def index(request):
cards = Cards.objects.all()
form = ContactForm()
return render(request,'card.html', {'cards':cards, 'form': form})
I have developed my first web app in python Django framework, deployed in pythonanywhere.com web server.
I have already used the latest bootstrap in this app, but it is not responsive properly on a smartphone screen. responsive in laptop and tablet but not in a smartphone.
You can also check it in your phone "http://sandeepbhatt.pythonanywhere.com/".
please look into my base.html and index.html code, where is the problem, also please let me know if there are any details required to figure out this problem which is not mention in this post.
My base.html code:
<!DOCTYPE html>
{% load static %}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<title>PIV</title>
<!-- <link rel="stylesheet" href="{% static "css/index.css" %}"> -->
</head>
<body>
<!-- <style>
body{ background: url("{% static "images/background.jpg" %}"); background-size: cover; background-repeat: no-repeat;}
</style> -->
<!-- Navbar start from here -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- <a class="navbar-brand" href="">Navbar</a> -->
<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="{% url 'index' %}">
<img src="{% static " images/logo.jpg" %}" width="70" height="50" alt="">
</a>
</nav>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'logout' %}">Logout</a>
</li>
{% else %}
<!-- <li class="nav-item">
<a class="nav-link" href="{% url 'survey_app:user_login'%}">Login</a>
</li> -->
{% endif %}
<li class="nav-item">
<a class="nav-link" href="{% url 'survey_app:analysis' %}">Analysis</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'survey_app:tracking' %}">Tracking</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'admin:index' %}">Admin</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'survey_app:register' %}">Register</a>
</li>
</ul>
</div>
</nav>
</body>
<div class="container">
{% block contant %}
{% endblock %}
</div>
<!-- footer -->
<div class="card text-center">
<div class="card-footer text-muted">
Powered By <small>Political India Venture</small>
©2019
</div>
</div>
</html>
My index.html code:
<!DOCTYPE html>
{% extends 'survey_app/base.html' %}
{% load static %}
{% block contant %}
<head>
<link rel="stylesheet" href="{% static " css/login_form.css" %}">
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> -->
</head>
<!-- <style>
body{ background: url("{% static "images/background.jpg" %}"); background-size: cover; background-repeat: no-repeat;}
</style> -->
<div class="row">
<div class="col">
<h2>Welcome to Political India Venture </h2>
<h2>Survey App!</h2>
<h5 class="font-italic<div class=" row">
<h5>Get the answers you need</h5>
<div class="wrapper">
<form method="POST" class="form-signin" action="{% url " survey_app:user_login" %}">
{% csrf_token %}
{# A more "HTML" way of creating the login form#}
<h2 class="form-signin-heading">Please login</h2>
<input type="text" class="form-control" name="username" placeholder="User Name" required="" autofocus="" />
<input type="password" class="form-control" name="password" placeholder="Password" required="" />
<label class="checkbox">
<input type="checkbox" value="remember-me" id="rememberMe" name="rememberMe"> Remember me
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
</form>
</div>
</div>
</div>
{% endblock %}
I found the solution after number of testing in my app and found there was only one bootstrap tag missing.
I just add this in my base.html file:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
and now it is proper responsive on every device.
Your template is broken, look at <h5> class-"font-italic there is no closure (in index.html)
I'm working on a project using Django(1.11) in which I have created a base.html template in which I have defined all the universal HTML code of my project like required CSS and js files.
But when I extend this template in my child templates it only loads the base template not the content of child template.
Here's what I have tried:
base.html:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- Favicons -->
<link rel="apple-touch-icon" href="{% static 'images/kit/free/apple-icon.png' %}"/>
<link rel="apple-touch-icon" href="{% static 'images/kit/free/favicon.png' %}"/>
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"/>
<link rel="stylesheet" href="{% static 'css/material-kit.css' %}">
{% block title %}
<title> Docrest Web Gui </title>
{% endblock %}
</head>
<body class="signup-page">
<nav class="navbar navbar-color-on-scroll navbar-transparent fixed-top navbar-expand-lg " color-on-scroll="100" id="sectionsNav">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand" href="#">Docrest Gui </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="dropdown nav-item">
<a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
<i class="material-icons">apps</i> Components
</a>
<div class="dropdown-menu dropdown-with-icons">
<a href="#" class="dropdown-item">
<i class="material-icons">layers</i> All Components
</a>
<a href="http://demos.creative-tim.com/material-kit/docs/2.0/getting-started/introduction.html" class="dropdown-item">
<i class="material-icons">content_paste</i> Documentation
</a>
</div>
</li>
{% if not user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'users:login' %}">
<i class="material-icons">exit_to_app</i> Login
</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="tooltip" title="" data-placement="bottom" href="{% url 'users:signup' %}" target="_blank" data-original-title="Register to Deploy code!">
<i class="material-icons">settings_input_hdmi</i> Signup
</a>
</li>
{% endif %}
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" rel="tooltip" title="" data-placement="bottom" href="{% url 'users:signup' %}" target="_blank" data-original-title="Register to Deploy code!">
<i class="material-icons">settings_input_hdmi</i> Dashboard
</a>
</li>
{% endif %}
<li class="nav-item">
<a class="nav-link" rel="tooltip" title="" data-placement="bottom" href="https://www.facebook.com/CreativeTim" target="_blank" data-original-title="Like us on Facebook">
<i class="fa fa-facebook-square"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="tooltip" title="" data-placement="bottom" href="https://www.instagram.com/CreativeTimOfficial" target="_blank" data-original-title="Follow us on Instagram">
<i class="fa fa-instagram"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="page-header header-filter" data-parallax="true" style=" background-image: url('../assets/img/kit/profile_city.jpg'); ">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1 class="title">Your Story Starts With Us.</h1>
<h4>Every landing page needs a small description after the big bold title, that's why we added this text here. Add here all the information that can make you or your product create the first impression.</h4>
<br>
</div>
</div>
</div>
</div>
{% block content %}
{% endblock %}
{% block js %}
<!-- Core JS Files -->
<script src="{% static 'js/core/jquery.min.js' %}"></script>
<script src="{% static 'js/core/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap-material-design.min.js' %}"></script>
<!-- Plugin for Date Time Picker and Full Calendar Plugin -->
<script src="{% static 'js/plugins/moment.min.js' %}"></script>
<!-- Plugin for the Datepicker, full documentation here: https://github.com/Eonasdan/bootstrap-datetimepicker -->
<script src="{% static 'js/plugins/bootstrap-datetimepicker.min.js' %}"></script>
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src="{% static 'js/plugins/nouislider.min.js' %}"></script>
<!-- Material Kit Core initialisations of plugins and Bootstrap Material Design Library -->
<script src="{% static 'js/material-kit.js' %}"></script>
{% endblock %}
</body>
Here's an example child template signup.html:
{% extends 'base.html' %}
{% block title %}
<title> Signup </title>
{% endblock %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-md-10 ml-auto mr-auto">
<div class="card card-signup">
<h2 class="card-title text-center">Register</h2>
<div class="card-body">
<div class="row">
<div class="col-md-5 ml-auto">
<div class="info info-horizontal">
<div class="icon icon-rose">
<i class="material-icons">timeline</i>
</div>
<div class="description">
<h4 class="info-title">Marketing</h4>
<p class="description">
We've created the marketing campaign of the website. It was a very
interesting collaboration.
</p>
</div>
</div>
<div class="info info-horizontal">
<div class="icon icon-primary">
<i class="material-icons">code</i>
</div>
<div class="description">
<h4 class="info-title">Fully Coded in HTML5</h4>
<p class="description">
We've developed the website with HTML5 and CSS3. The client has access to
the code using GitHub.
</p>
</div>
</div>
<div class="info info-horizontal">
<div class="icon icon-info">
<i class="material-icons">group</i>
</div>
<div class="description">
<h4 class="info-title">Built Audience</h4>
<p class="description">
There is also a Fully Customizable CMS Admin Dashboard for this product.
</p>
</div>
</div>
</div>
<div class="col-md-5 mr-auto">
<div class="social text-center">
<button class="btn btn-just-icon btn-round btn-twitter">
<i class="fa fa-twitter"></i>
</button>
<button class="btn btn-just-icon btn-round btn-dribbble">
<i class="fa fa-dribbble"></i>
</button>
<button class="btn btn-just-icon btn-round btn-facebook">
<i class="fa fa-facebook"> </i>
</button>
<h4> or be classical </h4>
</div>
<form class="form" method="" action="">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="material-icons">face</i>
</span>
</div>
<input type="text" class="form-control" placeholder="First Name...">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="material-icons">mail</i>
</span>
</div>
<input type="text" class="form-control" placeholder="Email...">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="material-icons">lock_outline</i>
</span>
</div>
<input type="password" placeholder="Password..." class="form-control"/>
</div>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" checked>
<span class="form-check-sign">
<span class="check"></span>
</span>
I agree to the
terms and conditions.
</label>
</div>
<div class="text-center">
Get Started
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
and here are the settings for Templates:
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',
],
},
},
]
Here's how this template is rendered:
class SignUpView(generic.CreateView):
form_class = forms.SignUpForm
template_name = 'users/signup.html'
success_url = reverse_lazy('users:login')
form_valid_message = 'User has been created successfully!'
form_invalid_message = 'Something wrong'
The child template is rendered from a default login view of Django auth, but it only displays the content of the base template, the child template's contents why not loading?
I already have taken a look at all of related question but couldn't find any solution.
I don't think the templating language will like:
{% block head %}
{% block title %} {% endblock %}
{% endblock %}
Try replacing it with the following in both files.
{% block title %} {% endblock %}
Also, you shouldn't need {% load staticfile %} if you have {% load static %}