As for now I am following a video to create a blog with django. But, I have problem attaching the title, content, author and date on the template which I had downloaded from colorlib. I used the method below in the index.html file but they do now show:
{% extends 'base.html' %}
{% load static %}
{% block content %}
{% for post in object_list %}
<div class="site-section">
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-12">
<div class="section-title">
<h2>Editor's Pick</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="post-entry-1">
<img src="{% static 'images/img_h_1.jpg' %}" alt="Image" class="img-fluid">
<h2></h2>
<p>{{ obj.overview }}</p>
<div class="post-meta">
<span class="d-block">
{{ obj.author.user.username }} in {{ cat }}</span>
<span class="date-read">{{ obj.timestamp|timesince }} ago<span class="mx-1">•</span> 3 min read <span class="icon-star2"></span></span>
</div>
</div>
</div>
{% endfor %}
Assuming object_list is the list of posts. You instantiated the loop variable as post. Therefore post is the variable representing a post instead of obj which you try to access. So replace everywhere you have obj with post or you can make the loop variable obj instead. Either way
Since you are iterating through each post from the list of posts, so to access the value of each post, you should use {{ post.title }} to show the title of the post, {{ post.author.username }} to show the username of the author of the post, and so on.
Related
I am working with a bootstrap template for a django app
<div class="row">
<div class="col-12">
<div class="card-deck-wrapper">
<div class="card-deck">
{% if posts %}
{% for post in posts %}
<div class="card d-block">
<img class="card-img-top" src="{{ post.image }}" height="200">
<div class="card-body">
<h5 class="card-title">{{ post.title }}</h5>
<p class="card-text">{{ post.description }}</p>
<p class="card-text">
<small class="text-muted">{{ post.creation_date }}</small>
</p>
</div>
</div> <!-- end card-->
{% endfor %}
{% endif %}
</div> <!-- end card-deck-->
</div> <!-- end card-deck-wrapper-->
</div> <!-- end col-->
</div><!-- end row -->
Mi main target is to repeat each "card" just 3 times, otherwise the templates looks awful, but have no idea how to iterate just 3 times, and at the 4th, 7th, 10th, and so on time, create a new "card-deck" to continue with post 4-5-6, then another "card-deck" for post 7-8-9 and so on
Thank you!
I have changed it a little bit at least to know how many "card-deck" should it have in the views
def blogPost(request):
posts = Post.objects.filter(state=True)
numberOfPosts = len(posts)
addOneDeck = 0
if (numberOfPosts%3) > 0:
addOneDeck = 1
numberOfDecks = ((int(numberOfPosts/3))+addOneDeck)
context = {"posts":posts, "decks":numberOfDecks}
return render(request,"blog.html", context)
Are you looking for forloop counter in templates? django has builtin for that
{% for post in posts %}
{{ forloop.counter }} #The current iteration of the loop (1-indexed)
{{ forloop.counter0 }} #The current iteration of the loop (0-indexed)
{% if forloop.counter0|divisibleby:3 %}
<p>print {{ forloop.counter0 }}</p>
{% else %}
<p> do something else</p>
{% endif %}
{% endfor % }}
you can use within if else conditions then.
https://docs.djangoproject.com/en/3.1/ref/templates/builtins/#for
I have different styles of heading in a 5- column layout newspaper template. I want to apply different css to the title of each column. The queryset is the {% block content %}How can I iterate over the queryset objects and apply different css to each {{ post.title }} variable? Note: html truncated for brevity.
<div class="content">
<div class="columns">
{% block content %}
{% endblock %}
</div>
<div class="column">
<div class="head">
<span class="headline hl1">May the Force be with you</span>
<p><span class="headline hl2">Let go your conscious self and act on instinct</span></p>
</div>
</div>
</div>
i think that {% cicle %} will help you.
{% for o in some_list %}
<div class="{% cycle 'class1' 'class2' 'class3' %}">
...
</div>
{% endfor %}
more about built-in template tags you could read
https://docs.djangoproject.com/en/3.1/ref/templates/builtins/#cycle
I've run into an issue when using Jekyll (which uses the Liquid templating language), the plugin jekyll-paginate-v2 and offset.
The problem: I have a featured section on my blog that always shows the most recent post. The other posts appear below, 10 per page using paginate.
I tried to simply show them using {% for post in paginator.posts offset:1 %}, but this is flawed in two ways:
it only shows 9 posts per page instead of 10
it offsets the first post on each page, so that the 1st, 10th, 20th, etc. posts are hidden, which is not what I want
What I'm trying to achieve: a loop that always ignores the post at index 0 and shows everything else as it normally would.
Am I just using offset wrong, or is this a bug in jekyll-paginate-v2?
Right now I've "fixed" it by doing the following, but it's not ideal as the first page only shows 9 posts:
<div class="articles-showcase row post-list">
{% assign featuredpost = site.posts.first %}
{% for post in paginator.posts %}
{% if post == featuredpost %}
{% continue %}
{% else %}
<!-- Article Card -->
<div class="article-detail-box col-lg-6 col-md-6 col-sm-12 card-article-div" data-cat="{{post.category | join: ','}}">
<div class="card card-article box-shadow h-100">
<div class="img-div text-center post-card-header bg-gray">
<img src="{{ site.baseurl }}{{post.image}}" alt="{{post.title}}">
</div>
<div class="card-article-body">
<p class="author-name">{{post.author}} | {{ post.date | date: '%B %d, %Y' }}</p>
<a href="{{site.baseurl}}{{post.url}}">
<h5>{{post.title}}</h5>
</a>
<div class="article-description">{{post.content}}</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
I raised this as an issue to the jekyll-paginate-v2 developers, and it has now been solved: https://github.com/sverrirs/jekyll-paginate-v2/issues/100
As a quick fix you should be able to add a front-matter property to the latest post manually:
---
layout: page
pagination:
enabled: false
---
Otherwise, you either have to exclude the paginator-v2 plugin and write your own logic for pagination or else extend the plugin in your _plugins dir so that the posts data sent to the paginate plugin already excludes the first (actually last because the reverse sorting will be done afterwards.) post.
I've hacked together a flawed solution that I'm using until something better comes along. I'll share it here for now:
<div class="articles-showcase row post-list">
{% if paginator.page == 1 %}
{% for post in site.posts limit:11 %}
{% if post == featuredpost %}
{% continue %}
{% else %}
<!-- Article Card -->
<div class="article-detail-box col-lg-6 col-md-6 col-sm-12 card-article-div" data-cat="{{post.category | join: ','}}">
<div class="card card-article box-shadow h-100">
<div class="img-div text-center post-card-header bg-gray">
<img src="{{ site.baseurl }}{{post.image}}" alt="{{post.title}}">
</div>
<div class="card-article-body">
<p class="author-name">{{post.author}} | {{ post.date | date: '%B %d, %Y' }}</p>
<a href="{{site.baseurl}}{{post.url}}">
<h5>{{post.title}}</h5>
</a>
<div class="article-description">{{post.content}}</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
{% endif %}
{% if paginator.page > 1 %}
{% for post in paginator.posts %}
<!-- Article Card -->
<div class="article-detail-box col-lg-6 col-md-6 col-sm-12 card-article-div" data-cat="{{post.category | join: ','}}">
<div class="card card-article box-shadow h-100">
<div class="img-div text-center post-card-header bg-gray">
<img src="{{ site.baseurl }}{{post.image}}" alt="{{post.title}}">
</div>
<div class="card-article-body">
<p class="author-name">{{post.author}} | {{ post.date | date: '%B %d, %Y' }}</p>
<a href="{{site.baseurl}}{{post.url}}">
<h5>{{post.title}}</h5>
</a>
<div class="article-description">{{post.content}}</div>
</div>
</div>
</div>
{% endfor %}
{% endif %}
</div>
The main problem with it is the 2nd paginated page shows the last article on the 1st page again. For me that's better than only showing 9 posts on the first page, however. Any better solution would be greatly appreciated!
I have a working solution for a template that allows for optional sidebars. Depending on the options selected by the user; significant DOM manipulations occur.
The working solution is unnecessarily large and features some code duplication. It also doesn't extend nicely.
I'm looking for a far more generic solution. One that allows for easier extending or abstracting so as to not have to repeat myself for every page that features a sidebar.
The Working Solution
{% extends "app/base.html" %}
{% load wagtailcore_tags %}
{% block content %}
{% if self.sidebar == "left" %}
<div class="row">
<div class="4u 12u(mobile)">
{% include "app/includes/sidebar.html" with sidebar_items=self.sidebar_items.all %}
</div>
<div class="8u 12u(mobile) important(mobile)">
<article class="box post">
{% include "app/includes/banner.html" with feed_image=self.feed_image only %}
{{ self.body|richtext }}
{% include "app/includes/related_links.html" with related_links=self.related_links.all only %}
</article>
</div>
</div>
{% elif self.sidebar == "right" %}
<div class="row">
<div class="8u 12u(mobile)">
<article class="box post">
{% include "app/includes/banner.html" with feed_image=self.feed_image only %}
{{ self.body|richtext }}
{% include "app/includes/related_links.html" with related_links=self.related_links.all only %}
</article>
</div>
<div class="4u 12u(mobile)">
{% include "app/includes/sidebar.html" with sidebar_items=self.sidebar_items.all %}
</div>
</div>
{% else %}
<article class="box post">
{% include "app/includes/banner.html" with feed_image=self.feed_image only %}
{{ self.body|richtext }}
{% include "app/includes/related_links.html" with related_links=self.related_links.all only %}
</article>
{% endif %}
{% endblock %}
{% block content %} is first defined here in app/base.html:
<div id="main-wrapper">
<div class="container">
<!-- <article class="box post"> -->
{% block content %}{% endblock %}
<!-- {% include 'app/includes/prev_next.html' %} -->
<!-- </article> -->
</div>
</div>
And sidebar.html looks like this:
{% load wagtailimages_tags %}
{% for sidebar_item in sidebar_items %}
<section class="box">
{% image sidebar_item.image original as img %}
<img src="{{ img.url }}" alt="" />
<header>
<h3>{{ sidebar_item.title }}</h3>
</header>
<p>{{ sidebar_item.body }}</p>
{% if sidebar_item.button_text %}
<footer>
{{ sidebar_item.button_text }}
</footer>
{% endif %}
</section>
{% endfor %}
My initial attempt at generalising it was to try to do all of the conditionals in app/base.html but I faced issues when it came to optionally the location of {{ block content }}.
Any help greatly appreciated.
If the condition to decide type of sidebar are being decided and supplied by the views.py function serving the page, then the best approach would be to simply make different template for each different page.
This solution sounds overly simple, but if correctly modularized(in terms of all the common code being kept in a basefile and being extended as and when needed), this would be the best approach. Even though the number of other templates might increase, it will give shorter load times because of smaller HTML snippets.
In case you do not want the conditional decisions being handled by views.py , you can alternatively use AJAX, and asynchronously change the template being viewed without causing a reload.
Hope this helps!
I am trying to grasp how blog works in Shopify.
First of all I could not find a solution for having categories or sub categories for blog posts.
All I can do is create multiple blogs and consider them as categories. If I go with this option I have trouble displaying blog titles on home page along with each post so visitors can understand what kind of post it is. I have tried this with tag but in that case I have to sacrifice real usage of tags because a post used to have more than one tag in it. My code looks like:
<section class="trend-sec">
<div class="container">
<h2 class="sec-title">Trending</h2>
<div class="row">
{% for article in blogs.trending.articles limit:4 %}
<div class="col-md-3 col-sm-6">
<div class="img-wraper">
<a href="{{ article.url }}">
<div class="img-cap-lab">
<h4>{{ article.tags }}</h4>
</div>
{% if article.image %}
{% assign image_alt = article.title | escape %}
{{ article | img_url: 'medium' | img_tag: image_alt, 'article__image' | link_to: article.url }}
{% else %}
</div>
{% endif %}
<div class="img-desc">
<h3>{{ article.title }}</h3>
<h5>by {{ article.author }}, {{ article.published_at | date: "%b %d %Y" }}</h5>
</div>
</a>
</div>
</div>
{% endfor %}
</div>
</div>
</section>