I am using Django I am trying to make image slider using bootstrap, this is my code so far
{% extends "blog/modelsbase.html"%}
{% block content%}
<body>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src= "/media/models/dd08-43fc-ae2b-c6bc75ade6f6.jpg" alt="First slide">
</div>
{% for image in images %}
<div class="carousel-item">
<img class="d-block w-100" src= "{{image}}" alt="Second slide">
</div>
{% endfor %}
</div>
<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>
</body>
{% endblock content%}
</html>
this is my views.py
from django.shortcuts import render
import os
images = os.listdir('/media/models/model1')
def test_model_bt(request):
return render(request,'blog/model1.html',{'title':'TEST_MODEL','images':images})
The images are showing correctly,I would like to place the images inside some sort of container to give them max size [800x800] (if they are larger than it reduce size else pass), how can I do it ?
Note:for now my code is "mobile friendly" I would like to keep that
I got my slider from Carousel · Bootstrap
one way you can do it with sorl thumbnail and you can do as follows
{% load thumbnail %}
{% thumbnail image "800x800" crop="center" as im %}
{{ im }}
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 am trying to make a carousel slider. Picture comes from the database and then render it on the frontend slider. But the picture is rendering but it is creating new slider and when i change to next slide then it shows the same picture. What to do??
My code is here...
`{% for post in object_list %}
<h2>{{ post.title }}</h2>
</ul>
<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 src="{{ post.image.url}}" class="d-block w-100" alt="{{ post.title }}">
</div>
<div class="carousel-item">
<img src="{{ post.image.url }}" class="d-block w-100" alt="{{ post.title }}">
</div>
<div class="carousel-item">
<img src="{{ post.image.url }}" class="d-block w-100" alt="{{ post.title }}">
</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 %}
{% endblock %}
`
At some point inside your views.py file you passed a context to your template for rendering, likely looking something like so:
post = ...
return render(request, "template_name", {"post": post})
Being that it is impossible for myself or anyone else to know what post contains, it is not possible for us to tell you exactly how to fix the issue. However, the issue lays in the repetition of this code:
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{{ post.image.url}}" class="d-block w-100" alt="{{ post.title }}">
</div>
<div class="carousel-item">
<img src="{{ post.image.url }}" class="d-block w-100" alt="{{ post.title }}">
</div>
<div class="carousel-item">
<img src="{{ post.image.url }}" class="d-block w-100" alt="{{ post.title }}">
</div>
</div>
Clearly, you are using the same post.image.url variable for all three carousel-items. Assuming a post object can be multiple images, then something like so should work:
<div class="carousel-inner">
{% for image in post.images %}
<div class="carousel-item active">
<img src="{{ image.url}}" class="d-block w-100" alt="{{ post.title }}">
</div>
{% endfor %}
</div>
I also facing same problem fetching carousel image from databases but it is showing only first image and when i click to next button slider not changing.
So don't warry friends i resolve the problem
First think is in carousel image you can use the code like this using for loop instead copy three image tag
<div class="carousel-inner">
<div class="carousel-item {% if forloop.first %} active {% endif %}">
<img src="{{ post.image.url}}" class="d-block w-100" alt="{{ post.title }}">
</div>
<div class="carousel-item">
<img src="{{ post.image.url }}" class="d-block w-100" alt="{{ post.title }}">
</div>
<div class="carousel-item">
<img src="{{ post.image.url }}" class="d-block w-100" alt="{{ post.title }}">
</div>
</div>
In this code i only chane in the carousel, your problem is your slider not changing ,so do this changes definitely your skider will work.
<div class="carousel-inner">
<div class="carousel-item {% if forloop.first %} active {% endif %}">
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 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>
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>