I want to display my featured products in a single slide.But this code is displaying three different slides.How can i make it possible
base.html
{% for product in featured_products %}
<div class="col-lg-9">
<div id="carouselExampleIndicators" class="carousel slide my-4" 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" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="/media/{{product.image}}" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="/media/{{product.image}}" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="/media/{{product.image}}" alt="Third 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>
{% endfor %}
views.py
def homepage(request):
categories = Category.objects.filter(active=True)
products = list(Product.objects.filter(active=True).order_by('-created'))
featured_products = Product.objects.filter(featured=True)
return render(request,'shop/base.html',{'categories':categories,'product':products,'featured_products':featured_products})
just edit html as below
<div class="col-lg-9">
<div id="carouselExampleIndicators" class="carousel slide my-4" data-ride="carousel">
<ol class="carousel-indicators">
{% for product in featured_products %}
<li data-target="#carouselExampleIndicators" data-slide-to="{{ forloop.counter }}" {% if forloop.counter == 1 %}class="active"{% endif %}></li>
{% endfor %}
</ol>
<div class="carousel-inner" role="listbox">
{% for product in featured_products %}
<div class="carousel-item {%if forloop.counter == 1 %}active{%endif%}">
<img class="d-block img-fluid" src="/media/{{product.image}}" alt="First slide">
</div>
{% endfor %}
</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>
You create 3 different slide because your for loop in wrong place. You should change to like this.
<div class="col-lg-9">
<div id="carouselExampleIndicators" class="carousel slide my-4" data-ride="carousel">
<ol class="carousel-indicators">
{% for product in featured_products %}
<li data-target="#carouselExampleIndicators" data-slide-to="{{forloop.counter}}" class="active"></li>
{% endfor %}
</ol>
<div class="carousel-inner" role="listbox">
{% for product in featured_products %}
{% if forloop.first %}
<div class="carousel-item active">
{% else %}
<div class="carousel-item">
{% endif %}
<img class="d-block img-fluid" src="/media/{{product.image}}" alt="First slide">
</div>
{% endfor %}
</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>
You are looping over the whole div, so it gives the output to you like so, try pasting the code below and see how it looks.
<div class="col-lg-9">
<div id="carouselExampleIndicators" class="carousel slide my-4" data-ride="carousel">
<ol class="carousel-indicators">
{% for product in featured_products %}
<li data-target="#carouselExampleIndicators" data-slide-to="{{ forloop.counter }}" {% if forloop.counter == 1 %}class="active"{% endif %}></li>
{% endfor %}
</ol>
<div class="carousel-inner" role="listbox">
{% for product in featured_products %}
<div class="carousel-item active">
<img class="d-block img-fluid" src="/media/{{product.image}}" alt="First slide">
</div>
{% endfor %}
</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>
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>
"127.0.0.1:8000/adminpanel/edit_gallary/29"
So this is the main problem when I first edit it works properly. But when I want to edit the second time URL automatically changes & it changes this way.
"127.0.0.1:8000/adminpanel/edit_gallary/edit_gallary/29"
This is my views.py file:
def edit_gallary(request,gallaryid):
table = gallary.objects.get(id=gallaryid)
gallary_form = gallaryform(instance=table)
if request.method=='POST':
form = gallaryform(data=request.POST, files=request.FILES, instance=table)
if form.is_valid():
form.save()
table=gallary.objects.all()
return render(request,"gallary1.html",{'table':table})
context = {'gallary_form':gallary_form}
return render(request,'edit_gallary.html',context)
This is my URLS.py file:
path('edit_gallary/<int:gallaryid>',views.edit_gallary,name="edit gallery"),
This is my edit_gallary.html file:
{% extends 'index.html' %}
{% block content %}
<body>
<div class="main-wrapper">
<div class="app" id="app">
<header class="header">
<div class="header-block header-block-collapse d-lg-none d-xl-none">
<button class="collapse-btn" id="sidebar-collapse-btn">
<i class="fa fa-bars"></i>
</button>
</div>
<div class="header-block header-block-nav">
<ul class="nav-profile">
<li class="profile dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
aria-haspopup="true" aria-expanded="false">
<div class="img"
style="background-image: url('https://avatars3.githubusercontent.com/u/3959008?v=3&s=40')">
</div>
<span class="name">Admin</span>
</a>
<div class="dropdown-menu profile-dropdown-menu" aria-labelledby="dropdownMenu1">
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i class="fa fa-power-off icon"></i> Logout </a>
</div>
</li>
</ul>
</div>
</header>
<aside class="sidebar">
<div class="sidebar-container">
<div class="sidebar-header">
<div class="brand">
<div class="logo">
<span class="l l1"></span>
<span class="l l2"></span>
<span class="l l3"></span>
<span class="l l4"></span>
<span class="l l5"></span>
</div> Compare school
</div>
</div>
<nav class="menu">
<ul class="sidebar-menu metismenu" id="sidebar-menu">
<li>
<a href="insert_school">
<i class="fa fa-home"></i>Back</a>
</li>
</ul>
</nav>
</div>
</aside>
<div class="sidebar-overlay" id="sidebar-overlay"></div>
<div class="sidebar-mobile-menu-handle" id="sidebar-mobile-menu-handle"></div>
<div class="mobile-menu-handle"></div>
<article class="content responsive-tables-page">
<div class="title-block">
<h1 class="title">Gallary</h1>
<p class="title-description"></p>
</div>
<section class="section">
<div class="row">
<div class="table-responsive">
<form action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
<table class="table table-striped table-bordered">
{{ gallary_form }}
<tr>
<td class="text-right mb-3">
<input type="submit" value="register" class="btn btn-primary" >
</td>
</tr>
</table>
</form>
</div>
</div>
</section>
</article>
</div>
</div>
<script src="js/vendor.js"></script>
<script src="js/app.js"></script>
{% endblock %}
</body>
It seems you need to change 'edit_gallary/<int:gallaryid>' to '<int:gallaryid>/edit_gallary/' in urls.py or just try adding a slash to the route end in your path
How can I render heading, text, image in my carousel_block.html template. I can't access these. Here is my code.
My custom block
class CarouselBlock(blocks.StreamBlock):
carousel_items = blocks.StructBlock([
('heading', blocks.CharBlock(label='Nadpis', max_length=128)),
('text', blocks.CharBlock(label='Text')),
('image', ImageChooserBlock(label='Obrázek')),
])
class Meta:
template = 'cms/blocks/carousel_block.html'
This is my html template, where I want to render heading, text and image
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
{% for carousel_items in self.carousel_items %}
{% image carousel_items.value.image max-1920x1080 as image_1920 %}
<div class="carousel-item {% if forloop.first %}active{% endif %} ">
<section class="banner-area" id="home" style="background-image: url({{ image_1920.url }})">
<div class="container">
<div class="row justify-content-start align-items-center">
<div class="col-lg-6 col-md-12 banner-left">
<h1 class="text-white">
{{ carousel_items.value.heading }}
</h1>
<p class="mx-auto text-white mt-20 mb-40">
{{ carousel_items.value.text }}
</p>
</div>
</div>
</div>
</section>
</div>
{% endfor %}
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
The line
{% for carousel_items in self.carousel_items %}
should be:
{% for carousel_items in self %}
(although I'd suggest calling the variable carousel_item instead of carousel_items, since it refers to a single item in the stream.)
Within the cms/blocks/carousel_block.html template, self refers to the StreamBlock value - this is a list-like object, not a dictionary, so it doesn't have a carousel_items property. When you loop over it, you'll get a sequence of block objects which have a block_type (which will always be 'carousel_items' in your case, as there's only one available block type here) and a value.
I am trying to add bootstrap carousel to my home page in django app it is not changing slide.
templates/posts/index.html
{% extends "posts/base.html" %}
{% block content %}
<div class="container pt-3 mh-50">
<div class="bd-example">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
{% for fpost in featured_post %}
{% if forloop.counter == 1 %}
<div class="carousel-item active">
{% else %}
<div class="carousel-item">
{% endif %}
<img src="{{fpost.thumbnail.url}}" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>{{fpost.title}}</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
{% endfor %}
</div>
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
views.py
def index(request):
featured = Post.objects.filter(featured = True) #put this on carousel
latest_post = Post.objects.order_by('-timestamp')[:6]
startup_post = Post.objects.filter(category__title__iexact='startup')[0:3]
opinion_post = Post.objects.filter(category__title__iexact='opinion')[0:3]
# add a video field here
context = {
'featured_post': featured,
'latest_post': latest_post,
'startup_post': startup_post,
'opinion_post': opinion_post
}
return render(request, 'posts/index.html', context)
I am trying to render post with featured post true on carousel. It is giving me just static picture without any slideshow.
Try this...Also don't forget to include bootstrap styles.
And also could you tell me why are you using block {% if ...%}? It is useless in you example.
{% extends "posts/base.html" %}
{% block content %}
<div class="container mt-5">
<div class="bd-example">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
{% for fpost in featured_post %}
<div class="carousel-item active">
<img src="{{fpost.thumbnail.url}}" class="d-block img-responsive" height="650px !important" width="100%">
<div class="carousel-caption d-none d-md-block">
<h5>{{fpost.title}}</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
{% endfor %}
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
{% endblock %}
Call the carousel over javascript (add this inside your html):
<script>
$('.carousel').carousel()
</script>
I am pulling the products from database and trying to display them in multiple frames/items of carousel on a screen rather than a single item using for loop.
This is what my carousel looks like at present, as you will notice only one item is displayed, but i want it to display 4 items at one slide and next four on clicking arrow button and so on.
click here to see my carousel image.
my Django code looks like this--
<div id="recommended-item-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
{% for prod in pro %}
<div class="item{% if forloop.first %} active{% endif %}">
<div class="col-sm-3">
<div class="product-image-wrapper1">
<div class="single-products">
<div class="productinfo text-center">
<!--sample image, same for all--><img src="{% static 'header/images/home/2508__14291.1437672247.200.200.jpg' %}" alt="" />
<h2>{{prod.productname}}</h2>
<p>{{prod.producttype}}</p>
<i class="fa fa-shopping-cart"></i>Add to cart
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<a class="left recommended-item-control" href="#recommended-item-carousel" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a class="right recommended-item-control" href="#recommended-item-carousel" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
</div>
Try to do something like this:
<div id="recommended-item-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
{% for prod in pro %}
<div class="col-sm-3">
<div class="product-image-wrapper1">
<div class="single-products">
<div class="productinfo text-center">
<!--sample image, same for all--><img src="{% static 'header/images/home/2508__14291.1437672247.200.200.jpg' %}" alt="" />
<h2>{{prod.productname}}</h2>
<p>{{prod.producttype}}</p>
<i class="fa fa-shopping-cart"></i>Add to cart
</div>
</div>
</div>
</div>
{% if forloop.counter|divisibleby:4 and not forloop.last %}
</div>
<div class="item">
{% endif %}
{% endfor %}
</div>
</div>
<a class="left recommended-item-control" href="#recommended-item-carousel" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a class="right recommended-item-control" href="#recommended-item-carousel" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>