nbs 2 posts

[jolumley-nhs]

New posts for NBS book:

• Making the appointment selection clearer for users
• improving the booking complete screen

[colinrotherham]

@paulrobertlloyd I've seen screenshot items being looped, but is there a better Nunjucks way to output these figure and figcaptions?

[paulrobertlloyd]

For individual figures with figcaption, you can use the following Markdown:

![Alternative text](/path/to/file.jgp "Caption")

The templates also support providing a list of screenshots at the bottom of a post. For that, you can use the screenshots array, i.e.

---
title: My post
screenshots:
  items:
    - Start page
    - Confirmation page
---

The above assumes that the two images are named start-page.png and confirmation-page.png. If you want to reference invidual files, you can use the src value, and if you want to add a caption, you cam add the caption value, like so:

---
title: My post
screenshots:
  items:
    - text: Start page
      caption: This is the start page.
    - text: Confirmation page
      src: confirmation-page-with-photo.jpg
      caption: We show a photograph on the confirmation page
---

Here’s an example of a page with a list of screenshots: https://design-history.prevention-services.nhs.uk/manage-vaccinations-in-schools/2024/03/pilot-record-a-vaccination/

Might this be worth documenting in the guide area @frankieroberto?

[paulrobertlloyd]

For the above, you could conceivably use the following Markdown:

![Screenshot from the NHS design system, showing the new panel component](panelcomponent.png "From the [NHS.UK Design](https://service-manual.nhs.uk/design-system/components/panel) System")

But I’d discourage using Markdown inside the caption because a.) it might not work and b.) this is really intended to be used as the title attribute on the image, which of course can not display HTML (this is a commonly used hack around Markdown’s lack of support for figures and figcaptions)

[colinrotherham]

Looks like everything's working as intended

Maybe the bold text like "The new screen" should all be heading 3s?

-**The new screen**
+###The new screen