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>
Related
I have a basic django website running on a postgres database.
The login page code was structured as follows,
{% extends "_base.html" %}
{% load crispy_forms_tags %}
{% block title %}Log In{% endblock title %}
{% block content %}
<h2>Log In</h2>
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-4">
<form method="post">
{% csrf_token %}
{{ form | crispy }}
<button class="btn btn-primary " type="submit">Log In</button>
</form>
</div>
</div>
</div>
{% endblock content %}
and _base.html as
<!-- additional css content for navbar -->
<div class="container-fluid full-height p-0">
{% block content %}
{% endblock content %}
<!-- similar footer content -->
And then I decided to add some css from the bootstrap in the form of a just so my login page would look cleaner. Therefore I added some css in this form.
{% extends "_base.html" %}
{% load crispy_forms_tags %}
{% block title %}Log In{% endblock title %}
{% block content %}
<div class="bg-dark vh-100 d-flex align-items-center justify-content-center">
<div class="col-3 p-5 border bg-light rounded-2">
<h2>Log In</h2>
<form method=" post">
{% csrf_token %}
{{ form | crispy }}
<button class="btn btn-primary " type="submit">Log In</button>
</form>
</div>
</div>
{% endblock content %}
with _base.html as follows
<div class="container-fluid p-0">
{% block content %}
{% endblock content %}
</div>
As you can see my I haven't touched the form "component". Why is the form not working?
Note: I have configured my static files properly, i.e directories mentioned in settings.py
I had setup to redirect to the home page, but the link that is getting passed in to the url is:
http://localhost:8000/accounts/login/?csrfmiddlewaretoken=XgEmrXg1fMJfOoPSnDyuY733MrWTxjaAWHnCnej9sFI6buue93sMgggrwIsTOibd&login=adminsav%40email.com&password=testpass123
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
My all pages are inheriting from base.html file. However I want my about page to be slightly different.
Majority of the pages are having
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
<div>
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">
{{ message }}
</div>
{% endfor %}
{% endif %}
{% block content %}{% endblock %}
</div>
<div class="col-md-4">
<div class="content-section">
<h3>Our Sidebar</h3>
<p class='text-muted'>You can put any information here you'd like.
<ul class="list-group">
<li class="list-group-item list-group-item-light">Latest Posts</li>
<li class="list-group-item list-group-item-light">Announcements</li>
<li class="list-group-item list-group-item-light">Calendars</li>
<li class="list-group-item list-group-item-light">etc</li>
</ul>
</p>
</div>
</div>
</div>
</main>
But about page I want the above code of block like
<main role="main" class="container">
<div>
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">
{{ message }}
</div>
{% endfor %}
{% endif %}
{% block content %}{% endblock %}
</div>
</main>
So is there a way the second block of code is only executed when the page is "about.html"
else the first block should be executed.
I can do these changes if I do not inherit about from base.html, but then I will be repeating a lot of lines of code. That is why I am looking for another approach
EDIT
wondering if something like "{% if url == 'blog-about' %}" exists
If you don't want the sidebar to not appear, you can create another html file called sidebar.html and insert the sidebar code, and another html file called message.html and insert the message template.
Then include this tag in all of your pages {% include sidebar.html %} and {% include message.html %} and leave it for your about.html.
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.
Currently for every article in articles a new div with class span4 is created.
Instead for each row I would like to limit it's content to three span's and create a new row once that limit has been reached. How can I best implement this?
{% extends "base.html" %}
{% block content %}
<div class="container-fluid">
<legend></legend>
<div class="row-fluid" id="main">
{% for article in articles %}
<div class="span4">
<div class="thumbnail">
<img src="http://placehold.it/300x150/483CB4">
<div class="caption">
<h4>{{ article.title }}</h4>
<p> {{ article.summary }}</p>
</div>
<legend></legend>
<a class="btn" href="#"><i class="icon-thumbs-up"></i></a>
<a class="btn" href="#"><i class="icon-thumbs-down"></i></a>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
Goal:
<div class="row">
<div class="span4">article[0]</div>
<div class="span4">article[1]</div>
<div class="span4">article[2]</div>
</div>
<div class="row">
<div class="span4">article[3]</div>
<div class="span4">article[4]</div>
<div class="span4">article[5]</div>
</div>
The best way to do this is to use the built in batch filter to break up your list into groups of three:
{% for article_row in articles | batch(3, ' ') %}
<div class="row">
{% for article in article_row %}
<div class="span4">{{ article }}</div>
{% endfor %}
</div>
{% endfor %}
You can use loop.index0 and loop.last inside the for loop. Here is the for-loop documentation.
Example:
{% extends "base.html" %}
{% block content %}
<div class="container-fluid">
<legend></legend>
<div class="row-fluid" id="main">
{% for article in articles %}
{% if loop.index0 % 3 == 0 %}
<div class="row">
{% endif %}
<div class="span4">
...
</div>
{% if loop.index0 % 3 == 2 or loop.last %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% endblock %}
The loop.last clause should close the last row even if there were less than 3 items. <div> should start when loop.index0 gives 0 as the remainder and should end when 2 is the remainder
Another alternative would be to group the items into rows before passing them into the template, then you can just issue two for-loops one inside the other.