Skip to content

Refactor duplicated search markup into reusable template includes #634

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
rajesh-puripanda wants to merge 2 commits into from
Closed

Refactor duplicated search markup into reusable template includes #634

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5fc6fc4
Improve accessibility by adding ARIA labels to navigation components
rajesh-puripanda Mar 6, 2026
42ade5e
Refactor duplicated search markup into reusable template includes
rajesh-puripanda Mar 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions bakerydemo/templates/blocks/captioned_image_block.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{% load wagtailimages_tags %}

<figure>
{% picture self.image format-{avif,webp,jpeg} fill-{400x220,600x338} sizes="(max-width: 768px) 200px, 900px" loading="lazy" %}
{% picture self.image format-{avif,webp,jpeg} fill-{400x220,600x338} sizes="(max-width: 768px) 200px, 900px"
loading="lazy" alt="{{ self.image.title }}" %}
<figcaption>{{ self.caption }} - {{ self.attribution }}</figcaption>
</figure>
</figure>
49 changes: 25 additions & 24 deletions bakerydemo/templates/blog/blog_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,35 @@

{% block content %}

{% include "base/include/header-blog.html" %}
{% include "base/include/header-blog.html" %}

<div class="container">
<div class="row">
<div class="col-md-8">
<div class="blog__meta">
{% if page.authors %}
<div class="blog__avatars">
{% for author in page.authors %}
<div class="blog__author">{% picture author.image format-{avif,webp,jpeg} fill-50x50-c100 class="blog__avatar" %}
{{ author.first_name }} {{ author.last_name }}</div>
{% endfor %}
</div>
{% endif %}
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="blog__meta">
{% if page.authors %}
<div class="blog__avatars">
{% for author in page.authors %}
<div class="blog__author">{% picture author.image format-{avif,webp,jpeg} fill-50x50-c100
class="blog__avatar" alt="{{ author.first_name }} {{ author.last_name }}" %}
{{ author.first_name }} {{ author.last_name }}</div>
{% endfor %}
</div>
{% endif %}
</div>

{{ page.body }}
{{ page.body }}

{% if page.get_tags %}
<p class="blog__tag-introduction">Find more blog posts with similar tags</p>
<div class="blog-tags blog-tags--condensed">
<span class="u-sr-only">Filter blog posts by tag</span>
{% for tag in page.get_tags %}
<a href="{{ tag.url }}" class="blog-tags__pill">{{ tag }}</a>
{% endfor %}
</div>
{% endif %}
{% if page.get_tags %}
<p class="blog__tag-introduction">Find more blog posts with similar tags</p>
<div class="blog-tags blog-tags--condensed">
<span class="u-sr-only">Filter blog posts by tag</span>
{% for tag in page.get_tags %}
<a href="{{ tag.url }}" class="blog-tags__pill">{{ tag }}</a>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endblock content %}
</div>
{% endblock content %}
102 changes: 51 additions & 51 deletions bakerydemo/templates/breads/bread_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,67 +2,67 @@
{% load wagtailimages_tags %}

{% block content %}
{% include "base/include/header-hero.html" %}
{% include "base/include/header-hero.html" %}

<div class="container bread-detail">
<div class="row">
<div class="col-md-12">
<div class="col-md-7">
<div class="row">
{% if page.introduction %}
<p class="bread-detail__introduction">
{{ page.introduction }}
</p>
{% endif %}
<div class="container bread-detail">
<div class="row">
<div class="col-md-12">
<div class="col-md-7">
<div class="row">
{% if page.introduction %}
<p class="bread-detail__introduction">
{{ page.introduction }}
</p>
{% endif %}

<div class="hidden-md-down">
{{ page.body }}
</div>
<div class="hidden-md-down">
{{ page.body }}
</div>
</div>
</div>

