My code it's displaying image but not changing the image in the bootstrap carousel when I click the button to pass
{% if variation.extravariationproductpicture_set.all %}
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
{% for picture in variation.extravariationproductpicture_set.all %}
<div class="carousel-item {% if forloop.first %} active {% endif %}">
<img class="d-block w-100" src="{{picture.image.url}}" alt="First 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>
{% endif %}
Related
I don't know why but my code doesn't work, I don't know where the problem is. Please help, my product doesn't appear on the template although I have saved products in the database
{% for product in products %}
<div class="col-md-6 col-lg-3 ftco-animate">
<div class="product">
{% if product.ImgProduct %}
<a href="#" class="img-prod"><img class="img-fluid" src="{{ product.ImgProduct.url }}" alt="ColorlibTemplate">
<div class="overlay"></div>
</a>
{% endif %}
<div class="text py-3 pb-4 px-3 text-center">
<h3>{{ product.product_name }}</h3>
<div class="d-flex">
<div class="pricing">
<p class="price"><span>{{ product.product_price }}</span></p>
</div>
</div>
<div class="bottom-area d-flex px-3">
<div class="m-auto d-flex">
<a href="#" class="add-to-cart d-flex justify-content-center align-items-center text-center">
<span><i class="ion-ios-menu"></i></span>
</a>
<a href="#" class="buy-now d-flex justify-content-center align-items-center mx-1">
<span><i class="ion-ios-cart"></i></span>
</a>
<a href="#" class="heart d-flex justify-content-center align-items-center ">
<span><i class="ion-ios-heart"></i></span>
</a>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
So I am developing a website and for the life of me I can't figure out how to align the description, price, stock and add cart button in multiple versions of the same <div>. I know it is to do with the size of the image I am using but I'm not sure how to fix this.
Here is a diagram of how I want it to look:
But when I apply a 'h-100' class to the card <div> this is what happens:
I want the images to keep their positions but for the descriptions, add cart button and price/stock to all be horizontally aligned, as well as the height of the overall cards to be the same.
Here is my Django template code:
{% extends 'base.html' %}
{% block content %}
<div class="container-fluid">
<div class="jumbotron">
<h2>Welcome to MyTea</h4>
<p>Here we have teas of all varieties from all around the globe</p>
</div>
<div class="row">
<div class="col-sm-3">
<h4>Categories</h4>
<ul class="list-group">
All Categories
{% for c in countcat %}
<a href="{{ c.get_absolute_url }}" class="list-group-item catheight">{{c.name}}
<span class="badge badge-light">{{c.num_products}}</span>
</a>
{% endfor %}
</ul>
</div>
<div class="col-sm-9">
{% for product in products %}
{% if forloop.first %}<div class="row">{% endif %}
<div class="col-sm-6">
<div class="card border-primary mt-3 h-100">
<div class="card-header"><h3>{{product.name}}</h3></div>
<div class="card-body">
{% if product.image %}
<div class="h">
<img src="{{product.image.url}}" class="img-fluid">
</div>
{% endif %}
<p class="bg-light font-weight-light ">{{product.description}}</p>
{% if product.stock > 0 %}
<a href="{% url 'add_cart' product.id %}" type="button" class="btn btn-primary btn-sm mb-2">
<p class="m-0">Add to cart</p>
</a>
{% else %}
<a href="#" type="button "class="btn btn-danger btn-sm mb-2">
<p class="m-0">Out of stock</p>
</a>
{% endif %}
<div class="card-footer">
<p>Price: €{{product.price}}</p>
<p>Stock left: {{product.stock}}</p>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% endblock content %}
Thanks for any help
The code can be corrected with a simple re-alignment of the content inside .card and correctly closing </div> statements.
Remove {% if forloop.first %}<div class="row">{% endif %} statement and place <div class="row"> above the for loop.
Add to cart and Out of stock buttons should be placed inside .card-footer and .card-body should be closed appropriately. This will leave the image and description within .card-body
Make sure h-100 class is added to `.card'.
Might I suggest adding end of div comments to all the div statements. The code is readable better in this way and helps in mitigating missing or misplaced </div> statements.
{% extends 'base.html' %}
{% block content %}
<div class="container-fluid">
<div class="jumbotron">
<h2>Welcome to MyTea</h4>
<p>Here we have teas of all varieties from all around the globe</p>
</div>
<!-- .jumbotron -->
<div class="row">
<div class="col-sm-3">
<h4>Categories</h4>
<ul class="list-group">
All Categories
{% for c in countcat %}
<a href="{{ c.get_absolute_url }}" class="list-group-item catheight">{{c.name}}
<span class="badge badge-light">{{c.num_products}}</span>
</a>
{% endfor %}
</ul>
</div>
<!-- .col-sm-3 -->
<div class="col-sm-9">
<div class="row">
{% for product in products %}
<div class="col-sm-6">
<div class="card border-primary mt-3 h-100">
<div class="card-header">
<h3>{{product.name}}</h3>
</div>
<!-- .card-header -->
<div class="card-body">
{% if product.image %}
<div class="h">
<img src="{{product.image.url}}" class="img-fluid">
</div>
<!-- .h -->
{% endif %}
<p class="bg-light font-weight-light ">{{product.description}}</p>
</div>
<!-- .card-body -->
<div class="card-footer">
{% if product.stock > 0 %}
<a href="{% url 'add_cart' product.id %}" type="button" class="btn btn-primary btn-sm mb-2">
<p class="m-0">Add to cart</p>
</a>
{% else %}
<a href="#" type="button " class="btn btn-danger btn-sm mb-2">
<p class="m-0">Out of stock</p>
</a>
{% endif %}
<p>Price: €{{product.price}}</p>
<p>Stock left: {{product.stock}}</p>
</div>
<!-- .card-footer -->
</div>
<!-- .card -->
</div>
<!-- . col-sm-6 -->
{% endfor %}
</div>
<!-- .row -->
</div>
<!-- .col-sm-9 -->
</div>
<!-- .row -->
</div>
<!-- .container-fluid -->
{% endblock content %}
I have figured out how to use bootstrap carousel but problem is I want to render my featured stories to be in the carousel.
currently I have a carousel that shows three slides, but what I'm trying to do is to have featured stories instead of the three slides.
<div class='carousel slide' id="myCarousel">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#myCarousel"></li>
<li class="active" data-slide-to="1" data-target="#myCarousel"></li>
<li class="active" data-slide-to="2" data-target="#myCarousel"></li>
</ol>
<div class="carousel-inner">
<div class="item active" id="slide1">
<img src="http://i.imgur.com/SQ691ZO.jpg" >
<div class="carousel-caption">
<h4>hello</h4>
<p>hi you</p>
</div>
</div>
<div class="item" id="slide2">
<img src="http://i.imgur.com/zN4h51m.jpg" >
<div class="carousel-caption">
<h4>hello</h4>
<p>hi you</p>
</div>
</div>
<div class="item" id="slide3">
<img src="http://i.imgur.com/3ruWvoG.jpg">
<div class="carousel-caption">
<h4>hello</h4>
<p>hi you</p>
</div>
</div>
</div>
<a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a>
<a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a>
So this is what I tried that's not quite working.
I have
{% for a in featuredStory %}
{{a.title}}
{{a.sub}}
<img src='{{a.get_featuredImage_url}}' class="img-rounded" alt="Cinque Terre" width="330" height="236"/>
{% endfor %}
working fine, but problem is to incorporate these with carousel.
with one featured story it works but with more than one, I get one in the top one in the bottom.
Here;s what I tried
<div class="row">
<div class="col-sm-8">
{% for a in featuredStory %}
<div class='carousel slide' id="myCarousel">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#myCarousel"></li>
<li class="active" data-slide-to="1" data-target="#myCarousel"></li>
<li class="active" data-slide-to="2" data-target="#myCarousel"></li>
</ol>
<div class="carousel-inner">
<div class="item active" id="slide1">
<img src='{{a.get_featuredImage_url}}' class="img-rounded" alt="Cinque Terre" width="330" height="236"/> <div class="carousel-caption">
<h4> {{a.title}}</h4>
<p> {{a.sub}}
</p>
</div>
</div>
</div>
<a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a>
<a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a>
{% endfor %}
</div>
</div>
You can use the for loop inside carousel-inner:
<div class="carousel-inner">
{% for a in featuredStory %}
<div class="item {% if forloop.counter == 1 %}active{% endif %}" id="slide{{ forloop.counter }}">
<img src="{{ a.get_featuredImage_url }}" >
<div class="carousel-caption">
<h4>{{ a.title }}</h4>
<p>{{ a.sub}}</p>
</div>
</div>
{% endfor %}
</div>
Make sure to activate the first item by checking the counter:
{% if forloop.counter == 1 %}active{% endif %}
If there are other information such as class, title etc. that also you can set in context on the featuredStory and then render it here same as title or url.
Create div[class=item] dynamically with for loop in next way:
{% for item in featuredStory %}
<div class="item" id="slide{{forloop.counter}}">
<img src="item.get_featuredImage_url">
<div class="carousel-caption">
<h4>{{ item.title }}</h4>
<p>{{ item.sub }}</p>
</div>
</div>
{% endfor %}
I used loop.index instead of forloop.counter
<div class="carousel-inner">
{% for item in sliders %}
<div class="carousel-item {% if loop.index == 1 %}active{% endif %}" id="slide{{ loop.index }}" >
<img class="d-block w-100" width="330" height="236" src="{{ url_for('static', filename='images/sliders/') }}{{ item.imagelocation }}" alt="{{item.filmtitle}}">
<div class="carousel-caption">
<h4>{{ item.filmtitle }}</h4>
</div>
</div>
{% endfor %}
</div>
I'm trying to sort the panels onto that way:
image screen - please enter to see:
But I've got more than 6 columns (it's 9). I'm looking forward to set 4 on the LEFT, 4 on the RIGHT and 1 in CONTENT.
My code is:
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Turnieje, w kórych jesteś zawodnikiem:</div>
<div class="panel-body">
<ul>
{% for playerT in playersT %}
<li>{{playerT.tournament_id.name}}
</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer">Przeglądaj wszystkie
</div>
</div>
</div>
<div class="col-md-push-2 col-md-4 ">
<div class="panel panel-primary">
<div class="panel-heading">Turnieje, w których jesteś trenerem:</div>
<div class="panel-body">
<ul>
{% for tournament in ctournaments %}
<li>{{tournament.name}}</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer">Przeglądaj wszystkie</div>
</div>
</div>
<div class="col-md-push-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Twoje turnieje:</div>
<div class="panel-body">
<ul>
{% for tournament in mtournaments %}
<li>{{tournament.name}}</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer">Przeglądaj wszystkie</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Twoje drużyny:</div>
<div class="panel-body">
<ul>
{% for team in teams %}
<li>{{team.name}}</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer">Przeglądaj wszystkie</div>
</div>
</div>
<div class="col-md-push-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Zaproszenie do drużyny:</div>
<div class="panel-body">
<ul>
{% if playerteam %}
<li>{{ playerteam.team_id.name }} <a href="{% url 'playerToTeamAccept' playerteam.id %}">
Akceptuj </a></li>
{% endif%}
</ul>
</div>
<div class="panel-footer">Przeglądaj wszystkie</div>
</div>
</div>
<div class="col-md-push-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Zaproszenia dla Twoich zawodników do turnieju:</div>
<div class="panel-body">
<ul>
{% for player in AplayersT %}
<li>{{ player.tournament_id.name }} <a href="{% url 'playerToTournamentAccept' player.id %}">
Akceptuj </a></li>
{% endfor%}
</ul>
</div>
<div class="panel-footer"><a href="{% url 'allPlayersTourAcceptByC' %}" class="btn btn-default">Akceptuj
wszystkie</a></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Zgłoszenia zawodników do Twoich turniejów:</div>
<div class="panel-body">
<table class="table table-hover table-condensed">
<br>
{% for EplayerT in EplayersT %}
<tr>
<td class="col-md-3" align="center"><a
href="{% url 'allTeamTourAcceptByM' EplayerT.player_id.team_id.id %}"> Akceptuj
drużynę {{ EplayerT.player_id.team_id.name }} </a></td>
<td class="col-md-3">Zawodnik {{ EplayerT.player_id.name }} {{ EplayerT.player_id.surname }}
zgłoszony do {{ EplayerT.tournament_id.name }}
</td>
<td class="col-md-3" align="center"> Akceptuj zawodnika</td>
</tr>
{% endfor %}
</table>
</div>
<div class="panel-footer"><a href="{% url 'allPlayersTourAcceptByM' %}" class="btn btn-default">Akceptuj
wszystkie</a></div>
</div>
</div>
<div class="col-md-push-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Przynależność do drużyny:</div>
<div class="panel-body">
<ul>
{% for player in players %}
<li>{{player.team_id.name}}
</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer">Pozostałe drużyny
</div>
</div>
</div>
<div class="col-md-push-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Zaproszenia do Twojej drużyny:</div>
<div class="panel-body">
<ul>
{% for player in players %}
<li>{{player.team_id.name}}
</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer">Pozostałe drużyny
</div>
</div>
</div>
</div>
But now it looks:
image screen - please enter to see:
Does anyone has an idea how to sort it ? Thanks for each solution!
Are you looking for a layout like this? In that case I would suggest you to create three columns and simply put four panels inside the left and right column. Also has the advantage that the top of panel 2 isn't dependent on the bottom of panel 6.
.box {
font-family: Arial;
font-size: 24px;
border: 1px solid #f99;
background-color: #fee;
color: #333;
padding: 10px;
height: 75px;
margin-bottom: 10px;
}
.box.box--100 {
height: 100px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="box">1</div>
<div class="box box--100">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<div class="col-xs-4">
<div class="box">5</div>
</div>
<div class="col-xs-4">
<div class="box box--100">6</div>
<div class="box">7</div>
<div class="box box--100">8</div>
<div class="box box--100">9</div>
</div>
</div>
</div>
Are their any special rules with using Django's Paginator with the model method get_absolute_url? I am trying to call this method, but it isn't working??
Here's my template:
<ul class="products thumb-info-list">
{% for product in products.object_list %}
<li class="col-md-3 product">
{% if product.on_sale %}
<a href="{{ product.get_ablsolute_url }}">
<span class="onsale">Sale!</span>
</a>
{% endif %}
<span class="thumb-info">
<a href="{{ product.get_ablsolute_url }}" class="add-to-cart-product">
<span><i class="icon icon-tag"></i>{{ product.title }}</span>
</a>
<a href="{{ product.get_ablsolute_url }}">
<span class="thumb-info-image">
<span class="thumb-info-act">
<span class="thumb-info-act-left"><em>View</em></span>
<span class="thumb-info-act-right"><em><i class="icon icon-plus"></i> Details</em></span>
</span>
<img alt="" class="img-responsive" src="{{ STATIC_URL }}{{ product.image_one }}">
</span>
</a>
<span class="thumb-info-content">
<a href="{{ product.get_ablsolute_url }}">
<h4>{{ product.title }}</h4>
<span class="price">
{% if product.on_sale %}
<del><span class="amount">${{ product.unit_price|floatformat:0 }}</span></del>
{% endif %}
<ins><span class="amount">${{ product.sale_price|floatformat:0 }}</span></ins>
</span>
</a>
</span>
</span>
</li>
{% endfor %}
</ul>
It looks like a typo in your template:
product.get_ablsolute_url
should be:
product.get_absolute_url