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,14 +66,11 @@ 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 = ()
@@ -90,12 +78,11 @@ def breadcrumbs(context):
         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 @@ class BlogIndexPage(RoutablePageMixin, Page):
             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 @@
     <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 @@
                     {% 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,11 +1,10 @@
 {% 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">
@@ -13,7 +12,7 @@
                         <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 @@
                     {% 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 @@
                             {% 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 @@
                 <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 @@
                         <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 @@
             {% 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 %}

bakerydemo/jinja2/base/preview/person.html

@@ -1,5 +1,4 @@
 {% extends "base.html" %}
-{% load wagtailimages_tags %}
 
 {% block title %}{{ object.first_name }} {{ object.last_name }} Preview{% endblock %}
 
@@ -9,7 +8,7 @@
 
 {% block content %}
     <div>
-        {% image object.image fill-200x200-c100 class="blog__avatar" %}
+        {{ image(object.image, "fill-200x200-c100", class="blog__avatar") }}
         <h2>{{ object.first_name }} {{ object.last_name }}</h2>
         <p>{{ object.job_title }}</p>
     </div>

bakerydemo/jinja2/base/standard_page.html

@@ -1,5 +1,4 @@
 {% extends "base.html" %}
-{% load wagtailimages_tags %}
 
 {% block content %}
     {% include "base/include/header-hero.html" %}

bakerydemo/jinja2/blocks/blockquote.html

@@ -1,5 +1,3 @@
-{% load wagtailimages_tags %}
-
-<blockquote><p class="text">{{ self.text }}</p>
-    <p class="attribute-name">{{ self.attribute_name}}</p>
+<blockquote><p class="text">{{ value.text }}</p>
+    <p class="attribute-name">{{ value.attribute_name}}</p>
 </blockquote>

bakerydemo/jinja2/blocks/embed_block.html

@@ -1,3 +1 @@
-{% load wagtailimages_tags %}
-
-{{ self }}
+{{ value|safe }}

bakerydemo/jinja2/blocks/heading_block.html

@@ -1,15 +1,15 @@
-{% comment %}
+{#
     Content is coming from the StandardBlock StreamField
     class within `blocks.py`
-{% endcomment %}
+#}
 
-{% if self.size == 'h2' %}
-    <h2>{{ self.heading_text }}</h2>
+{% if value.size == 'h2' %}
+    <h2>{{ value.heading_text }}</h2>
 
-{% elif self.size == 'h3' %}
-    <h3>{{ self.heading_text }}</h3>
+{% elif value.size == 'h3' %}
+    <h3>{{ value.heading_text }}</h3>
 
-{% elif self.size == 'h4' %}
-    <h4>{{ self.heading_text }}</h4>
+{% elif value.size == 'h4' %}
+    <h4>{{ value.heading_text }}</h4>
 
 {% endif %}

bakerydemo/jinja2/blocks/image_block.html

@@ -1,6 +1,4 @@
-{% load wagtailimages_tags %}
-
 <figure>
-    {% image self.image fill-600x338 loading="lazy" %}
-    <figcaption>{{ self.caption }} - {{ self.attribution }}</figcaption>
+    {{ image(value.image, "fill-600x338", loading="lazy") }}
+    <figcaption>{{ value.caption }} - {{ value.attribution }}</figcaption>
 </figure>

bakerydemo/jinja2/blocks/paragraph_block.html

@@ -1 +1 @@
-{{ self }}
+{{ value }}

bakerydemo/jinja2/blocks/recipe_step_block.html

@@ -1 +1 @@
-{{ self.text }}
+{{ value.text }}

bakerydemo/jinja2/blog/blog_index_page.html

@@ -1,5 +1,4 @@
 {% extends "base.html" %}
-{% load wagtailcore_tags navigation_tags wagtailimages_tags %}
 
 {% if tag %}
     {% block title %}
@@ -26,10 +25,10 @@
             </div>
         {% endif %}
 
-        {% if page.get_child_tags %}
+        {% if page.get_child_tags() %}
             <ul class="blog-tags">
                 <li><span class="blog-tags__pill blog-tags__pill--selected">All</span></li>
-                {% for tag in page.get_child_tags %}
+                {% for tag in page.get_child_tags() %}
                     <li><a class="blog-tags__pill" aria-label="Filter by tag name {{ tag }}" href="{{ tag.url }}">{{ tag }}</a></li>
                 {% endfor %}
             </ul>

bakerydemo/jinja2/blog/blog_page.html

@@ -1,5 +1,4 @@
 {% extends "base.html" %}
-{% load navigation_tags wagtailimages_tags %}
 
 {% block content %}
 
@@ -12,7 +11,7 @@
                     {% if page.authors %}
                         <div class="blog__avatars">
                             {% for author in page.authors %}
-                                <div class="blog__author">{% image author.image fill-50x50-c100 class="blog__avatar" %}
+                                <div class="blog__author">{{ image(author.image, "fill-50x50-c100", class="blog__avatar") }}
                                     {{ author.first_name }} {{ author.last_name }}</div>
                             {% endfor %}
                         </div>

bakerydemo/jinja2/breads/bread_page.html

@@ -1,5 +1,4 @@
 {% extends "base.html" %}
-{% load wagtailimages_tags %}
 
 {% block content %}
     {% include "base/include/header-hero.html" %}
@@ -32,7 +31,7 @@
                                 <p class="bread-detail__meta-title">Type</p>
                                 <p class="bread-detail__meta-content">{{ page.bread_type }}</p>
                             {% endif %}
-                            {% with ingredients=page.ingredients.all %}
+                            {% with ingredients=page.ingredients.all() %}
                                 {% if ingredients %}
                                     <h4>Ingredients</h4>
                                     <ul>

bakerydemo/jinja2/breads/breads_index_page.html

@@ -1,14 +1,13 @@
 {% extends "base.html" %}
-{% load wagtailcore_tags navigation_tags wagtailimages_tags %}
 
 {% block content %}
     {% include "base/include/header-index.html" %}
 
     <div class="container">
         <ul class="bread-list">
-            {% for bread in breads %}
+            {% for page in breads %}
                 <li>
-                    {% include "includes/card/listing-card.html" with page=bread %}
+                    {% include "includes/card/listing-card.html" %}
                 </li>
             {% endfor %}
         </ul>
@@ -18,7 +17,8 @@
         <div class="container">
             <div class="row">
                 <div class="col-sm-12">
-                    {% include "includes/pagination.html" with subpages=breads %}
+                    {% set subpages=breads %}
+                    {% include "includes/pagination.html" %}
                 </div>
             </div>
         </div>

bakerydemo/jinja2/includes/card/blog-listing-card.html

@@ -1,23 +1,21 @@
-{% load wagtailcore_tags navigation_tags wagtailimages_tags %}
-
 <div class="blog-listing-card">
-    <a class="blog-listing-card__link" href="{% pageurl blog %}">
+    <a class="blog-listing-card__link" href="{{ pageurl(blog) }}">
         {% if blog.image %}
             <figure class="blog-listing-card__image">
-                {% image blog.image fill-322x247-c100 loading="lazy" %}
+                {{ image(blog.image, "fill-322x247-c100", loading="lazy") }}
             </figure>
         {% endif %}
         <div class="blog-listing-card__contents">
             <h2 class="blog-listing-card__title">{{ blog.title }}</h2>
             {% if blog.introduction %}
-                <p class="blog-listing-card__introduction">{{ blog.introduction|truncatewords:15 }}</p>
+                <p class="blog-listing-card__introduction">{{ blog.introduction|truncatewords(15) }}</p>
             {% endif %}
             <p class="blog-listing-card__metadata">
                 {% if blog.date_published %}
-                    {{ blog.date_published }} by
+                    {{ blog.date_published|date("DATE_FORMAT") }} by
                 {% endif %}
-                {% for author in blog.authors %}
-                    {{ author }}{% if not forloop.last %}, {% endif %}
+                {% for author in blog.authors() %}
+                    {{ author }}{% if not loop.last %}, {% endif %}
                 {% endfor %}
             </p>
         </div>

bakerydemo/jinja2/includes/card/listing-card.html

@@ -1,10 +1,8 @@
-{% load wagtailimages_tags %}
-
 <div class="listing-card">
     <a class="listing-card__link" href="{{ page.url }}">
         {% if page.image %}
             <figure class="listing-card__image">
-                {% image page.image fill-180x180-c100 loading="lazy" %}
+                {{ image(page.image, "fill-180x180-c100", loading="lazy") }}
             </figure>
         {% endif %}
         <div class="listing-card__contents">

bakerydemo/jinja2/includes/card/location-card.html

@@ -1,14 +1,12 @@
-{% load wagtailimages_tags %}
-
 <div class="location-card col-sm-4">
     <a class="location-card__link" href="{{page.url}}">
         <figure class="location-card__image">
-            {% image page.image fill-430x320-c100 loading="lazy" %}
+            {{ image(page.image, "fill-430x320-c100", loading="lazy") }}
         </figure>
         <div class="location-card__contents">
             <h3 class="location-card__title">{{page.title}}</h3>
             {% if page.introduction %}
-                <p class="location-card__text">{{ page.introduction|truncatewords:15 }}</p>
+                <p class="location-card__text">{{ page.introduction|truncatewords(15) }}</p>
             {% endif %}
         </div>
     </a>

bakerydemo/jinja2/includes/card/picture-card.html

@@ -1,12 +1,10 @@
-{% load wagtailimages_tags %}
-
 <div class="picture-card">
     <a class="picture-card__link" href="{{ page.url }}">
         <figure class="picture-card__image">
             {% if portrait %}
-                {% image page.image fill-433x487-c100 loading="lazy" %}
+                {{ image(page.image, "fill-433x487-c100", loading="lazy") }}
             {% else %}
-                {% image page.image fill-645x480-c75 loading="lazy" %}
+                {{ image(page.image, "fill-645x480-c75", loading="lazy") }}
             {% endif %}
             <div class="picture-card__contents">
                 <h3 class="picture-card__title">{{ page.title }}</h3>

bakerydemo/jinja2/includes/footer.html

@@ -1,36 +1,36 @@
-{% load navigation_tags static %}
-
 <footer class="container">
     <div class="row">
         <div class="col-sm-12">
-            {% with twitter_url=settings.base.GenericSettings.twitter_url github_url=settings.base.GenericSettings.github_url organisation_url=settings.base.GenericSettings.organisation_url %}
-                {% if twitter_url or github_url or organisation_url %}
-                    <ul class="list-inline">
-                        {% if github_url %}
-                            <li class="footer__icon">
-                                <a href="{{ github_url }}" target="_blank" rel="noreferrer" aria-label="View Wagtail's source code on GitHub">
-                                    <svg aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 496 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
-                                </a>
-                            </li>
-                        {% endif %}
-                        {% if twitter_url %}
-                            <li class="footer__icon">
-                                <a href="{{ twitter_url }}" target="_blank" rel="noreferrer" aria-label="Wagtail's official Twitter account">
-                                    <svg aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
-                                </a>
-                            </li>
-                        {% endif %}
-                        {% if organisation_url %}
-                            <li class="footer__icon">
-                                <a href="{{ organisation_url }}" target="_blank" rel="noreferrer" aria-label="Wagtail's official website">
-                                    <svg aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 640 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>
-                                </a>
-                            </li>
-                        {% endif %}
-                    </ul>
-                {% endif %}
-            {% endwith %}
-            {% get_footer_text %}
+            {% set generic_settings=settings("base.GenericSettings") %}
+            {% set twitter_url= generic_settings.twitter_url %}
+            {% set github_url= generic_settings.github_url %}
+            {% set organisation_url= generic_settings.organisation_url %}
+            {% if twitter_url or github_url or organisation_url %}
+                <ul class="list-inline">
+                    {% if github_url %}
+                        <li class="footer__icon">
+                            <a href="{{ github_url }}" target="_blank" rel="noreferrer" aria-label="View Wagtail's source code on GitHub">
+                                <svg aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 496 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
+                            </a>
+                        </li>
+                    {% endif %}
+                    {% if twitter_url %}
+                        <li class="footer__icon">
+                            <a href="{{ twitter_url }}" target="_blank" rel="noreferrer" aria-label="Wagtail's official Twitter account">
+                                <svg aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
+                            </a>
+                        </li>
+                    {% endif %}
+                    {% if organisation_url %}
+                        <li class="footer__icon">
+                            <a href="{{ organisation_url }}" target="_blank" rel="noreferrer" aria-label="Wagtail's official website">
+                                <svg aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 640 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>
+                            </a>
+                        </li>
+                    {% endif %}
+                </ul>
+            {% endif %}
+            {% include "base/include/footer_text.html" %}
         </div>
     </div>
 </footer>

bakerydemo/jinja2/includes/header.html

@@ -1,5 +1,3 @@
-{% load navigation_tags %}
-
 <div class="header clearfix">
     <div class="container">
         <div class="navigation" data-navigation>
@@ -21,8 +19,7 @@
                 <a href="/" class="navigation__logo">The Wagtail Bakery</a>
                 <ul class="navigation__items nav-pills">
                     {# main_menu is defined in base/templatetags/navigation_tags.py #}
-                    {% get_site_root as site_root %}
-                    {% top_menu parent=site_root calling_page=self %}
+                    {% include "tags/top_menu.html" %}
                 </ul>
                 <form action="/search" method="get" class="navigation__mobile-search" role="search">
                     <label for="mobile-search-input" class="u-sr-only">Search the bakery</label>
@@ -38,8 +35,7 @@
             <nav class="navigation__desktop" aria-label="Main">
                 <ul class="navigation__items nav-pills">
                     {# main_menu is defined in base/templatetags/navigation_tags.py #}
-                    {% get_site_root as site_root %}
-                    {% top_menu parent=site_root calling_page=self %}
+                    {% include "tags/top_menu.html" %}
                 </ul>
             </nav>
 

bakerydemo/jinja2/includes/pagination.html

@@ -1,5 +1,3 @@
-{% load navigation_tags %}
-
 <nav class="pagination" aria-label="Pagination">
     <ul class="pagination__list">
         {% if subpages.has_previous %}

bakerydemo/jinja2/locations/location_page.html

@@ -1,5 +1,4 @@
 {% extends "base.html" %}
-{% load wagtailimages_tags navigation_tags %}
 
 {% block content %}
     {% include "base/include/header-hero.html" %}
@@ -25,14 +24,14 @@
                     <div class="row">
                         <div class="bread-detail__meta">
                             <p class="location__meta-title">Operating Status</p>
-                            {% if page.is_open %}
+                            {% if page.is_open() %}
                                 This location is currently open.
                             {% else %}
                                 Sorry, this location is currently closed.
                             {% endif %}
 
                             <p class="location__meta-title">Address</p>
-                            <address>{{ page.address|linebreaks }}</address>
+                            <address>{{ page.address|linebreaks|safe }}</address>
 
                             {% if page.operating_hours %}
                                 <p class="location__meta-title">Opening hours</p>

bakerydemo/jinja2/locations/locations_index_page.html

@@ -1,5 +1,4 @@
 {% extends "base.html" %}
-{% load wagtailcore_tags navigation_tags wagtailimages_tags %}
 
 {% block content %}
 
@@ -7,8 +6,9 @@
 
     <div class="container">
         <div class="location-list-page">
-            {% for location in locations %}
-                {% include "includes/card/picture-card.html" with page=location portrait=False %}
+            {% for page in locations %}
+                {% set portrait = False %}
+                {% include "includes/card/picture-card.html" %}
             {% endfor %}
         </div>
     </div>

bakerydemo/jinja2/recipes/recipe_index_page.html

@@ -1,12 +1,10 @@
 {% extends "base.html" %}
-{% load wagtailcore_tags navigation_tags wagtailimages_tags %}
-
 {% block content %}
     <div class="container">
         <div class="blog-list">
             {% if recipes %}
-                {% for recipe in recipes %}
-                    {% include "includes/card/blog-listing-card.html" with blog=recipe %}
+                {% for blog in recipes %}
+                    {% include "includes/card/blog-listing-card.html" %}
                 {% endfor %}
             {% else %}
                 <div class="col-md-12">

bakerydemo/jinja2/recipes/recipe_page.html

@@ -1,5 +1,4 @@
 {% extends "base.html" %}
-{% load navigation_tags wagtailimages_tags wagtailcore_tags %}
 
 {% block content %}
 
@@ -9,10 +8,10 @@
         <div class="row">
             <div class="col-md-8">
                 <div class="blog__meta">
-                    {% if page.authors %}
+                    {% if page.authors() %}
                         <div class="blog__avatars">
-                            {% for author in page.authors %}
-                                <div class="blog__author">{% image author.image fill-50x50-c100 class="blog__avatar" %}
+                            {% for author in page.authors() %}
+                                <div class="blog__author">{{ image(author.image, "fill-50x50-c100", class="blog__avatar") }}
                                     {{ author.first_name }} {{ author.last_name }}</div>
                             {% endfor %}
                         </div>

bakerydemo/jinja2/search/search_results.html

@@ -1,5 +1,4 @@
 {% extends "base.html" %}
-{% load wagtailcore_tags wagtailimages_tags wagtailsearchpromotions_tags %}
 
 {% block title %}Search{% if search_results %} results{% endif %}{% if search_query %} for “{{ search_query }}”{% endif %}{% endblock %}
 
@@ -17,10 +16,10 @@
                     <ul class="search__results">
                         {% for result in search_results %}
                             <li class="listing-card">
-                                <a class="listing-card__link" href="{% pageurl result.specific %}">
+                                <a class="listing-card__link" href="{{ pageurl(result.specific) }}">
                                     {% if result.specific.image %}
                                         <figure class="listing-card__image">
-                                            {% image result.specific.image fill-180x180-c100 loading="lazy" %}
+                                            {{ image(result.specific.image, "fill-180x180-c100", loading="lazy") }}
                                         </figure>
                                     {% endif %}
                                     <div class="listing-card__contents">
@@ -43,16 +42,16 @@
                         {% endfor %}
                     </ul>
                 {% elif search_query %}
-                    {% get_search_promotions search_query as search_promotions %}
+                    {% set search_promotions=get_search_promotions(search_query) %}
                     {% if search_promotions %}
                         <p class="search__introduction">You searched for “{{ search_query }}”, {{ search_promotions|length }} result{{ search_promotions|length|pluralize }} found.</p>
                         <ul class="search__results">
                             {% for search_promotion in search_promotions %}
                                 <li class="listing-card">
-                                    <a class="listing-card__link" href="{% pageurl search_promotion.page.specific %}">
+                                    <a class="listing-card__link" href="{{ pageurl(search_promotion.page.specific) }}">
                                         {% if search_promotion.page.specific.image %}
                                             <figure class="listing-card__image">
-                                                {% image search_promotion.page.specific.image fill-180x180-c100 loading="lazy" %}
+                                                {{ image(search_promotion.page.specific.image, "fill-180x180-c100", loading="lazy") }}
                                             </figure>
                                         {% endif %}
                                         <div class="listing-card__contents">

bakerydemo/jinja2/tags/breadcrumbs.html

@@ -1,5 +1,4 @@
-{% load wagtailcore_tags %}
-
+{% set ancestors = breadcrumbs().ancestors %}
 {% if ancestors %}
     <nav class="breadcrumb-container" aria-label="Breadcrumb">
         <div class="container">
@@ -7,11 +6,11 @@
                 <div class="col-lg-12">
                     <ol class="breadcrumb">
                         {% for ancestor in ancestors %}
-                            {% if forloop.last %}
+                            {% if loop.last %}
                                 <li aria-current="page">{{ ancestor }}</li>
                             {% else %}
-                                <li><a href="{% pageurl ancestor %}">{% if forloop.first %}Home{% else %}{{ ancestor }}{% endif %}</a>
-                                    {% include "includes/chevron-icon.html" with class="breadcrumb__chevron-icon" %}</li>
+                                <li><a href="{{ pageurl(ancestor) }}">{% if loop.first %}Home{% else %}{{ ancestor }}{% endif %}</a>
+                                    {% set class="breadcrumb__chevron-icon" %}{% include "includes/chevron-icon.html" %}</li>
                             {% endif %}
                         {% endfor %}
                     </ol>

bakerydemo/jinja2/tags/gallery.html

@@ -1,9 +1,8 @@
-{% load wagtailimages_tags %}
-
+{% set images=gallery(page.collection).images %}
 {% for img in images %}
     <div class="picture-card">
         <figure class="picture-card__image">
-            {% image img fill-645x480-c100 loading="lazy" %}
+            {{ image(img, "fill-645x480-c100", loading="lazy") }}
             <div class="picture-card__contents">
                 <p class="picture-card__title">{{ img.title }}</p>
             </div>

bakerydemo/jinja2/tags/top_menu.html

@@ -1,14 +1,12 @@
-{% load navigation_tags wagtailcore_tags %}
-{% get_site_root as site_root %}
-
+{% set menuitems=top_menu(parent=get_site_root(), calling_page=page).menuitems %}
 {% for menuitem in menuitems %}
-    <li class="presentation {{ menuitem.title|lower|cut:" " }}{% if menuitem.active %} active{% endif %}{% if menuitem.show_dropdown %} has-submenu{% endif %}">
+    <li class="presentation {{ menuitem.title|lower|cut(" ") }}{{ "active" if menuitem.active }} {{ "has-submenu" if menuitem.show_dropdown }}">
         {% if menuitem.show_dropdown %}
-            <a href="{% pageurl menuitem %}" class="allow-toggle">{{ menuitem.title }} <span><a class="caret-custom dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"></a></span></a>
-            {% top_menu_children parent=menuitem %}
+            <a href="{{ pageurl(menuitem) }}" class="allow-toggle">{{ menuitem.title }} <span><a class="caret-custom dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"></a></span></a>
+            {% include "tags/top_menu_children.html" %}
             {# Used to display child menu items #}
         {% else %}
-            <a href="{% pageurl menuitem %}">{{ menuitem.title }}</a>
+            <a href="{{ pageurl(menuitem) }}">{{ menuitem.title }}</a>
         {% endif %}
     </li>
 {% endfor %}

bakerydemo/jinja2/tags/top_menu_children.html

@@ -1,7 +1,6 @@
-{% load navigation_tags wagtailcore_tags %}
-
+{% set menuitems_children = top_menu_children(parent=menu_item, calling_page) %}
 <ul class="dropdown-menu">
     {% for child in menuitems_children %}
-        <li><a href="{% pageurl child %}">{{ child.title }}</a></li>
+        <li><a href="{{ pageurl(child) }}">{{ child.title }}</a></li>
     {% endfor %}
 </ul>

bakerydemo/settings/base.py

@@ -110,6 +110,25 @@ TEMPLATES = [
             ],
         },
     },
+    {
+        "BACKEND": "django.template.backends.jinja2.Jinja2",
+        "DIRS": [
+            "bakerydemo/jinja2",
+        ],
+        "APP_DIRS": True,
+        "OPTIONS": {
+            "extensions": [
+                "wagtail.jinja2tags.core",
+                "wagtail.admin.jinja2tags.userbar",
+                "wagtail.images.jinja2tags.images",
+                "wagtail.contrib.settings.jinja2tags.settings",
+                "jinja2.ext.do",
+                "jinja2.ext.i18n",
+                "jinja2.ext.loopcontrols",
+                "bakerydemo.base.jinja2tags.base",
+            ],
+        },
+    },
 ]
 
 WSGI_APPLICATION = "bakerydemo.wsgi.application"

requirements/base.txt

@@ -6,3 +6,4 @@ django-debug-toolbar>=3.2,<4
 django-extensions==3.2.1
 django-csp==3.7
 dj-database-url==0.4.1
+jinja2>=3.1.2,<4