Skip to content

Conversation

@kevinhowbrook
Copy link
Collaborator

@kevinhowbrook kevinhowbrook commented Oct 22, 2025

Link to Ticket

Link to design

Description of Changes Made

This PR introduces 2 new fields to the blog index page:

  • Page links
  • Introduction

Note

This is BE only, I added some FE but couldn't quite stack the elements correctls

How to Test

  1. Checkout out this branch
  2. Run migrations
  3. Edit a blog index page
  4. Add an introduction value in the new introduction field
  5. Add page links via the new streamfield field `page links1
  6. These should render on the page above the filters on the listing page
  7. Note these aren't required and the page should render nothing when they aren't filled in.

Screenshots

Expand to see more image image

MR Checklist

  • Add a description of your pull request and instructions for the reviewer to verify your work.
  • If your pull request is for a specific ticket, link to it in the description.
  • Stay on point and keep it small so the merge request can be easily reviewed.
  • Tests and linting passes.

Unit tests

  • Added
  • Not required

Documentation

Browser testing

  • I have tested in the following browsers and environments (edit the list as required)
    • Latest version of Chrome on mac
    • Latest version of Firefox on mac
    • Latest version of Safari on mac
    • Safari on last two versions of iOS
    • Chrome on last two versions of Android
  • Not required

Data protection

  • Not relevant
  • This adds new sources of PII and documents it and modifies Birdbath processors accordingly

Light and dark mode

  • I have tested the changes in both light and dark mode
  • The change is not relevant to dark and light mode

Accessibility

  • Automated WCAG 2.1 tests pass
  • HTML validation passes
  • Manual WCAG 2.1 tests completed
  • I have tested in a screen reader
  • I have tested in high-contrast mode
  • Any animations removed for prefers-reduced-motion
  • Not required

Sustainability

  • Images are optimised and lazy-loading used where appropriate
  • SVGs have been optimised
  • Performance and transfer of data considered
  • If JavaScript is needed alternatives have been considered
  • Not required

Pattern library

  • The pattern library component for this template displays correctly, and does not break parent templates
  • The styleguide is updated if relevant
  • Changes are not relevant the pattern library

<div class="grid grid--spacer-large">
{% include "patterns/molecules/title-filters/title-filters.html" with item=page tags=tags %}

{% include "patterns/molecules/title-filters/title-filters.html" with item=page tags=tags introduction=page.introduction page_links=page.page_links %}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as discussed, probably best to add the intro and page links below in .page-listing

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had a stab at this (screenshot below), but it looks just as odd. Sorry it's my FE skills lacking here.

I had a look at the event listing too, but that's a similar setup with the title and filters, and there are lots more filters for the blogs.

image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh, yeah. Will have a look after my calls and make some suggestions

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<ul class="page-listing page-listing--blog">
    <li class="listing page-listing__item rich-text">
        <p>{{ page.introduction|linebreaksbr }}</p>

        {% if page.page_links %}
        <div class="styled-page-links">
            {% for block in page.page_links %}
                {% include_block block %}
            {% endfor %}
        </div>
        {% endif %}
    </li>

    {% for post in blog_posts %}
    ...

should do the trick

- Remove separate migration files 0030 and 0031
- Create single migration 0030_blogindexpage_introduction_and_page_links
- Combines both field additions into one migration as requested in PR feedback
@kevinhowbrook
Copy link
Collaborator Author

@helenb and @shyusu4 - I've added the BE here and some FE, I just can't quite figure out how to place the new elements in the templates and make them stack in the way suggested by the design.

The design is a bit outdated and doesn't have the filters but I'm working under the impression we need to keep those.

Would you be able to help get this over the line please?

Thanks

<h1 class="heading heading--mega">{{ item.title }}</h1>
</div>

{% if tags and not hide_tags %}
Copy link
Collaborator

@shyusu4 shyusu4 Oct 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

note, we not longer need hide_tags as the tags were re-added in #403

@shyusu4
Copy link
Collaborator

shyusu4 commented Oct 28, 2025

@helenb and @shyusu4 - I've added the BE here and some FE, I just can't quite figure out how to place the new elements in the templates and make them stack in the way suggested by the design.

The design is a bit outdated and doesn't have the filters but I'm working under the impression we need to keep those.

Would you be able to help get this over the line please?

Thanks

We're keeping the filters but we're hiding them when there is an intro/styled links (see https://torchbox.slack.com/archives/C06AQA4D0RX/p1761662574666309?thread_ts=1761658267.864189&cid=C06AQA4D0RX)

Also, here are the updated FE screenshots:

Screenshot 2025-10-28 at 6 29 09 PM Screenshot 2025-10-28 at 6 30 36 PM

@helenb
Copy link
Member

helenb commented Nov 4, 2025

Hey @kevinhowbrook do you have what you need now from @shyusu4 ? Let me know if you need code review.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants