Convert all templates and views to Jinja

bakerydemo/base/jinja2tags.py

@@ -0,0 +1,59 @@
+from django.template.context_processors import csrf
+from django.template.defaultfilters import (
+    cut,
+    date,
+    linebreaks,
+    pluralize,
+    slugify,
+    truncatewords,
+    urlencode,
+)
+from django.contrib.staticfiles.storage import staticfiles_storage
+from jinja2 import pass_context
+from jinja2.ext import Extension
+
+from wagtail.contrib.search_promotions.templatetags.wagtailsearchpromotions_tags import (
+    get_search_promotions,
+)
+
+from bakerydemo.base.templatetags.navigation_tags import (
+    breadcrumbs,
+    get_footer_text,
+    get_site_root,
+    top_menu,
+    top_menu_children,
+)
+from bakerydemo.base.templatetags.gallery_tags import gallery
+
+
+class BaseExtension(Extension):
+    def __init__(self, environment):
+        super().__init__(environment)
+        self.environment.globals.update(
+            {
+                "static": staticfiles_storage.url,
+                "csrf": csrf,
+                "get_search_promotions": get_search_promotions,
+                "breadcrumbs": pass_context(breadcrumbs),
+                "get_footer_text": pass_context(get_footer_text),
+                "get_site_root": pass_context(get_site_root),
+                "top_menu": top_menu,
+                "top_menu_children": top_menu_children,
+                "gallery": gallery,
+            }
+        )
+
+        self.environment.filters.update(
+            {
+                "cut": cut,
+                "date": date,
+                "linebreaks": linebreaks,
+                "pluralize": pluralize,
+                "slugify": slugify,
+                "truncatewords": truncatewords,
+                "urlencode": urlencode,
+            }
+        )
+
+
+base = BaseExtension

bakerydemo/base/templatetags/gallery_tags.py

@@ -1,15 +1,10 @@
-from django import template
 from wagtail.images.models import Image
 
-register = template.Library()
-
 
 # Retrieves a single gallery item and returns a gallery of images
-@register.inclusion_tag("tags/gallery.html", takes_context=True)
-def gallery(context, gallery):
+def gallery(gallery):
     images = Image.objects.filter(collection=gallery)
 
     return {
         "images": images,
-        "request": context["request"],
     }

bakerydemo/base/templatetags/navigation_tags.py

@@ -1,13 +1,8 @@
-from django import template
 from wagtail.models import Page, Site
 
 from bakerydemo.base.models import FooterText
 
-register = template.Library()
-# https://docs.djangoproject.com/en/3.2/howto/custom-template-tags/
 
-
-@register.simple_tag(takes_context=True)
 def get_site_root(context):
     # This returns a core.Page. The main menu needs to have the site.root_page
     # defined else will return an object attribute error ('str' object has no
@@ -35,8 +30,7 @@ def is_active(page, current_page):
 # Retrieves the top menu items - the immediate children of the parent page
 # The has_menu_children method is necessary because the Foundation menu requires
 # a dropdown class to be applied to a parent
-@register.inclusion_tag("tags/top_menu.html", takes_context=True)
-def top_menu(context, parent, calling_page=None):
+def top_menu(parent, calling_page=None):
     menuitems = parent.get_children().live().in_menu()
     for menuitem in menuitems:
         menuitem.show_dropdown = has_menu_children(menuitem)
@@ -51,14 +45,11 @@ def top_menu(context, parent, calling_page=None):
     return {
         "calling_page": calling_page,
         "menuitems": menuitems,
-        # required by the pageurl tag that we want to use within this template
-        "request": context["request"],
     }
 
 
 # Retrieves the children of the top menu items for the drop downs
-@register.inclusion_tag("tags/top_menu_children.html", takes_context=True)
-def top_menu_children(context, parent, calling_page=None):
+def top_menu_children(parent, calling_page=None):
     menuitems_children = parent.get_children()
     menuitems_children = menuitems_children.live().in_menu()
     for menuitem in menuitems_children:
@@ -75,27 +66,23 @@ def top_menu_children(context, parent, calling_page=None):
     return {
         "parent": parent,
         "menuitems_children": menuitems_children,
-        # required by the pageurl tag that we want to use within this template
-        "request": context["request"],
     }
 
 
-@register.inclusion_tag("tags/breadcrumbs.html", takes_context=True)
 def breadcrumbs(context):
-    self = context.get("self")
+    self = context.get("page")
     if self is None or self.depth <= 2:
         # When on the home page, displaying breadcrumbs is irrelevant.
         ancestors = ()
     else:
         ancestors = Page.objects.ancestor_of(self, inclusive=True).filter(depth__gt=1)
     return {
         "ancestors": ancestors,
-        "request": context["request"],
     }
 
 
-@register.inclusion_tag("base/include/footer_text.html", takes_context=True)
 def get_footer_text(context):
+    # Use together with base/include/footer_text.html.
     # Get the footer text from the context if exists,
     # so that it's possible to pass a custom instance e.g. for previews
     # or page types that need a custom footer

bakerydemo/blog/models.py

@@ -188,7 +188,7 @@ def tag_archive(self, request, tag=None):
             return redirect(self.url)
 
         posts = self.get_posts(tag=tag)
-        context = {"self": self, "tag": tag, "posts": posts}
+        context = {"page": self, "tag": tag, "posts": posts}
         return render(request, "blog/blog_index_page.html", context)
 
     def serve_preview(self, request, mode_name):

bakerydemo/jinja2/base.html

@@ -1,4 +1,3 @@
-{% load navigation_tags static wagtailuserbar %}
 <!DOCTYPE html>
 <html lang="en">
     <head>
@@ -12,7 +11,7 @@
                 {% endif %}
             {% endblock %}
             {% block title_suffix %}
-                | {{ settings.base.SiteSettings.title_suffix }}
+                | {{ settings("base.SiteSettings").title_suffix }}
             {% endblock %}
         </title>
         <meta name="description" content="{% block search_description %}{% if page.search_description %}{{ page.search_description }}{% endif %}{% endblock %}">
@@ -23,21 +22,20 @@
             <base target="_blank">
         {% endif %}
 
-        <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
-        <link rel="stylesheet" href="{% static 'css/font-marcellus.css' %}">
-        <link rel="stylesheet" href="{% static 'css/main.css' %}">
+        <link rel="stylesheet" href="{{ static('css/bootstrap.min.css') }}">
+        <link rel="stylesheet" href="{{ static('css/font-marcellus.css') }}">
+        <link rel="stylesheet" href="{{ static('css/main.css') }}">
     </head>
 
-    <body class="{% block body_class %}template-{{ self.get_verbose_name|slugify }}{% endblock %}">
-        {% wagtailuserbar %}
+    <body class="{% block body_class %}template-{{ page.get_verbose_name()|slugify }}{% endblock %}">
+        {{ wagtailuserbar() }}
 
         {% block header %}
             {% include "includes/header.html" %}
         {% endblock header %}
 
         {% block breadcrumbs %}
-            {# breadcrumbs is defined in base/templatetags/navigation_tags.py #}
-            {% breadcrumbs %}
+            {% include "tags/breadcrumbs.html" %}
         {% endblock breadcrumbs %}
 
         {% block messages %}
@@ -53,6 +51,6 @@
 
         {% include "includes/footer.html" %}
 
-        <script type="module" src="{% static 'js/main.js' %}"></script>
+        <script type="module" src="{{ static('js/main.js') }}"></script>
     </body>
 </html>

bakerydemo/jinja2/base/form_page.html

@@ -1,5 +1,4 @@
 {% extends "base.html" %}
-{% load wagtailcore_tags navigation_tags wagtailimages_tags %}
 
 {% block content %}
 
@@ -22,12 +21,12 @@ <h1 class="index-header__title">{{ page.title }}</h1>
     <div class="container">
         <div class="row">
             <div class="col-md-8 form-page">
-                {% comment %}
+                {#
         You could render your form using a Django rendering shortcut such as `{{ form.as_p }}` but that will tend towards unsemantic code, and make it difficult to style. You can read more on Django form at:
         https://docs.djangoproject.com/en/3.2/topics/forms/#form-rendering-options
-        {% endcomment %}
-                <form action="{% pageurl page %}" method="POST">
-                    {% csrf_token %}
+        #}
+                <form action="{{ pageurl(page) }}" method="POST">
+                    <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf(request).csrf_token }}">
                     {% if form.subject.errors %}
                         <ol>
                             {% for error in form.subject.errors %}