<div class="col-md-4 col-md-offset-1">
<div class="row">
<div class="bread-detail__meta">
{% if page.origin %}
<p class="bread-detail__meta-title">Origin</p>
<p class="bread-detail__meta-content">{{ page.origin }}</p>
{% endif %}
{% if page.bread_type %}
<p class="bread-detail__meta-title">Type</p>
<p class="bread-detail__meta-content">{{ page.bread_type }}</p>
{% endif %}
{% with ingredients=page.ordered_ingredients %}
{% if ingredients %}
<h4>Ingredients</h4>
<ul>
{% for ingredient in ingredients %}
<li>
{% if ingredient.live %}
{# If it's live, show as-is #}
{{ ingredient.name }}
{% else %}
{# EXAMPLE: we can show a placeholder element for instances that are not live #}
<span class="bread-detail__meta-ingredient--draft">
Draft ingredient
</span>
(draft)
{% endif %}
</li>
{% endfor %}
</ul>
<div class="col-md-4 col-md-offset-1">
<div class="row">
<div class="bread-detail__meta">
{% if page.origin %}
<p class="bread-detail__meta-title">Origin</p>
<p class="bread-detail__meta-content">{{ page.origin }}</p>
{% endif %}
{% if page.bread_type %}
<p class="bread-detail__meta-title">Type</p>
<p class="bread-detail__meta-content">{{ page.bread_type }}</p>
{% endif %}
{% with ingredients=page.ordered_ingredients %}
{% if ingredients %}
<h2>Ingredients</h2>
<ul>
{% for ingredient in ingredients %}
<li>
{% if ingredient.live %}
{# If it's live, show as-is #}
{{ ingredient.name }}
{% else %}
{# EXAMPLE: we can show a placeholder element for instances that are not live #}
<span class="bread-detail__meta-ingredient--draft">
Draft ingredient
</span>
(draft)
{% endif %}
{% endwith %}
</div>
</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
</div>
</div>
</div>

<div class="col-md-7">
<div class="row hidden-md-up">
{{ page.body }}
</div>
<div class="col-md-7">
<div class="row hidden-md-up">
{{ page.body }}
</div>
</div>
</div>
</div>
{% endblock content %}
</div>
{% endblock content %}
17 changes: 7 additions & 10 deletions bakerydemo/templates/includes/card/blog-listing-card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,23 @@
<div class="blog-listing-card">
<a class="blog-listing-card__link" href="{% pageurl blog %}">
{% if blog.image %}
<figure class="blog-listing-card__image">
{% picture blog.image format-{avif,webp,jpeg} fill-322x247-c100 loading="lazy" %}
</figure>
<figure class="blog-listing-card__image">
{% picture blog.image format-{avif,webp,jpeg} fill-322x247-c100 loading="lazy" alt="" %}
</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 }} by
{% endif %}
{% for author in blog.authors %}
{{ author }}{% if not forloop.last %}, {% endif %}
{{ author }}{% if not forloop.last %}, {% endif %}
{% endfor %}
</p>
</div>
</a>
</div>



</div>
40 changes: 20 additions & 20 deletions bakerydemo/templates/includes/card/listing-card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,32 @@
<div class="listing-card">
<a class="listing-card__link" href="{{ page.url }}">
{% if page.image %}
<figure class="listing-card__image">
{% picture page.image format-{avif,webp,jpeg} fill-180x180-c100 loading="lazy" %}
</figure>
<figure class="listing-card__image">
{% picture page.image format-{avif,webp,jpeg} fill-180x180-c100 loading="lazy" alt="" %}
</figure>
{% endif %}
<div class="listing-card__contents">
{% if h2 %}
<h2 class="listing-card__title">{{ page.title }}</h2>
<h2 class="listing-card__title">{{ page.title }}</h2>
{% else %}
<h3 class="listing-card__title">{{ page.title }}</h3>
<h3 class="listing-card__title">{{ page.title }}</h3>
{% endif %}
{% if page.origin or page.bread_type %}
<table class="listing-card__meta">
{% if page.origin %}
<tr>
<th scope="row" class="listing-card__meta-category">Origin</th>
<td class="listing-card__meta-content">{{ page.origin }}</td>
</tr>
{% endif %}
{% if page.bread_type %}
<tr>
<th scope="row" class="listing-card__meta-category">Type</th>
<td class="listing-card__meta-content">{{ page.bread_type }}</td>
</tr>
{% endif %}
</table>
<table class="listing-card__meta">
{% if page.origin %}
<tr>
<th scope="row" class="listing-card__meta-category">Origin</th>
<td class="listing-card__meta-content">{{ page.origin }}</td>
</tr>
{% endif %}
{% if page.bread_type %}
<tr>
<th scope="row" class="listing-card__meta-category">Type</th>
<td class="listing-card__meta-content">{{ page.bread_type }}</td>
</tr>
{% endif %}
</table>
{% endif %}
</div>
</a>
</div>
</div>
12 changes: 7 additions & 5 deletions bakerydemo/templates/includes/card/picture-card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,19 @@
<a class="picture-card__link" href="{{ page.url }}">
<figure class="picture-card__image">
{% if portrait %}
{% picture page.image format-{avif,webp,jpeg} fill-{250x320-c100,433x487-c100} sizes="(max-width: 768px)125px,400px" loading="lazy" %}
{% picture page.image format-{avif,webp,jpeg} fill-{250x320-c100,433x487-c100} sizes="(max-width:
768px)125px,400px" loading="lazy" alt="" %}
{% else %}
{% picture page.image format-{avif,webp,jpeg} fill-{300x200-c75,645x480-c75} sizes="(max-width: 768px)150px,30vw" loading="lazy" %}
{% picture page.image format-{avif,webp,jpeg} fill-{300x200-c75,645x480-c75} sizes="(max-width:
768px)150px,30vw" loading="lazy" alt="" %}
{% endif %}
<div class="picture-card__contents">
{% if portrait %}
<h3 class="picture-card__title">{{ page.title }}</h3>
<h3 class="picture-card__title">{{ page.title }}</h3>
{% else %}
<h2 class="picture-card__title">{{ page.title }}</h2>
<h2 class="picture-card__title">{{ page.title }}</h2>
{% endif %}
</div>
</figure>
</a>
</div>
</div>
34 changes: 7 additions & 27 deletions bakerydemo/templates/includes/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,34 +6,22 @@
<div class="navigation" data-navigation>
<a href="/" class="navigation__logo">The Wagtail Bakery</a>

<button
type="button"
class="navigation__mobile-toggle"
aria-label="Toggle mobile menu"
aria-expanded="false"
data-mobile-navigation-toggle
>
<button type="button" class="navigation__mobile-toggle" aria-label="Toggle mobile menu"
aria-expanded="false" data-mobile-navigation-toggle>
<span class="navigation__toggle-icon-bar"></span>
<span class="navigation__toggle-icon-bar"></span>
<span class="navigation__toggle-icon-bar"></span>
</button>

<nav class="navigation__mobile" data-mobile-navigation hidden>
<nav class="navigation__mobile" aria-label="Mobile" data-mobile-navigation hidden>
<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 %}
</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>
<input class="navigation__search-input" id="mobile-search-input" type="text" placeholder="Search" autocomplete="off" name="q">
<div aria-hidden="true" class="navigation__search-icon">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5 11H11.71L11.43 10.73C12.41 9.59 13 8.11 13 6.5C13 2.91 10.09 0 6.5 0C2.91 0 0 2.91 0 6.5C0 10.09 2.91 13 6.5 13C8.11 13 9.59 12.41 10.73 11.43L11 11.71V12.5L16 17.49L17.49 16L12.5 11ZM6.5 11C4.01 11 2 8.99 2 6.5C2 4.01 4.01 2 6.5 2C8.99 2 11 4.01 11 6.5C11 8.99 8.99 11 6.5 11Z" fill="#333" />
</svg>
</div>
</form>
{% include "includes/search_form.html" with form_class="navigation__mobile-search"
input_id="mobile-search-input" %}
</nav>

<nav class="navigation__desktop" aria-label="Main">
Expand All @@ -44,15 +32,7 @@
</ul>
</nav>

<form action="/search" method="get" class="navigation__search" role="search">
<label for="search-input" class="u-sr-only">Search the bakery</label>
<input class="navigation__search-input" id="search-input" type="text" placeholder="Search" autocomplete="off" name="q">
<div aria-hidden="true" class="navigation__search-icon">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5 11H11.71L11.43 10.73C12.41 9.59 13 8.11 13 6.5C13 2.91 10.09 0 6.5 0C2.91 0 0 2.91 0 6.5C0 10.09 2.91 13 6.5 13C8.11 13 9.59 12.41 10.73 11.43L11 11.71V12.5L16 17.49L17.49 16L12.5 11ZM6.5 11C4.01 11 2 8.99 2 6.5C2 4.01 4.01 2 6.5 2C8.99 2 11 4.01 11 6.5C11 8.99 8.99 11 6.5 11Z" fill="#333" />
</svg>
</div>
</form>
{% include "includes/search_form.html" %}
</div>
</div>
</header>
</header>
9 changes: 9 additions & 0 deletions bakerydemo/templates/includes/search_form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<form action="/search" method="get" class="{{ form_class|default:'navigation__search' }}" role="search">
<label for="{{ input_id|default:'search-input' }}" class="u-sr-only">{{ label_text|default:'Search the bakery'
}}</label>
<input class="navigation__search-input" id="{{ input_id|default:'search-input' }}" type="text" placeholder="Search"
autocomplete="off" name="q">
<div aria-hidden="true" class="navigation__search-icon">
{% include "includes/search_icon_svg.html" %}
</div>
</form>
5 changes: 5 additions & 0 deletions bakerydemo/templates/includes/search_icon_svg.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.5 11H11.71L11.43 10.73C12.41 9.59 13 8.11 13 6.5C13 2.91 10.09 0 6.5 0C2.91 0 0 2.91 0 6.5C0 10.09 2.91 13 6.5 13C8.11 13 9.59 12.41 10.73 11.43L11 11.71V12.5L16 17.49L17.49 16L12.5 11ZM6.5 11C4.01 11 2 8.99 2 6.5C2 4.01 4.01 2 6.5 2C8.99 2 11 4.01 11 6.5C11 8.99 8.99 11 6.5 11Z"
fill="#333" />
</svg>
Loading