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!
Related
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 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') }}
{%comment%}
<header class="section-header">
<h1 class="section-header__title">{{ page.title }}</h1>
</header>
{%endcomment%}
{% comment %}
Regular page content goes here.
{% endcomment %}
<div class="rte">
{{ page.content }}
</div>
<div class="cold-first-sec">
<div class="cold-video-icon">
<img src="{{ 'play-btn-icon.png' | asset_url }}"/>
{% comment %} <img src="{{ '1.gif' | asset_url }}"/> {% endcomment %}
</div>
</div>
<section class="section-contect-three container12">
{{ pages.cold-pressed-ocntent-2.content }}
</section>
<section class="section-cold-three container12">
{{ pages.cold-pressed-content-3.content }}
</section>
I am looking for pages.cold-pressed-content-3.content but it is not listed as a file in my theme. I have searched in Layout, Templates, Sections, Snippets, Assets, Config, Locales. But it is not there, where could it be, what am i missing ?
I had to go to settings_data.json, this is where all the relations are made, is like a list of aliases. And I found the correct template there.
I am new to Jekyll. I know that Jekyll supports to show recent post with the following code:
<div id="recent-posts" class="recent-posts">
{% for this_post in paginator.posts %}
<div class="post">
<a href="{{ this_post.url }}">
<h2 class="post-title">{{ this_post.title }}</h2>
</a>
{% include category_info %}
{% include source_info %}
</div>
{% endfor %}
</div>
But I would like not to show a category of posts, saying the category name is "notshowing". How can I make it?
To avoid showing a specific category you can use the unless filter:
executes a block of code only if a certain condition is not met (that
is, if the result is false).
So for example, inside the for loop, use {% unless post.categories contains "notshowing"%}
In your example, using the site posts site.posts instead of paginator.posts (you can adjust that to fit what you need) it would look like:
<div id="recent-posts" class="recent-posts">
{% for post in site.posts %}
{% unless post.categories contains "notshowing"%}
<div class="post">
<a href="{{ post.url }}">
<h2 class="post-title">{{ post.title }}</h2>
</a>
</div>
{% endunless %}
{% endfor %}
</div>
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.