I know a similar question might have been asked here a couple of times before, but I am still not able to find a solution to my problem with the answers provided. So I have five templates. index.html(base template), allposts.html, trending.html and religion.html and political.html. All make up different sections of the homepage complete with there own classes in the database. How do I create a template that extends all these templates? I.e merges all their contents, including data into one. I have tried extending trending.html, using index.html as the base, and then extending allposts.html using trending.html as the base, but the problem is I lose all the data associated to the new base template. Is there an easy way to do this?
religion.html
{% extends 'index.html' %}
{% block religion %}
<section class="category-section">
<div class="container" data-aos="fade-up">
<div class="section-header d-flex justify-content-between align-items-center mb-5">
<h2>Religion</h2>
<div>See All Religion</div>
</div>
<div class="row">
{% for religion in religions %}
{% if forloop.counter < 11 %}
<div class="post-entry-1 col-2 mx-1">
<img src="{{religion.image.url}}" alt="" class="post_img">
<div class="post-meta">
<span class="date">{{religion.category}}</span>
<span class="mx-1">•</span>
<span>{{religion.created_at}}</span>
</div>
<h2 class="mb-2">{{religion.title}}</h2>
<span class="author mb-3 d-block">Ole Pundit</span>
<p class="mb-4 d-block">{{religion.body|truncatewords:20}}</p>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</section>
{% endblock %}
political.html
% extends 'index.html' %}
{% block content %}
<section class="category-section">
<div class="container" data-aos="fade-up">
<div class="section-header d-flex justify-content-between align-items-center mb-5">
<h2>Politics</h2>
<div>See All Politics</div>
</div>
<div class="row">
{% for politic in politics%}
{% if forloop.counter < 11 %}
<div class="post-entry-1 col-2 mx-1">
<img src="{{politic.image.url}}" alt="" class="post_img">
<div class="post-meta">
<span class="date">{{politic.category}}</span>
<span class="mx-1">•</span>
<span>{{politic.created_at}}</span>
</div>
<h2 class="mb-2">{{politic.title}}</h2>
<span class="author mb-3 d-block">Ole Pundit</span>
<p class="mb-4 d-block">{{politic.body| safe | truncatewords:20}}</p>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</section>
{% endblock %}
trending.html
{% extends 'index.html' %}
{% load static %}
{% block trending %}
<div class="col-lg-3 trendingslide">
<div class="trending">
<h3>Trending</h3>
<ul class="trending-post table">
{% for trendingpost in trendingposts %}
{% if forloop.counter < 6 %}
<li>
<a href="">
<span class="number count"></span>
<h3>{{trendingpost.title}}</h3>
<span class="author">OlePundit</span>
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
{% endblock %}
allposts.html
{% extends 'index.html' %}
{% load static %}
{% block allposts %}
{% for post in posts reversed %}
{% if forloop.counter < 5 %}
<div class="post-entry-1 col-lg-2 box mx-1">
<img src="{{post.image.url}}" class="post_img">
<div>
<div class="post-meta"><span class="date">{{post.category}}</span> <span class="mx-1">•</span> <span>{{post.created_at}}</span></div>
<h2>{{post.title}}</h2>
</div>
<p class="mb-4 d-block">{{post.body|truncatewords:75}}</p>
<div class="d-flex align-items-center author">
<div class="photo"><img src="{% static 'assets/img/person-1.jpg' %}" alt="" class="img-fluid"></div>
<div class="name">
<h3 class="m-0 p-0">OlePundit</h3>
</div>
</div>
</div>
{% endif %}
{% endfor %}
{% endblock %}
index.html(base template)
<section id="posts" class="posts">
<div class="container" data-aos="fade-up">
<div class="row g-5">
{% block allposts %}
{% endblock %}
<!-- Trending Section -->
{% block trending %}
{% endblock %}
<!-- End Trending Section -->
</div>
<!-- End .row -->
</div>
</section> <!-- End Post Grid Section -->
<!-- ======= Politics Category Section ======= -->
{% block content %}
{% endblock %}
<!-- End Politics Category Section -->
<!-- ======= Religion Category Section ======= -->
{% block religion %}
{% endblock %}
<!-- End Religion Category Section -->
views.py
def allposts(request):
posts = Post.objects.all()
return render(request, 'allposts.html', {'posts':posts})
def trending(request):
trendingposts = Post.objects.all()
return render(request, 'trending.html',{'trendingposts':trendingposts})
def political(request):
politics = Politics.objects.all()
return render(request, 'Politics/political.html', {'politics':politics})
def religion(request):
religions = Religion.objects.all()
return render(request, 'Religion/religion.html', {'religions':religions})
```
Related
I made my macbook disk format.
After the format, I included my project.
However, photos are not displayed on the project page.
If I go to a specific product, (single page) this is a photo.
The logo is also visible.
Pictures are not displayed to me only collectively.
Safari didn't see 'css/mdb.min.css'
Maybe I don't have something installed?
Before, everything worked.
Here photo display
product.html
{% extends 'base.html' %}
{% load static %}
{% block title %} {{ product.name }} - PVB {% endblock %}
{% block content %}
<main class="mt-5 pt-4">
<div class="container dark-grey-text mt-5">
<!--Grid row-->
<div class="row wow fadeIn">
<!--Grid column-->
<div class="col-md-6 mb-4">
<img src="{{ product.photo.url }}" class="img-fluid" alt="">
</div>
<!--Grid column-->
<div class="col-md-6 mb-4">
<!--Content-->
<div class="p-4">
<div>
<h2>{{product.product_name}}</h2><hr>
<h5><p>Description</p></h5>
<p class="text-justify"><h6>{{product.description}}</h6></p>
<p class="text-justify"><h6>Weight: {{product.weight}}g</h6></p><hr>
</div>
</div>
</div>
</div>
<hr>
</div>
</main>
{% endblock %}
here no
products.html
{% extends 'base.html' %}
{% load static %}
{% block title %} Offer - PVB {% endblock %}
{% block content %}
<section id="marks">
<div class="container">
<header>
<h1>Our Offer</h1>
</header>
</div>
</section>
<!-- Offers -->
<section class="text-center mb-4 py-4">
<div class="container">
<div class="row">
{% if products %}
{% for product in products %}
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<div class="view overlay">
<img src="{{ product.photo.url }}" class="card-img-top" alt="">
<a href="{% url 'product' product.id %}">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<div class="card-body text-center">
<h6 class="grey-text">{{ product.category }}</h6>
<h5>
<strong>
{{ product.product_name }}
</strong>
</h5>
</div>
</div>
</div>
<!--Grid column-->
{% endfor %}
{% else %}
<div class="col-sm-12 sm-12">
<p>No Products Available</p>
</div>
{% endif %}
</div>
</div>
</section>
{% endblock %}
Check your media folder , May be its empty
I am working on library website in which I want to display data from database which is Book name and description. But I'm not able to do that. Here is my code
views.py
from django.shortcuts import render
from .models import *
def index(request):
book_list = Book.objects.all()
return render(request,template_name='index.html', context={'book_list':book_list})
index.html
{% extends "base_generic.html" %}
{% block new_books %}
{% for b in book_list %}
<div class="card">
<img class="card-img-top" src=".." alt="Image">
<div class="card-body">
<h5 class="card-title">{{ book_list }} </h5>
<p class="card-text">Hello this is card text</p>
<a class="btn btn-primary">View this book</a>
</div>
</div>
{% endfor %}
{% endblock %}
You should work with b variable instead of book_list inside of for loop.
If your Book model contains title field, your code might look like this:
{% extends "base_generic.html" %}
{% block new_books %}
{% for b in book_list %}
<div class="card">
<img class="card-img-top" src=".." alt="Image">
<div class="card-body">
<h5 class="card-title">{{ b.title }} </h5>
<p class="card-text">Hello this is card text</p>
<a class="btn btn-primary">View this book</a>
</div>
</div>
{% endfor %}
{% endblock %}
I have the following code in one of my templates. As you can see, there is a lot of repetition going on. Hence, I am wondering if I can somehow use Django Template to consolidate this code while achieving the same (or closely comparable) result when it comes to HTML. Namely, I am interested if I can sort the todo entries into two different <ul> tags on the page, depending on the boolean value of todo.todo_completed.
{% block content %}
{% if todo_list %}
<ul class="list-group">
{% for todo in todo_list %}
{% if not todo.todo_completed %}
<li class="list-group-item">
<div class="row">
<div class="col-sm-5">
<a href="{% url 'list:todo-detail' todo.id %}" >{{ todo.todo_name }}</a>
</div>
<div class="col-sm-6">
</div>
<div class="col-sm-1">
{% bootstrap_icon "ok" %}
{% bootstrap_icon "remove-circle" %}
</div>
</div>
</li>
{% endif %}
{% endfor %}
</ul>
<ul class="list-group">
{% for todo in todo_list %}
{% if todo.todo_completed %}
<li class="list-group-item">
<div class="row">
<div class="col-sm-5">
{{ todo.todo_name }}
</div>
<div class="col-sm-6">
</div>
<div class="col-sm-1">
{% bootstrap_icon "ok" %}
{% bootstrap_icon "remove-circle" %}
</div>
</div>
</li>
{% endif %}
{% endfor %}
</ul>
I am trying to display the content in my portfolio.html file but nothing is showing up.
portfolio section in home.html:
<!-- portfolio -->
<section id="portfolio">
<div class="container">
<div class="row">
<div class="title">
Some of our work
</div>
<div class="caption">
Costco sample
</div>
{% block portfolio %} {% endblock %}
</div>
</div>
</section>
portfolio.html:
{% extends "home/home.html" %}
{% block portfolio %}
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#" class="portfolio-link">
<div class="portfolio-hover">
</div>
<img src="../static/images/roundicons.png">
</a>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
</div>
{% endblock %}
template format:
#####index.html
{% load staticfiles %}
{% block content %}{% endblock %}
#############
#####home.html
{% extends "index/index.html" %}
{% load staticfiles %}
{% block content %}
{% block portfolio %}{% endblock %}
{% endblock %}
#############
#####portfolio.html
{% extends "home/home.html" %}
{% block portfolio %}
CONTENT
{% endblock%}
{% endblock %}
#############
Missing content in the inspector:
Since your view is rendering home.html, then you don't want portfolio.html to extend it. Rather, you want home.html to include portfolio.html. Instead of using {% block portfolio %}, use {% include "portfolio.html" %}
However, if your view was going to render portfolio.html, then it would extend home.html.
You are trying to render content from portfolio.html in home.html...try the opposite.
You normally render the child templates
Read https://docs.djangoproject.com/en/1.7/topics/templates/ ...slowly :P. Bassically you create a basic generic template (parent - home.html in your case) that contains some blocks and then extend it and override the blocks on the children (portfolio.html)
This is what I currently has to check if the author has some photos in the related photo model:
{% if author.photo_set.count > 0 %}
<h2>...</h2>
<div style="clear: both;"></div>
<div class="author_pic">
{% for photo in author.photo_set.all %}
<img src="..." />
{% endfor %}
<div style="clear: both;"></div>
</div>
<div style="clear: both;"></div>
{% endif %}
Is this the right way or I can avoid having two queries somehow?
Thanks.
You can use the with tag to avoid multiple queries.
{% with author.photo_set.all as photos %}
{% if photos %}
<h2>...</h2>
<div style="clear: both;"></div>
<div class="author_pic">
{% for photo in photos %}
<img src="..." />
{% endfor %}
<div style="clear: both;"></div>
</div>
<div style="clear: both;"></div>
{% endif %}
{% endwith %}
There is also the empty tag that you can use within a for loop, but that probably doesn't apply to your example.
https://docs.djangoproject.com/en/dev/ref/templates/builtins/?from=olddocs#for-empty
<ul>
{% for athlete in athlete_list %}
<li>{{ athlete.name }}</li>
{% empty %}
<li>Sorry, no athlete in this list!</li>
{% endfor %}
<ul>
AS #pyrospade suggsted, you can look if the photos object exists. Or you could also check the length (check the length template tag) of the list of photo_set as follows:
{% if author.photo_set.all|length > 0 %}
<h2>...</h2>
<div style="clear: both;"></div>
<div class="author_pic">
{% for photo in author.photo_set.all %}
<img src="..." />
{% endfor %}
<div style="clear: both;"></div>
</div>
<div style="clear: both;"></div>
{% endif %}