How can I set a custom Template for djangocms-blog? - django

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.

Related

Bootstrap modal dialog not displayed when click button or link in Django template

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 %}

How to make data that comes from Django database appear horizontally?

In this Image, the data appears in vertical format. But I want data in horizontal format.
{% block title %}Blog{% endblock title %}
{% block body %}
<div class="container">
<div class="row">
{% for post in posts%}
<div class="col-lg-3">
<div class="card" style="width: 31.25rem;">
<!-- <div class="card"> -->
<img class="img-fluid card-img-top" src="https://images.unsplash.com/photo-1591154669695-5f2a8d20c089?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80" alt="Card image cap" style="height: 250px;width: 500px;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
<div class="post block">
<h2 class="subtitle">{{post.title}}</h2>
<small>Posted At {{post.date_added}}</small>
<p>{{post.intro}}</p>
Read More
</div>
{% endfor %}
{% endblock body %}
Hi There I'm Newbie In Django
How Can I Able To Appear Horizontally The Data Is Come From Database
So The Problem Was I Was Ending Row Inside For Loop To Create New Row You Have To Put For Loop Outside
Check This Code
{% extends 'base.html' %}
{% block title %}Blog{% endblock title %}
{% block body %}
<div class="container">
<div class="row">
{% for post in posts%}
<div class="col-lg-4">
<div class="card" style="width: 31.25rem;">
<!-- <div class="card"> -->
<img class="img-fluid card-img-top" src="https://images.unsplash.com/photo-1591154669695-5f2a8d20c089?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80" alt="Card image cap" style="height: 250px;width: 500px;">
<div class="card-body">
<h5 class="card-title">{{post.title}}</h5>
{{post.date_added}}
<p class="card-text">{{post.intro}}</p>
Go somewhere
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock body %}

Recreating bootstrap cards row layout with tailwind in django

ASK
I'm trying to recreate bootstrap cards row layout with Tailwind within django framework
BLOCKER
However the tailwind attempt results in below
index.html -- bootstrap
{% extends 'base.html' %}
{% block title %}Home{% endblock title %}
{% block content %}
<div class="py-2">
<div class="row">
{% for t in object_list %}
<div class="col-md-3">
<div class="card mb-4 box-shadow bg-green-500">
<div class="card-body">
<h2 style="font-size:18px;font-weight:bold;min-height:42px;"><a class="text-dark" href="#">
{{t.currency|truncatechars:50}}</a></h2>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">{{t.country|truncatechars:25}}</small>
</div>
</div>
</div>
</a>
</div>
{% endfor %}
</div>
{% endblock content %}
index.html -- tailwind
{% extends 'base.html' %}
{% block title %}Home{% endblock title %}
{% block content %}
<div class="p-10 ">
<div class="max-w-sm rounded overflow-hidden shadow-lg">
{% for t in object_list %}
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">{{t.country}}</div>
<p class="text-gray-700 text-base">
{{ t.currency }}
</p>
</div>
{% endfor %}
</div>
</div>
{% endblock content %}
You're starting the for loop a tag too late on the Tailwind version so all of your items are in a single card. And to recreate a 4 column grid layout in Tailwind I recommend using the grid utilities, specifically grid which is display: grid and grid-cols-4 which is grid-template-columns: repeat(4, minmax(0, 1fr)).
Your code might look like this:
{% extends 'base.html' %}
{% block title %}Home{% endblock title %}
{% block content %}
<div class="p-10 grid sm:grid-cols-2 md:grid-cols-4 gap-5">
{% for t in object_list %}
<div class="bg-green-500 rounded overflow-hidden shadow-lg">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">{{t.country}}</div>
<p class="text-gray-700 text-base">
{{ t.currency }}
</p>
</div>
</div>
{% endfor %}
</div>
{% endblock content %}
Here's a visual of what the expected output would be https://play.tailwindcss.com/AWK45UcOug

How to use Bootstrap tabs with Block Content in Django

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>

Django, Template

I am beginner of Django and Template language...
Here is my code:
base.html
{% block news%}
<div class="row">
<div class="span6">
<div class="news-content clearfix">
<div class="news-title">Манай хамт олны тухай</div>
<div class="text clearfix>
<img src="{{STATIC_URL}}img/image1.jpg">
# here is some text
</div>
<div class="pull-right">00
<a class="btn btn-small" href="#">Дэлгэрэнгүй</a>
</div>
</div>
</div>
<div class="span6">
<div class="news-content clearfix">
<div class="news-title">#title</div>
<div class="text clearfix">
<img src="{{STATIC_URL}}img/image2.jpg">
# text-2
</div>
<div class="pull-right">
<a class="btn btn-small" href="#">Дэлгэрэнгүй</a>
{% endblock %}
news_list.html
{% extends "base.hmtl"%}
{% block news %}
{% for news in news_list %}
######## here i want to display last 2 news at row #########
{% endfor %}
{% endblock %}
You are getting it all wrong.
The base.html must contain all the code that is to be reused over your website.For example the files like CSS and javascript are included in the base.html
Inside the base.html you are to include a block that is to hold the code that varies from page to page.You can use multiple blocks as well,like header,body, and footer.
When a template is rendered,the requested template "imports" the base.html using {% extends "base.html" %}.After the import,the block defined in the base.html is replace by the block in the requested template.
As per your question,the code you have written in the base.html that defines how to display your news is to come under the news_list.html,under the for loop.
I assume that the news_list is a QuerySet ie a result of a database query and contains the attributes title,content etc
{% extends "base.html" %}
{% block news %}
{% for news in news_list %}
<div class="row">
<div class="span6">
<div class="news-content clearfix">
<div class="news-title">{{ news.title }}</div>
<div class="text clearfix>
<img src="{{STATIC_URL}}img/image1.jpg">
</div>
<div class="pull-right">00
<a class="btn btn-small" href="#">{{ whatever }}</a>
</div>
</div>
</div>
{% endfor %}
{% endblock %}
And your base.html
<html>
CSS,JS here if any
<body>
{% block news %}
{% endblock %}
</body>
</html>