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
Related
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.
I have a few page templates which need to include the same partial numerous times but with different content. I've had a look at looping this, however, they're not necessarily going to be in the concurrent order.
For example my page template will look like this
{% extends "layout.html" %}
{% set page = inner %}
{% block content %}
{% include "partials/image-text-block.html" %}
{% include "partials/example-block.html" %}
{% include "partials/image-text-block.html" %}
{% endblock %}
With my include file looking like
<div class="col-12 col-sm-6 col-sm-offset-1 image-text__copy">
<h2 class="navy">{{ page.imageText.title }}</h2>
<p class="light-body">{{ page.imageText.text }}</p>
<div class="button-wrap">
{{ page.imageText.buttonText }}
</div>
</div>
I'm currently using a json file to inject the content.
"inner": {
"imageText": {
"imageSide": "left",
"text": "dsauhf oaiuoags f"
}
}
What would be the best way to provide different content to each include please?
Thanks in advance!
try using setting different variable values
Input:
{% set sectionHeader = { title: 'Title 1', subtitle: 'Subtitle 1' } %}
{% include "_partials/section-header.html" %}
{% set sectionHeader = { title: 'Title 2', subtitle: 'Subtitle 2' } %}
{% include "_partials/section-header.html" %}
_partials/section-header.html
<header class="section-header">
<h3 class="section-title">{{sectionHeader.title}}</h3>
<p class="section-subtitle">{{sectionHeader.subtitle}}</p>
</header>
Output:
<header class="section-header">
<h3 class="section-title">Title 1</h3>
<p class="section-subtitle">Subtitle 1</p>
</header>
<header class="section-header">
<h3 class="section-title">Title 2</h3>
<p class="section-subtitle">Subtitle 2</p>
</header>
or you could use macros
article.njk
{% macro articleMacro(title) %}
<article>
<header>{{title}}</header>
<p>article body</p>
<footer></footer>
</article>
{% endmacro %}
page.njk
{% import "article.njk" as article %}
{{ article('header one') }}
{{ article('header two') }}
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 want to arrange the following Figure1 content into horizon grid view, here content coming into vertical so, how to arrange into horizontal grid view, like Figure2
Figure1:
Figure2:
Here I only required the css class in div, Please tell the css class to arrange the grid into horizontal form.
Jinja2 Templates
_data_grid.html
This template, takes rows(number of data, like in the following Figure2 we have 5 data), and columns(Image Name, Type, Status, public, protected, Formate, size, Action), All these info comes from the database and django framework.
{% load i18n %}
{% with table.needs_form_wrapper as needs_form_wrapper %}
<div class="table_wrapper">
{% if needs_form_wrapper %}<form action="{{ table.get_full_url }}" method="POST">{% csrf_token %}{% endif %}
{% with columns=table.get_columns rows=table.get_rows %}
{% block grid %}
<grid id="{{table.slugify_name}}">
<div>
{% block grid_caption %}
<h3 class='table_title'>{{ table }}</h3>
{{ table.render_table_actions }}
{% endblock grid_caption %}
</div>
</br>
</br>
</br>
</br>
{% block grid_body %}
<div>
{% for row in rows %}
{{ row.render }}
{% empty %}
{{ table.get_empty_message }}
{% endfor %}
</div>
{% endblock grid_body %}
</grid>
{% endblock grid %}
{% endwith %}
{% if needs_form_wrapper %}</form>{% endif %}
</div>
{% endwith %}
_data_grid_cell.html
This template is used to fill the content,
{% if cell.inline_edit_mod and cell.update_allowed %}
{% else %}
{% if cell.inline_edit_available and cell.update_allowed %}
{% else %}
<ul>{{ cell.value }}</ul>
{% endif %}
{% endif %}
If you want to code the css your self flexbox will be what you are looking for. But I will be easier and probably cleaner to use css frameworks like Bootstrap, your code should look somthing like this, then you can add django template tags:
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4"><!--block 1--></div>
<div class="col-sm-4 col-md-4"><!--block 2--></div>
<div class="col-sm-4 col-md-4"><!--block 3--></div>
<div class="col-sm-4 col-md-4"><!--block 4--></div>
</div>
</div>
Check (Bootstrap Grid) for more details and explanation for the css classes.
How I can render template without extend? i have simple renderer and i want after findout this request is ajax just render goal data
my template:
{% extends "base.html" %}
{% load i18n %}
{% block extrahead %}
{% endblock extrahead %}
{% block content %}
<div class="itemBg">
<div class="itemTop">
<div class="itemDown">
<div class="rowContainer">
<div class="show att">
{{ msg }}
</div>
</div>
</div></div></div>
{% endblock %}
only i want this in render response for ajax request.
<div class="itemBg">
<div class="itemTop">
<div class="itemDown">
<div class="rowContainer">
<div class="show att">
{{ msg }}
</div>
</div>
</div></div></div>
this is my render interface
from flask import current_app, render_template
def render(template, **context):
"""
"""
return render_template(path(template), **context)
You are looking for the null-master fallback trick. Since request is available in the Jinja2 context, if you are using a library that sets the appropriate header you can simply do this:
{% if not request.is_xhr %}{% extends "base.html" %}{% endif -%}
{% load i18n %}
{% block content %}
<div class="itemBg">
<div class="itemTop">
<div class="itemDown">
<div class="rowContainer">
<div class="show att">
{{ msg }}
</div>
</div>
</div></div></div>
{% endblock %}
Put the block you want for AJAX in a separate template.
When you get an AJAX request, just render that new template. For non-AJAX requests, include it in the one that extends base.html.