I cannot figure out how to use Boostrap Tabs, when block content is needed and I am unable to make sue of the href in tab li a item. See below for any ideas. thanks for any help.
When you click on the below, it changes the tabs as expected, however, how do you incorporate django views? for example when the email tab is clicked, show the tab view for {% url 'account_email' %} in the content pane?
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-lg-7">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-email-tab" data-toggle="tab" href="#nav-email" role="tab" aria-controls="nav-email" aria-selected="true">E-mail</a>
<a class="nav-item nav-link" id="nav-password-tab" data-toggle="tab" href="#nav-password" role="tab" aria-controls="nav-password" aria-selected="false">Password</a>
<a class="nav-item nav-link" id="nav-connect-tab" data-toggle="tab" href="#nav-connect" role="tab" aria-controls="nav-connect" aria-selected="false">Connect</a>
</div>
</nav>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="container mt-5 text-center mx-auto">
<div class="card p-5">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-email" role="tabpanel" aria-labelledby="nav-email-tab">
{% block email_content %}{% endblock %}
</div>
<div class="tab-pane fade" id="nav-password" role="tabpanel" aria-labelledby="nav-password-tab">
{% block password_content %}{% endblock %}
</div>
<div class="tab-pane fade" id="nav-connect" role="tabpanel" aria-labelledby="nav-connect-tab">
{% block connect_content %}{% endblock %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
For this case, you have 2 options:
Load the whole page of {% url 'account_email' %} into a iframe, and display that iframe in the mentioned tab
put the template of {% url 'account_email' %} into an independent HTML file that can be included into the html section of this tab, using {% include "path to the html file" %}, and of course this HTMl template will use the same context as the current view, meaning you will have to send all the context data from the view of {% url 'account_email' %} into this view.
Remember that Django template render everything FROM THE SERVER SIDE, so everything end-user sees are pre-rendered before. Unless you use Ajax here.
I ended up completing the solution with a much more simple approach using request.path to set the appropriate tag active, then just use the tab href to directly reference the view for that tab.
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-lg-7">
<nav>
<div class="nav nav-tabs" id="nav-tab">
<a class="nav-item nav-link {% if 'accounts/email' in request.path %}active{% endif %}" id="nav-email-tab" href="{% url 'account_email' %}" aria-selected="true">E-mail</a>
<a class="nav-item nav-link {% if 'accounts/password/change' in request.path %}active{% endif %}" id="nav-password-tab" href="{% url 'account_change_password' %}" aria-selected="false">Password</a>
<a class="nav-item nav-link {% if 'accounts/social/connections' in request.path %}active{% endif %}" id="nav-connect-tab" href="{% url 'socialaccount_connections' %}" aria-selected="false">Connect</a>
</div>
</nav>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="container mt-5 text-center mx-auto">
<div class="card p-5">
{% block base_content %}
{% endblock %}
</div>
</div>
</div>
</div>
</div>
Related
I am working on a django product overview page.
I display categories with a listview. I use a Bootstrap grid with two columns to display the categories as follows:
picture | Info
I now ant every 2nd column to be mirrored so the end resukt will be like this:
Picture | Info
Info | Picture
Picture | Info
How do I run a loop to make this work? My code looks like this:
<div class='container'>
{% for category in categories %}
<!-- Check is subcategory exists. if not, filter on category. If it does exist filter on subcategory -->
{% if category.sub_category is Null %}
<a href="{% url 'academy:brandByCat_list' category.category_name %}">
<div class="row py-3 item-display">
<div class='col-md item-img'>
<img src= {{category.category_picture.url}} class="img-fluid category-picture">
</div>
<div class="col-md">
<h1 class='py-3'>{{category.category_name}}</h1>
<p>{{category.category_info}}
</div>
</div>
</a>
{% else %}
<a href="{% url 'academy:brandBySubCat_list' category.sub_category %}">
<div class="row py-3 item-display">
<div class='col-md item-img'>
<img src= {{category.category_picture.url}} class="img-fluid category-picture">
</div>
<div class="col-md">
<h1 class='py-3'>{{category.sub_category}}</h1>
<p>{{category.category_info}}</p>
</div>
</div>
</a>
{% endif %}
{% endfor %}
Thanks for the help!
I figured it out!
By using a nested forloop.counter|divisibleby:'2' i managed to make it work.
{% for category in categories %}
<!-- Check is subcategory exists. if not, filter on category. If it does exist filter on subcategory -->
{% if category.sub_category is Null %}
{% if forloop.counter|divisibleby:'2' %}
<a href="{% url 'academy:brandByCat_list' category.category_name %}">
<div class="row py-3 item-display">
<div class='col-md item-img'>
<img src= {{category.category_picture.url}} class="img-fluid category-picture">
</div>
<div class="col-md">
<h1 class='py-3'>{{category.category_name}}</h1>
<p>{{category.category_info | linebreaks}}
</div>
</div>
</a>
{% else %}
<a href="{% url 'academy:brandByCat_list' category.category_name %}">
<div class="row py-3 item-display">
<div class="col-md">
<h1 class='py-3'>{{category.category_name}}</h1>
<p>{{category.category_info | linebreaks}}
</div>
<div class='col-md item-img'>
<img src= {{category.category_picture.url}} class="img-fluid category-picture">
</div>
</div>
</a>
{% endif %}
{% else %}
{% if forloop.counter|divisibleby:'2' %}
<a href="{% url 'academy:brandBySubCat_list' category.sub_category %}">
<div class="row py-3 item-display">
<div class='col-md item-img'>
<img src= {{category.category_picture.url}} class="img-fluid category-picture">
</div>
<div class="col-md">
<h1 class='py-3'>{{category.sub_category}}</h1>
<p>{{category.category_info | linebreaks}}</p>
</div>
</div>
</a>
{% else %}
<a href="{% url 'academy:brandBySubCat_list' category.sub_category %}">
<div class="row py-3 item-display">
<div class="col-md">
<h1 class='py-3'>{{category.sub_category}}</h1>
<p>{{category.category_info | linebreaks}}</p>
</div>
<div class='col-md item-img'>
<img src= {{category.category_picture.url}} class="img-fluid category-picture">
</div>
</div>
</a>
{% endif %}
{% endif %}
{% endfor %}
I am trying to get a button in a django view to display a model dialog to request delete confirmation of a list item. When I click the button I cannot get the modal dialog to display. Any ideas?
Dialog (included from Django Template)
<div
id="confirmModal"
class="modal fade"
tabindex="-1"
role="dialog"
caller-id=""
aria-labelledby="confirmModal"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body" id="modal-message">
Do you wish to proceed?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" id="confirmButtonModal">Confirm</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
var buttons = document.querySelectorAll("[data-target='#confirmModal']");
for (const button of buttons) {
button.addEventListener("click", function(event) {
// find the modal and add the caller-id as an attribute
var modal = document.getElementById("confirmModal");
modal.setAttribute("caller-id", this.getAttribute("id"));
// extract texts from calling element and replace the modals texts with it
if ("message" in this.dataset) {
document.getElementById("modal-message").innerHTML = this.dataset.message;
};
if ("buttontext" in this.dataset) {
document.getElementById("confirmButtonModal").innerHTML = this.dataset.buttontext;
};
})
}
document.getElementById("confirmButtonModal").onclick = () => {
// when the Confirm Button in the modal is clicked
var button_clicked = event.target
var caller_id = button_clicked.closest("#confirmModal").getAttribute("caller-id");
var caller = document.getElementById(caller_id);
// open the url that was specified for the caller
window.location = caller.getAttribute("href");
};
});
</script>
base.html
<!DOCTYPE html>
<html>
<head>
{% load static %}
<title>Unisport</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'css/main.css' %}">
</head>
...
...
{% block content %}{% endblock content %}
...
...
</html>
Template : List of objects : Includes modal dialog html file
Includes modal dialog via {% include "web/product_confirm_delete-dialog.html" %}
{% extends "base.html" %}
{% block content %}
<div class="container">
<div class="row">
{% for object in object_list %}
{% include "web/product_confirm_delete-dialog.html" %}
<div class="col">
<div class="card">
<h5 class="card-header">{{object.name}}</h5>
<img class="card-img-top" src="{{object.image}}" alt="Card image">
<div class="card-body">
<p class="card-text">{{object.max_price}} {{object.currency.id}}</p>
<p class="card-text">{{object.min_price}} {{object.currency.id}}</p>
<p class="card-text">-{{object.discount_percentage}}%</p>
<p class="card-text">{{object.recommended_retail_price}} {{object.currency.id}}</p>
</div>
<div class="card-footer">
Info
Edit
<a
href="#confirmModal"
class="btn btn-primary"
data-toggle="modal"
data-target="#confirmModal"
id="product_{{object.id}}"
>
Delete
</a>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="pagination">
<span class="page-links">
{% if page_obj.has_previous %}
previous
{% endif %}
<span class="page-current">
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
</span>
{% if page_obj.has_next %}
next
{% endif %}
</span>
</div>
</div>
{% endblock content %}
Solved by using the correct tag to trigger the display of the modal dialog. I needed to use data-bs-toggle and data-bs-target for bootstrap 5. Previously, I was using data-toggle and data-target.
{% extends "base.html" %}
{% block content %}
<div class="container">
<div class="row">
{% for object in object_list %}
{% include "unisport_web/product_confirm_delete-dialog.html" %}
<div class="col">
<div class="card">
<h5 class="card-header">{{object.name}}</h5>
<img class="card-img-top" src="{{object.image}}" alt="Card image">
<div class="card-body">
<p class="card-text">{{object.max_price}} {{object.currency.id}}</p>
<p class="card-text">{{object.min_price}} {{object.currency.id}}</p>
<p class="card-text">-{{object.discount_percentage}}%</p>
<p class="card-text">{{object.recommended_retail_price}} {{object.currency.id}}</p>
</div>
<div class="card-footer">
Info
Edit
<a
href="#confirmModal"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#confirmModal"
id="product_{{object.id}}"
>
Delete
</a>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="pagination">
<span class="page-links">
{% if page_obj.has_previous %}
previous
{% endif %}
<span class="page-current">
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
</span>
{% if page_obj.has_next %}
next
{% endif %}
</span>
</div>
</div>
{% endblock content %}
so I'm building a website in Django which have similarities with YouTube. I mean there will be some thumbnails and when you click on one of them it takes you to a page where the video will be played.
Now coming to the code since I don't wanna have to hard-code everything I opted to use the pagination but I have a problem cuz the pagination is doing everything automatically and I can't change the thumbnails for the next page. So either my analysis is wrong or there a way to do it correctly.
Here's the code for the template:
{% load static %}
{% block content %}
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3 mb-5">
<div class="col">
<div class="card shadow-sm">
<a href="{% url 'watch1' %}" target="_blank"> <img src="{% static 'thumbnails/hacker.jpeg' %}" height="225"
width="100%"></a>
<div class="card-body">
<p class="card-text">
{% for element in page_obj %}
{% if element.category == 'boxing' %}
{{ element.description|truncatechars:50 }}
{% endif %}
{% endfor %}
</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<a href="{% url 'watch2' %}" target="_blank"> <img src="{% static 'thumbnails/hydra.jpg' %}" height="225"
width="100%"></a>
<div class="card-body">
<p class="card-text">
{% for element in page_obj %}
{% if element.category == 'boxing' %}
{{ element.description|truncatechars:50 }}
{% endif %}
{% endfor %}
</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<a href="{% url 'watch3' %}" target="_blank"> <img src="{% static 'thumbnails/darkweb.jpg' %}" height="225"
width="100%"></a>
<div class="card-body">
<p class="card-text">
{% for element in page_obj %}
{% if element.category == 'boxing' %}
{{ element.description|truncatechars:50 }}
{% endif %}
{% endfor %}
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
</div>
<div class="pagination">
<span class="step-links">
{% if page_obj.has_previous %}
« first
previous
{% endif %}
<span class="current">
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
</span>
{% if page_obj.has_next %}
next
last »
{% endif %}
</span>
</div>
{% endblock%}
the function in the view
def boxing(request):
videos = Video.objects.all()
paginator = Paginator(videos, 3) # shows 3 videos per page
pageNumber = request.GET.get('page')
try:
page_obj = paginator.get_page(pageNumber)
except:
page_obj = paginator.get_page(1)
return render(request, 'boxing.html', {'page_obj': page_obj})
And my loop is also displaying the same thing for everything. I could just use an if statement to pick exactly which video I want but with the pagination happening it'll do the same thing on the next page as well.
In a Django project, I have a side bar that is not rendering in the correct place. Instead of coming up on the right hand side of the content, as it does for the other pages that have similar content, the side bar in this case is at the very bottom. I cannot figure out how to move it, and have tried various things in the base.html and moving around the Django templating language block content.
Rendering the template (register.html) looks like this:
It should however look like this, as per the tutorial:
Relevant part of the base.html
<!--this is django templating language-->
<link rel="stylesheet" href="{% static 'worldguestbook\main2.css' %}"/>
</head>
<body>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
<div class="container">
<a class="navbar-brand mr-4" href="/">FakeBook Newsfeed</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="{% url 'socialmedia-home' %}">Home</a>
<a class="nav-item nav-link" href="{% url 'socialmedia-about' %}">About</a>
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
<a class="nav-item nav-link" href="{% url 'socialmedia-login' %}">Login</a>
<a class="nav-item nav-link" href="#">Register</a>
</div>
</div>
</div>
</nav>
</header>
register.html
{% extends "socialmedia/base.html" %}
{% block content %}
<div class="content-section">
<form method="POST">
{% csrf_token %}
<fieldset class="form-group">
<legend class="border-bottom mb-4">Hello: Register today!</legend>
{{form.as_p}}
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Register</button>
</form>
<div class="border-top pt-3">
<small class="text-muted">Signed up already? <a class="ml-2" href="#">Login</a> here</small>
</div>
{% endblock content %}
views.py
#USERS (register) view.py
from django.shortcuts import render
from django.contrib.auth.forms import UserCreationForm
# Create your views here.
def register(request):
form = UserCreationForm()
return render(request, 'users/register.html',{'form':form})
Please note that the main2.css style sheet is referenced in the base.html and works fine on all the other pages except for this one. In the other pages the side bar renders correctly on the right hand side of the page.
The problem was a missing div, that compeltely escaped my attention.
The register.html page can be re-written as the below. Note the divs, one of which was missing. I also sorted out the indentation which helps.
{% extends "socialmedia/base.html" %}
{% block content %}
<div class="content-section">
<form method="POST">
{% csrf_token %}
<fieldset class="form-group">
<legend class="border-bottom mb-4">Hello: Register today!</legend>
{{form.as_p}}
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Register</button>
</div>
</form>
<div class="border-top pt-3">
<small class="text-muted">
Signed up already? <a class="ml-2" href="#">Login</a>
</small>
</div>
</div>
{% endblock content %}
I have a djangocms based website and now I would like to have an app which will help with a small blog section.
Now, I have successfully integrate djangocms-blog in my website, but when I am trying to see a post, the template (a custom template made by me) is not rendered and the post (made from blog admin) is just thrown on the page.
Can anybody help me out with this issue ? Would you like any additional info in order to help me out with this ?
My template looks like this:
{% extends "base.html" %}
{% load cms_tags %}
{% block title %}{% page_attribute "page_title" %}{% endblock title %}
{% block content %}
<div class="spacer"></div>
<div class="page-header page-header-blog-post-1 white">
<div class="page-header-container container">
<div class="page-header-content">
<h1 class="heading">BLOG</h1>
</div>
</div>
</div>
<div class="blog-container blog-single container">
<div class="row">
<div class="col-md-8 blog-content margin-bottom-70 clearfix">
{% placeholder banner_leaderboard_top %}
</div>
</div>
<div class="row">
<div class="col-md-8 blog-content margin-bottom-70 clearfix">
<article id="post-1" class="post-1 post format-standard">
<header class="entry-header">
<div class="post-thumbnail-area">
{% placeholder "post_header_image" or %}
<img src="/static/img/onepage-slide9.jpg" alt="image_blog"/>
{% endplaceholder %}
</div>
</header>
<div class="entry-content">
<div class="entry-title blog-info">
<h1 class="heading">{% placeholder "post_header_title" or %}POST_TITLE{% endplaceholder %}</h1>
</div>
{% placeholder "POST_BODY" or %}POST_BODY{% endplaceholder %}
</div>
<footer class="entry-footer">
<div class="entry-description">
<h6 class="post-date-classic">{% placeholder "post_date" or %}POST_DATE{% endplaceholder %}</h6>
</div>
</footer>
</article>
<div class="post-additional">
<script type="text/javascript">
// Popup window code
function newPopup(url) {
popupWindow = window.open(
url, 'popUpWindow', 'height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
</script>
<ul class="post-share list-inline">
<li><a href="JavaScript:newPopup('https://www.facebook.com/sharer/sharer.php?u='+window.location.href)"><i
class="icon ion-social-facebook"></i></a></li>
<li><a href="JavaScript:newPopup('http://twitter.com/home/?status=Nice blog post - '+window.location.href);"><i
class="icon ion-social-twitter"></i></a></li>
<li><a href="JavaScript:newPopup('https://plus.google.com/share?url='+window.location.href); "><i
class="icon ion-social-googleplus"></i></a></li>
</ul>
<div class="post-navigation nav-links">
<ul class="post-controls list-inline">
<li>
{% placeholder "prev_post" or %}
<a class="post-prev" href="#"><i class="icon ion-ios7-arrow-thin-left"></i></a></li>
{% endplaceholder %}
<li>
{% placeholder "next_post" or %}
<a class="post-next" href="#"><i class="icon ion-ios7-arrow-thin-right"></i></a></li>
{% endplaceholder %}
</ul>
</div>
</div>
<div class="author-bio">
<div class="row">
<div class="author-avatar col-xs-4 col-sm-3 col-md-3 visible-desktop">
{% placeholder "author_img" or %}
<img src="/static/img/image-8.jpg" alt="image_blog"></div>
{% endplaceholder %}
<div class="author-details white col-md-9">
<h3>{% placeholder "author_name" or %}AUTHOR_NAME{% endplaceholder %}</h3>
<p>{% placeholder "author_body" or %}AUTHOR_BODY{% endplaceholder %}</p>
</div>
</div>
</div>
{% placeholder banner_leaderboard_bottom %}
</div>
<div class="col-md-4">
<div class="sidebar">
<aside id="recent-posts-2" class="widget widget_recent_entries">
<div class="widget-title">
<h5 class="heading">RECENT POSTS</h5>
<div class="fancy-line-small"></div>
</div>
{% placeholder "post_recent" or %}
<ul>
<li>Recent blog post</li>
</ul>
{% endplaceholder %}
</aside>
{% placeholder banner_square_right %}
</div>
</div>
</div>
</div>
{% endblock %}
Some image with administration of djangocms-blog:
So, I'd like the Title from Blog admin to be applied on my template instead of <h1 class="heading">BLOG</h1> and so on for date , category and so on
If you want to override a template used by an app that you've installed you simply need to mimic the same template path in your template directory.
The CMS blog templates can be found here.
So to override the CMS blog templates you should decide which template needs to be overridden, in this case it sounds like post_detail.html because you're concerned with how a post displays.
So in your project you need to create something like; myproj/templates/djangocms_blog/post_detail.html
Then the system will load that one instead of the post_detail.html from the site-packages folder.