I am trying to create an educational website with django and in a specific section I want to show the courses available, so I used an owl-carousel for that. So far I have created two courses, and they are not being displayed properly. Basically the two courses are occupying five columns each one after another whereas there should only be two columns for the two courses in the carousel and when I will add more courses then there will be more columns added.
Here is how they are being displayed:
I don't want them this way, there should be two separate columns for two cards as there are two courses and I don't know how to fix it.
My code:
<section class="section courses" data-section="section4">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="section-heading">
<h2>Choose Your Course</h2>
</div>
</div>
<div class="owl-carousel owl-theme">
{% for course in courses %}
<div class="item">
<img src="{{ course.image }}" alt="Course #1">
<div class="down-content">
<h4>{{ course.title }}</h4>
<p>{{ course.description }}</p>
<div class="author-image">
<img src="{{ course.instructor_image }}" alt="Author 1">
{{ course.instructor }}
</div>
<br>
<div class="button">
Get Enrolled <i class="fa fa-angle-double-right"></i>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</section>
Thanks in advance!
Related
I'm developing an e-commerce with Django. My backend is fine, my problem is with the template. Currently, I want to display 4 products per row, and if there are 7 products, the other 3 must be aligned with the top one. I'm using bootstrap to do this, however, for some reason I don't know, it doesn't have 4 products on the same line, even with space. I'm using a container with 1200px.
home.html
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="row">
{% for product in products %}
<div class="card mb-4 border rounded" style="width: 13.5rem;">
<a href="{{ product.get_absolute_url }}">
{%if product.image %}
<img class="img-produto" src='/media/{{product.image}}' class="card-img-top hover_img ">
{% else%}
<img class="img-produto" src="{% static '/img/not-found-product.jpg' %}" class="card-img-top hover_img">
{%endif%}
</a>
<div class="card-body">
<p class="card-title">{{product.name}}</p>
<p class="card-text"><i class='fas fa-dollar-sign' style="margin-right:2px"></i>{{product.price}}</p>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
Just remove width: 13.5rem; and add class col-4 in the div. Like,
<div class="col-4 card mb-4 border rounded">
<!-- your content goes here -->
</div>
I have a html page that runs a for loop to populate students on a board. Here is screenshot and the code.
Issue: The issue is if i have more than one student in the class , no matter which button on the page i click it will not let me do a POST. If there is just a single kid in the class, the POST will work. So the post is failing and i don't know why. Thanks for the help in advance.
{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% crispy K8Points_ClassroomForm %}
{% load static %}
{% block content %}
<br>
<h2>{% load static %}
<img src="{% static 'forms/star.png' %}" alt="chain" height="62" width="62"> My Classroom</h2>
<br>
<br>
<form action="/points/k8_points_classroom" method="POST">
{% csrf_token %}
<!-- Start Date -->
<div class="container">
<div class="container">
<div class='row'>
<div class="col-4">
<p> Recording Data as User : {{user.username}} </p>
<p><b> Classroom : {{class_name}} </b></p>
</div>
</div>
<div class='row'>
<div class = "col-2">
{{form.date|as_crispy_field }}
</div>
<div class = "col-2">
{{form.week_of|as_crispy_field }}
</div>
<div class = "col-2">
{{form.day|as_crispy_field }}
</div>
</div>
</div>
<div class="jumbotron" align="middle">
<h1>My Students</h1>
<!-- Line Break -->
<hr style="border: 1px solid black;"/>
<!-- Line Break -->
<div class="row mb-3">
{% for i in students %}
<div class="col-md-4 themed-grid-col"><h2>{{i.student_name}}</h2>
<p align="left"> Today's Score: </p>
<h4>
<button type="button" class="btn btn-primary btn-lg btn-block" data-toggle="modal"
data-target="#PointsBox1">Level Up
</button>
</h4>
<div id="PointsBox1" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<img src="{% static 'forms/star.png' %}" align="left" alt="chain" height="42"
width="42">
<h4 class="modal-title">Points Confirmation </h4>
<button type="button" class="close" data-dismiss="modal"> ×</button>
</div>
<div class="modal-body">
<h6>
<div class="modal-body">Please add the selected points for the current
student.</div>
</h6>
<div class="form-row" align='left'>
<div class="col-7">
{{form.class_name|as_crispy_field }}
{{form.student_name|as_crispy_field }}
{{form.time_frame|as_crispy_field }}
</div>
</div>
<div class="form-row">
<div class="col-3" align='left'>
{{form.behavior|as_crispy_field }}
{{form.academic|as_crispy_field }}
<button type="submit" class="btn btn-success"><i
class="fas fa-star"></i> Level Up
</button>
</div>
</div>
</div>
<div class="modal-foot"></div>
</div>
</div>
</div>
</div>
</form>
{% endfor %}
{% endblock %}
It's hard to know exactly what's going on because although you mention that "i click it will not let me do a POST" you don't mention exactly what error it jumps, or if it simply doesn't jump an error but doesn't save the information in the database.
However, I would start with two things:
There are errors in the html you designed. For example you open the form tag at the beginning of the code, but then you run a {% for i in students %} and inside that for you use </form> , which means that when you have several students, your code is going to have only one <form> tag but multiple </form> tags (I think that may be generating the error).
Try looking at the request.POST to see what the difference is when there is only one user with respect to when there are several. In the view that saves in the database the information, use print(request.POST), that can help you in the debugging.
In one of my of my pages I have a few tables. These tables have the same structure but differ in colors and in the data displayed.
An example table might look like this:
<div class="container reusable-table">
<h4 class="table_title">{{ table_title }}</h4>
{% for item in items %}
<div class="container row">
<div class="container col">
<h4>{{ item.date }}</h4>
</div>
<div class="container col">
<h4>{{ item.time }}</h4>
</div>
<div class="container col">
<h4>{{ item.title }}</h4>
</div>
<div class="container col">
<h4>{{ item.description }}</h4>
</div>
<div class="container col">
<h4>{{ item.price }}</h4>
</div>
</div>
{% endfor %}
</div>
One of my options is to repeat the html and css code for the table each time. This way I risk errors and alot of duplicated code.
From my perspective, I need to find a way to substitute:
html elements, like table_title
data related elements, like {% for item in items %}
colors
Based on the comments and the answers below, also on Assign variables to child template in {% include %} tag Django, you can replace html elements and data with the following:
{% include "new_table.html" with table_title="A Title" and items=new_items %}
That leaves the color aspect, or in better terms the css aspect.
I am searching for a way to make this more efficient.
you can create one HTML File for the table, include the HTML table wherever you want with {% include %}
{% include "mytable.html" with items=<your_items> %}
try this...
You can make your table an html snippet template that you can include in other templates to make this kind of thing manageable. See the docs on include.
Suppose you have item_table.html.
<div class="container reusable-table">
<h4 class="table_title">{{ table_title }}</h4>
{% for item in items %}
<div class="container row">
<div class="container col">
<h4>{{ item.date }}</h4>
</div>
<div class="container col">
<h4>{{ item.time }}</h4>
</div>
<div class="container col">
<h4>{{ item.title }}</h4>
</div>
<div class="container col">
<h4>{{ item.description }}</h4>
</div>
<div class="container col">
<h4>{{ item.price }}</h4>
</div>
</div>
{% endfor %}
</div>
Suppose you have a view that provides a list of items to a template like
# ...
return render('some_template.html', context=dict(some_items=something))
In your some_template.html you can include item_table.html and pass it appropriate values. For example, the list of items some_items can become the items variable in the included template.
{% include "item_table.html" with table_title="My Title" items=some_items %}
There is a menu on the left with the effect of the accordion, on the right content is formed with a jinja. I need to do so that the height of the menu and the contents do not depend on each other.
as here: click
HTML:
<!-- menu -->
<div class="col-md-3">
<div class="wrapper">
<h1 class="header-tabs">Brands</h1>
<div class="tab">
{% for brand in brands %}
<button value="{{ brand.id }}">{{ brand.brand_name }
</button>
{% endfor %}
</div>
</div>
</div>
<!-- content -->
{% for sm in smartphones %}
<div class="col-md-2">
<img class="photo-phone" height="150" width="150" src="{{ sm.photo.url }}">
</div>
<div class="col-md-5">
<h3 class="header-phone">{{ sm.brand }} {{ sm.model }}</h3>
<p descr-phone>{{ sm.description }}</p>
</div>
<div class="col-md-2">
<h4 class="price">{{ sm.price }}$</h4>
<input type="button" class="button-buy" value="Buy">
</div>
{% endfor %}
The usual way to achieve that is by nesting. Nesting must always be done using row-column pairs i.e. never nest a column directly inside another column.
So, in your case, you'd first create a column with the class col-md-9 then put a .row inside that column and then put all your content columns inside that newly created row.
Note that inside this newly created row you now have a total of 12 column units to work with.
Click "run code snippet" below and expand to full page for testing:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<!-- menu -->
<div class="col-md-3">
<div class="wrapper">
<h1 class="header-tabs">Brands:</h1>
<div class="tab">
<!-- {% for brand in brands %}-->
<button value="{{ brand.id }}">
<!-- {{ brand.brand_name }-->
Brand Name
</button>
<!-- {% endfor %}-->
</div>
</div>
</div>
<!-- content -->
<div class="col-md-9">
<div class="row">
<!-- {% for sm in smartphones %}-->
<div class="col-md-3 mb-3">
<!-- <img class="photo-phone" height="150" width="150" src="{{ sm.photo.url }}">-->
<img class="photo-phone img-fluid" src="https://placeimg.com/640/480/tech">
</div>
<div class="col-md-6">
<h3 class="header-phone">
<!-- {{ sm.brand }} {{ sm.model }}-->
Brand Model
</h3>
<p descr-phone>
<!-- {{ sm.description }}-->
Description
</p>
</div>
<div class="col-md-3 mb-3">
<h4 class="price">
<!-- {{ sm.price }}$-->
$1,000
</h4>
<input type="button" class="button-buy" value="Buy">
</div>
<div class="col-md-3 mb-3">
<!-- <img class="photo-phone" height="150" width="150" src="{{ sm.photo.url }}">-->
<img class="photo-phone img-fluid" src="https://placeimg.com/640/480/tech">
</div>
<div class="col-md-6">
<h3 class="header-phone">
<!-- {{ sm.brand }} {{ sm.model }}-->
Brand Model
</h3>
<p descr-phone>
<!-- {{ sm.description }}-->
Description
</p>
</div>
<div class="col-md-3 mb-3">
<h4 class="price">
<!-- {{ sm.price }}$-->
$1,000
</h4>
<input type="button" class="button-buy" value="Buy">
</div>
<div class="col-md-3 mb-3">
<!-- <img class="photo-phone" height="150" width="150" src="{{ sm.photo.url }}">-->
<img class="photo-phone img-fluid" src="https://placeimg.com/640/480/tech">
</div>
<div class="col-md-6">
<h3 class="header-phone">
<!-- {{ sm.brand }} {{ sm.model }}-->
Brand Model
</h3>
<p descr-phone>
<!-- {{ sm.description }}-->
Description
</p>
</div>
<div class="col-md-3 mb-3">
<h4 class="price">
<!-- {{ sm.price }}$-->
$1,000
</h4>
<input type="button" class="button-buy" value="Buy">
</div>
<!-- {% endfor %}-->
</div>
</div>
</div>
</div>
Also note the use of the spacing class mb-3 (margin-bottom 3 units).
The img-fluid class makes the images responsive.
Reference:
https://getbootstrap.com/docs/4.0/layout/grid/#nesting
I have to get team members by their groups from a database.
My Database looks like:
table team_groups:
id
name
table team_member:
id
name
description
imagepath
team_group_id
I have an twig template where the team_members are shown by there groups like this:
<div class="row row-centered">
<h3 class="text-center">{{team_group.name}}</h3>
<div class="col-xs-6 col-centered col-fixed">
<div class="item">
<div class="team-member text-center">
<span><img class="img-team" src="{{ app.request.basepath }}/img/team/{{team_member.imagepath}}"
alt="{{team_member.name}}"></span>
<h3>{{team_member.name}}</h3>
<p>{{team_member.description}}</p>
</div>
</div>
</div>
<div class="col-xs-6 col-centered col-fixed">
<div class="item">
<div class="team-member text-center">
<span><img class="img-team" src="{{ app.request.basepath }}/img/team/{{team_member.imagepath}}"
alt="{{team_member.name}}"></span>
<h3>{{team_member.name}}</h3>
<p>{{team_member.description}}</p>
</div>
</div>
</div>
<div class="col-xs-6 col-centered col-fixed">
<div class="item">
<div class="team-member text-center">
<span><img class="img-team" src="{{ app.request.basepath }}/img/team/{{team_member.imagepath}}"
alt="{{team_member.name}}"></span>
<h3>{{team_member.name}}</h3>
<p>{{team_member.description}}</p>
</div>
</div>
</div>
</div>
But I don't know how to loop the team_members over the team_groups in my controller.
I started like that:
$teamGroups = $app['db']->fetchAll('SELECT * team_groups');
$teamMembers = $app['db']->fetchAll('SELECT * team_members');
but don't know how to continue.
Please help
Oh yeah twig is really nice...
I thought I have to link the objects in the controller, but now I simply wrote:
{% for teamGroup in teamGroups %}
<div class="row row-centered">
<h3 class="text-center">{{ teamGroup.name }}</h3>
{% for teamMember in teamMembers %}
{% if teamMember.team_group_id is same as(teamGroup.id) %}
<div class="col-xs-6 col-centered col-fixed">
<div class="item">
<div class="team-member text-center">
<span><img class="img-team" src="{{ app.request.basepath }}/img/team/{{ teamMember.image }}"
alt="{{ teamMember.name }}"></span>
<h3>{{ teamMember.name }}</h3>
<p>{{ teamMember.description }}</p>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
{% endfor %}
That did it for me :-)