@@ -39,7 +38,7 @@ <h1 class="index-header__title">{{ page.title }}</h1>
                     {% for field in form %}
                         <div class="form-page__field" aria-required={% if field.field.required %}"true"{% else %}"false"{% endif %}>
 
-                            {{ field.label_tag }}{% if field.field.required %}<span class="required">*</span>{% endif %}
+                            {{ field.label_tag() }}{% if field.field.required %}<span class="required">*</span>{% endif %}
 
                             {% if field.help_text %}
                                 <p class="help">{{ field.help_text }}</p>

bakerydemo/jinja2/base/form_page_landing.html

@@ -1,5 +1,4 @@
 {% extends "base.html" %}
-{% load wagtailcore_tags %}
 
 {% block content %}
 

bakerydemo/jinja2/base/gallery_page.html

@@ -1,5 +1,4 @@
 {% extends "base.html" %}
-{% load wagtailimages_tags gallery_tags %}
 
 {% block content %}
     {% include "base/include/header-hero.html" %}
@@ -13,7 +12,7 @@
             </div>
         </div>
         <div class="gallery__grid">
-            {% gallery page.collection %}
+            {% include "tags/gallery.html" %}
         </div>
     </div>
 {% endblock content %}

bakerydemo/jinja2/base/home_page.html

@@ -1,19 +1,18 @@
 {% extends "base.html" %}
-{% load wagtailimages_tags wagtailcore_tags %}
 
 {% block content %}
     <div class="homepage">
 
         <div class="container-fluid hero">
-            {% image page.image fill-1920x600 class="hero-image" alt="" %}
+            {{ image(page.image, "fill-1920x600", class="hero-image", alt="") }}
             <div class="hero-gradient-mask"></div>
             <div class="container">
                 <div class="row">
                     <div class="col-md-6 col-md-offset-1 col-lg-5 home-hero">
                         <h1>{{ page.title }}</h1>
                         <p class="lead">{{ page.hero_text }}</p>
                         {% if page.hero_cta_link %}
-                            <a href="{% pageurl page.hero_cta_link %}" class="hero-cta-link">
+                            <a href="{{ pageurl(page.hero_cta_link) }}" class="hero-cta-link">
                                 {{ page.hero_cta }}
                             </a>
                         {% else %}
@@ -30,15 +29,16 @@ <h1>{{ page.title }}</h1>
                     {% if page.featured_section_1 %}
                         <h2 class="featured-cards__title">{{ page.featured_section_1_title }}</h2>
                         <ul class="featured-cards__list">
-                            {% for childpage in page.featured_section_1.specific.children|slice:"3" %}
+                            {% for page in page.featured_section_1.specific.children()[:3] %}
                                 <li>
-                                    {% include "includes/card/listing-card.html" with page=childpage %}
+                                    {% include "includes/card/listing-card.html" %}
                                 </li>
                             {% endfor %}
                         </ul>
                         <a class="featured-cards__link" href="/breads">
                             <span>View more of our breads</span>
-                            {% include "includes/chevron-icon.html" with class="featured-cards__chevron-icon" %}
+                            {% set class="featured-cards__chevron-icon" %}
+                            {% include "includes/chevron-icon.html" %}
                         </a>
                     {% endif %}
                 </div>
@@ -49,13 +49,11 @@ <h2 class="featured-cards__title">{{ page.featured_section_1_title }}</h2>
                             {% if page.promo_title %}
                                 <h2>{{ page.promo_title }}</h2>
                             {% endif %}
