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)
Related
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})
```
Am creating a website where user will be posting information in the site, but when I post in the site, all post appear in a single card while I want each post to appear in a separate card, How would I do this?? would I have to use Javascript in the front end or python in the back end to accomplish this, and how?
Am using python 3.6.8, and django 2.1.8, I have written a code but all post appear in single materialize card
views
def homepage(request):
return render(request=request,
template_name="main/home.html",
context={"documents":Documents.objects.all}
models
class Documents(models.Model):
docs_name = models.CharField(max_length=200)
police_station = models.CharField(max_length=200)
docs_details = models.TextField()
docs_pic = models.ImageField()
def __str__(self):
return self.docs_name
Home template
{% extends 'main/base.html' %}
{% block content %}
<a class="waves-effect waves-light btn" href="">button</a>
<div class="row">
<div class="col s12 m9" >
<div class="card">
<div class="card-image">
{% for Doc in documents %}
<p>{{Doc.docs_name}}</p>
<p>{{Doc.police_station}}</p>
<p>{{Doc.docs_details}}</p>
<p>{{Doc.docs_pic}}</p>
{% endfor %}
</div>
</div>
</div>
</div>
{% endblock %}
Try:
{% extends 'main/base.html' %}
{% block content %}
<a class="waves-effect waves-light btn" href="">button</a>
<div class="row">
<div class="col s12 m9" >
{% for Doc in documents %}
<div class="card">
<div class="card-image">
<p>{{Doc.docs_name}}</p>
<p>{{Doc.police_station}}</p>
<p>{{Doc.docs_details}}</p>
<p>{{Doc.docs_pic}}</p>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
You can achieve what you desire by simply adding the looping construct outside the <div class="card"> like this :
{% extends 'main/base.html' %}
{% block content %}
<a class="waves-effect waves-light btn" href="">button</a>
<div class="row">
<div class="col s12 m9" >
{% for Doc in documents %}
<div class="card">
<div class="card-image">
<p>{{Doc.docs_name}}</p>
<p>{{Doc.police_station}}</p>
<p>{{Doc.docs_details}}</p>
<p>{{Doc.docs_pic}}</p>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
This way your card section alone repeats multiple times.
Earlier since the loop was within the card you got all the items within the same card.
I am following this tutorial on building a basic blog using the Django CMS and am encountering a strange behavior. It all started when I discovered that the Content area was not being created in the Structure section of the CMS. While investigating it, I discovered the strange behavior.
Here it is.
base.html:
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
{% block content %}{% endblock %}
</div>
</div>
</div>
<hr>
content.html:
{% extends "base.html" %}
{% load cms_tags %}
{% block content %}
{% placeholder content or%}
{% endplaceholder %}
{% endblock content %}
This configuration above displays no Content block on the Structure page of the CMS. However, if I change the base.html snippet to the following, it works.
base.html:
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
{% placeholder content or%}
{% endplaceholder %}
</div>
</div>
</div>
<hr>
Could someone tell me why this happens? What am I missing in how Django handles the template blocks? It appears to me that the two cases should be treated identically. Yet, the result is obviously different. The tutorial claims that I should be changing the content.html side. However, as illustrated above, that does not work.
Any elucidation is appreciated!
I was able to resolve this using the following modifications.
base.html:
<!-- Main Content -->
{% placeholder content or %}
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
{% block content %}{% endblock %}
</div>
</div>
</div>
<hr>
{% endplaceholder %}
content.html:
{% extends "base.html" %}
{% load cms_tags %}
{% block content %}
{% endblock content %}
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 have the following code in a template and am having difficulty showing when a user is logged in. I will be able to login, but when I revisit the page, it shows that I'm still not authenticated.
{% extends "base.html" %}
{% load catalog_tags %}
{% block site_wrapper %}
<div id = "main">
Skip to main content
<div id = "banner">
<div class="bannerIEPadder">
<div class="cart_box">
{% cart_box request %}
</div>
</div>
</div>
<div style="float:right;">[search box goes here]</div>
<div id="navigation">
<div class="navIEPadder">
<!--navigation tabs at the top of each page -->
{% comment %}{% include "tags/navigation.html" %} {% endcomment %}
{% category_list request.path %}
</div>
</div>
<div id="middle">
<div id="sidebar">
<!--<div class="sidebarIEPadder">[search box goes here]</br>
{% comment %}{% category_list request.path %}{% endcomment %}
</div>-->
</div>
<div id="content">
<!-- <a name = "content"></a>-->
<div class="contentIEPadder">
{% block content %}{% endblock %}
</div>
</div>
</div>
<div id="footer">
<div class="footerIEPadder">
{% footer_links %}
</div>
</div>
</div>
{% endblock %}
And here's the file it references. Since this will be an extension of all templates, is there something I need to consider?
###category_list.html
<!--<h3>Categories</h3>-->
<!--<ul id="categories">-->
<ul>
{% with active_categories as cats %}
{% for c in cats %}
<li>
{% comment %}
{% ifequal c.get_absolute_url request_path %}
{{c.name}}
{% else %}
{% endcomment %}
<div>{{c.name}}</div>
{% comment %}{% endifequal %}{% endcomment %}
</li>
{% endfor %}
<div class="fr">
<ul>
<li>
{% if user.is_authenticated %}
Logout
{% else %}
Login
{% endif %}
</li>
</div>
{% endwith %}
</ul>
<div class="cb"></div>
Am I missing something here?
You need to pass a RequestContext to the template. The easiest way to do this is to import django.shortcuts and use the render method in your view:
return render(request, "my_template.html")
Is django.contrib.auth.context_processors.auth in your TEMPLATE_CONTEXT_PROCESSORS setting.py?
Do you use requestContext rendering template?
Check that sessions are enabled: MIDDLEWARE_CLASSES should contains 'django.contrib.sessions.middleware.SessionMiddleware'