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>
Related
"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
I am learning django-comments-xtd, when I click on the Like button, it will jump to the new page.
How do I make this new page popup on the current page in a modal way?
Thank you.
/home/web/venv/lib/python3.7/site-packages/django_comments_xtd/templates/includes/django_comments_xtd content:
{% if allow_feedback %}
<span class="small">
{% if show_feedback and item.likedit_users %}
<a class="badge badge-primary text-white cfb-counter" data-tooltip="{{ item.likedit_users|join:' , ' }}">
{{ item.likedit_users|length }}</a>
{% endif %}
<a href="{% url 'comments-xtd-like' item.comment.pk %}"
class="{% if not item.likedit %}like{% endif %}">
<i class="thumbs up outline icon"></i></a>
<span class="text-muted"></span>
{% if show_feedback and item.dislikedit_users %}
<a class="badge badge-primary text-white cfb-counter" data-tooltip="{{ item.dislikedit_users|join:' , ' }}">
{{ item.dislikedit_users|length }}</a>
{% endif %}
<a href="{% url 'comments-xtd-dislike' item.comment.pk %}"
class="{% if not item.dislikedit %}dislike{% endif %}">
<i class="thumbs down outline icon"></i></a>
</span>
{% endif %}
The like button is pointing to a link:
<a href="{% url 'comments-xtd-like' item.comment.pk %}"
class="{% if not item.likedit %}like{% endif %}">
<i class="thumbs up outline icon"></i></a>
You can use simple Bootstrap Modal for the same.
Example :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
so I want to have three grid lines, such that <div class="col-6 col-md-4">
each grid line has a content of course. so the code will probably tell what I'm trying to achieve
<div class="row">
<div class="col-6 col-md-4">
{% for all_episode in episode %}
<div class="card">
<a href="{% url 'episode_detail' slug=all_episode.slug %}">
<img class="card-img-top" src='{{all_episode.image.url}}'></a>
<div class="card-body">
<h5 class="card-title">
{{ all_episode.title }}
</h5>
<p class="card-text">{{ all_episode.story |slice:":100" }}...</p>
</div>
<div class="card-footer">
<small class="text-muted">
<span class="h5">
{{ all_episode.series }}
</span> /
<span class="h6">
{{ all_episode.season }}
</span>
</small>
</div>
{% endfor %}
</div>
</div>
</div>
but with the above code i get the cards in align vertically. so one card takes the whole line while there should be three cards.
Be careful with your indentation please. It's difficult to read your code.
You can add your col class with your card div, and you need to have your loop into your row div but outside your col div.
<div class="row">
{% for all_episode in episode %}
<div class="col-6 col-md-4 card">
<a href="{% url 'episode_detail' slug=all_episode.slug %}">
<img class="card-img-top" src='{{all_episode.image.url}}'>
</a>
<div class="card-body">
<h5 class="card-title">
{{ all_episode.title }}
</h5>
<p class="card-text">{{ all_episode.story |slice:":100" }}...</p>
</div>
<div class="card-footer">
<small class="text-muted">
<span class="h5">
{{ all_episode.series }}
</span> /
<span class="h6">
<a href="{% url 'season_detail' slug=all_episode.season.slug %}">{{ all_episode.season }}
</a>
</span>
</small>
</div>
</div>
{% endfor %}
</div>
I want my main content and Sidewidget in the same row. With my knowledge of bootstrap grid, I tried to make this work but the sidewidget is stacking below the content and not in the sides. Here is the required snippets.
body.html
<!-- Navigation -->
{% include 'nav.html' %}
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 ">
{% block content %}
{% endblock %}
</div>
<div class="col-lg-4">
{% block sidewidget %}
{% endblock %}
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'js/tinymce/tinymce.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/tinymce/custom.js' %}" ></script>
nav.html
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'add' %}">Add Article</a>
</li>
{% endif %}
</ul>
</div>
</div>
My {% block content %}
{% for post in posts %}
<h2 class="mt-4">{{post.title}}</h2>
<!-- Author -->
<p class="lead">
by
{{post.author}}
</p>
<hr>
<!-- Date/Time -->
<p class="lead">Published on <b>{{post.published_date}}</b></p>
<hr>
<!-- Preview Image -->
<img class="img-fluid" src="{{post.image.url}}" alt="Img Placeholder">
<p>{{post.images}}</p>
{% for tag in post.tags.all %}
<p>{{tag.name}}</p>
{% endfor %}
<hr>
<!-- Post Content -->
<p class="lead">{{post.content|safe|truncatewords:"60"|linebreaks}}</p>
<footer class="entry-footer">
<button class="btn btn-primary">Read More</button>
</footer>
<hr>
{% empty %}
<h1> Nothing to display</h1>
{% endfor %}
{% endblock %}
My {% Sidewidget %} block
<!-- Search Widget -->
<div class="card my-4">
<h5 class="card-header">Search</h5>
<div class="card-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>
<!-- Categories Widget -->
<div class="card my-4">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
Web Design
</li>
<li>
HTML
</li>
<li>
Freebies
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
JavaScript
</li>
<li>
CSS
</li>
<li>
Tutorials
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Side Widget -->
<div class="card my-4">
<h5 class="card-header">Side Widget</h5>
<div class="card-body">
You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers!
</div>
</div>
{% endblock %}
I have tried tweaking but nothing seems to work
I want the page like this:
|*****************************|
|navigationbar |
|*****************************|
|Post1(Col1-Col8) |SIDEWIDGET|
|***** | |
|Post2(Col1-Col8) | |
|***** | |
|PostN(Col1-Col8) | |
|*****************************|
|Footer |
Your code should work. The col-lg-* modifier applies only for screens that are over 1200px wide as per bootstrap's documentation. Maybe you're using a smaller screen and you also need to add the col-sm and col-md modifiers. Please try those and let me know if it works.
<div class="container">
<div class="row">
<div class="col-sm-8 col-lg-8 ">
{% block content %}
{% endblock %}
</div>
<div class="col-sm-4 col-lg-4">
{% block sidewidget %}
{% endblock %}
</div>
</div>
</div>
you can't use a bootstarp grid system for it because the sidewidget is going to take up the column of the whole three rows .You would have to use flex box for it. by using grid system columns can be individually used in different rows but you cannot have a whole column spanning over the different rows .
In the 'nav' section the 'nav' tag is not closed </nav>. close it and try again.
I think that will solve your problem.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'add' %}">Add Article</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
In our project, we use the bootstrap widget module widely.
<div class="widget">
<header>
<div class="pull-left">
<h2><i class="fa fa-shopping-cart"></i>product-list</h2>
</div>
<div class="pull-right">
<a class="btn btn-default btn-sm toggle-widget" href="#">
<i class="fa fa-minus"></i>
</a>
</div>
</header>
<div class="inner-padding">
...............
</div>
</div>
<div class="widget">
<header>
<div class="pull-left">
<h2><i class="fa fa-user"></i>
user info
</h2>
</div>
<div class="pull-right">
<a class="btn btn-default btn-sm toggle-widget" href="#">
<i class="fa fa-minus"></i>
</a>
</div>
</header>
<div class="inner-padding">
.............
</div>
</div>
We repeat these code again and again. My problem is that how can I write a template and make these code reusable.
If I make a sub template like this:
<div class="widget">
<header>
<div class="pull-left">
<h2><i class="fa {{ icon }}"></i>
{{ title }}
</h2>
</div>
<div class="pull-right">
<a class="btn btn-default btn-sm toggle-widget" href="#">
<i class="fa fa-minus"></i>
</a>
</div>
</header>
<div class="inner-padding">
{% block content %}
{% endblock %}
</div>
</div>
I can use {% include %} to include the template:
{% include "sub-template.html" with icon="..." title="..." %}
But how can I render 'block content'?
In addition, we may include this sub-template.html several times in one template:
{% include "sub-template.html" with icon="1" title="user-info" %}
{% include "sub-template.html" with icon="2" title="product-list" %}
I think this is a very common scenario, but I can not find a solution using Django template. Is there anyone can give me some suggestion?
In this case, I could consider a template of header only:
# header-template.html
<header>
<div class="pull-left">
<h2><i class="fa {{ icon }}"></i>
{{ title }}
</h2>
</div>
<div class="pull-right">
<a class="btn btn-default btn-sm toggle-widget" href="#">
<i class="fa fa-minus"></i>
</a>
</div>
</header>
and, then use it in widgets:
<div class="widget">
{% include "header-template.html" with icon="1" title="user-info" %}
<div class="inner-padding">
.............
</div>
</div>
<div class="widget">
{% include "header-template.html" with icon="2" title="product-list" %}
<div class="inner-padding">
.............
</div>
</div>
If you think that for some of the widgets the content is also common, then you can create a template of that too, and use it in the widget.