-                            {% if page.promo_text %}
-                                {{ page.promo_text|richtext }}
-                            {% endif %}
+                            {{ page.promo_text|richtext if page.promo_text }}
                         </div>
                     {% endif %}
                     {% if page.promo_image %}
-                        <figure>{% image page.promo_image fill-590x413-c100 %}</figure>
+                        <figure>{{ image(page.promo_image, "fill-590x413-c100") }}</figure>
                     {% endif %}
                 </div>
             </div>
@@ -76,8 +74,8 @@ <h2>{{ page.promo_title }}</h2>
                 <div class="col-md-12 locations-section">
                     {% if page.featured_section_2 %}
                         <h2 class="locations-section__title">{{ page.featured_section_2_title }}</h2>
-                        {% for childpage in page.featured_section_2.specific.children|slice:"3" %}
-                            {% include "includes/card/location-card.html" with page=childpage %}
+                        {% for page in page.featured_section_2.specific.children()[:3] %}
+                            {% include "includes/card/location-card.html" %}
                         {% endfor %}
                     {% endif %}
                 </div>
@@ -91,8 +89,9 @@ <h2 class="locations-section__title">{{ page.featured_section_2_title }}</h2>
                         <div class="col-md-12 blog-section">
                             <h2 class="blog-section__title">{{ page.featured_section_3_title }}</h2>
                             <div class="blog-section__grid">
-                                {% for childpage in page.featured_section_3.specific.children|slice:"6" %}
-                                    {% include "includes/card/picture-card.html" with page=childpage portrait=True %}
+                                {% for page in page.featured_section_3.specific.children()[:6] %}
+                                    {% set portrait=True %}
+                                    {% include "includes/card/picture-card.html" %}
                                 {% endfor %}
                             </div>
                         </div>

bakerydemo/jinja2/base/include/footer_text.html

@@ -1,4 +1,4 @@
-{% load wagtailcore_tags %}
+{% set footer_text=get_footer_text().footer_text %}
 
 <div class="copyright">
     {{ footer_text|richtext }}

bakerydemo/jinja2/base/include/header-blog.html

@@ -1,8 +1,6 @@
-{% load wagtailcore_tags wagtailimages_tags %}
-
 {% if page.image %}
     <div class="container-fluid hero hero--blog">
-        {% image page.image fill-1920x600 class="hero-image" alt="" %}
+        {{ image(page.image, "fill-1920x600", class="hero-image", alt="") }}
     </div>
 {% endif %}
 <div class="container">
@@ -19,7 +17,7 @@ <h1 class="index-header__title index-header__title--blog">{{ page.title }}</h1>
             {% endif %}
             {% if page.date_published %}
                 <div class="blog__published">
-                    {{ page.date_published }}
+                    {{ page.date_published|date("DATE_FORMAT") }}
                 </div>
             {% endif %}
         </div>

bakerydemo/jinja2/base/include/header-hero.html

@@ -1,8 +1,6 @@
-{% load wagtailcore_tags wagtailimages_tags %}
-
 {% if page.image %}
     <div class="container-fluid hero">
-        {% image page.image fill-1920x600 class="hero-image" alt="" %}
+        {{ image(page.image, "fill-1920x600", class="hero-image", alt="") }}
         <div class="hero__container">
             <h1 class="hero__title">{{ page.title }}</h1>
         </div>

bakerydemo/jinja2/base/include/header-index.html

@@ -1,5 +1,3 @@
-{% load wagtailcore_tags wagtailimages_tags %}
-
 <div class="container">
     <div class="row">
         <div class="col-md-12">

bakerydemo/jinja2/base/include/header.html

@@ -1,11 +1,9 @@
-{% load wagtailcore_tags wagtailimages_tags %}
-
 <div class="container">
     <div class="row">
         <div class="col-md-7 base-header">
             {% if page.image %}
                 <div class="image">
-                    {% image page.image width-500 as photo %}
+                    {% set photo=image(page.image, "width-500") %}
                     <img src="{{ photo.url }}" width="{{ photo.width }}" height="{{ photo.height }}" alt="{{ photo.alt }}" />
                 </div>
             {% endif %}