Scorecard Carousel

Module tag: module_scorecard_carousel

The Scorecard Carousel displays a set of scorecard images. Selecting an image opens it in a lightbox: an enlarged overlay with optional explanatory text and a View full size button. The duplicate headline is visually hidden, while remaining available to screen readers. It is used on the Scorecard page.

The carousel's subpages also supply the images and links for the Scorecard Logos module. Update each item's content once to keep both modules in step.

  1. On a landing page using subpage_layout, create or open a Basic module subpage.
  2. Add module_scorecard_carousel to that module page.
  3. Also add scorecard-data to the same module page so the Logos module can find it. Keep this tag on one published source page only.
  4. Add the section's Headline and Basic Content if an introduction is needed.
  5. Publish the module and enable Include in support nav. Arrange its position on the landing page's Sub nav pages screen.
  6. Create a Basic child beneath the carousel module for each scorecard and fill in the fields below. Save and publish the items when ready.

The carousel reads the children directly beneath its module page. The scorecard-data tag is how the Logos module finds that source; it is not an extra tag required on the individual items.

Content mappings

NationBuilder field / setting What visitors see
Carousel module's Headline Section heading above the carousel, currently “The overall picture”.
Carousel module's Basic Content Optional section introduction below that heading.
Each child page One slide, provided it has a matching scorecard image.
Child's Headline Image alternative text and the lightbox's screen-reader label. The headline is visually hidden. If empty, the page Name is used.
Child's Basic Content Optional description in the lightbox.
Child's Excerpt Fallback description if Basic Content is empty.
First attached image whose filename contains scorecard The carousel image and its enlarged lightbox image.
View full size button Opens that same original scorecard image in a new tab. No separate image or link field is needed.
First attached image whose filename contains logo Optional logo used by the separate Logos module.
Child-page order under the carousel module Slide order and the corresponding order of available logos.

For an existing Blog Post item, the lightbox description uses its full post content. Basic child pages are the usual editing setup described here.

Keep each item's Headline descriptive because it labels the image and lightbox for screen readers. Its description can still appear below the image. The module's own Headline remains the visible heading above the carousel.

Attachments and filenames

Upload the files to the individual scorecard child page, using its Files / attachments area.

For example, an item can have these two image attachments:

act-scorecard.webp
act-logo.png

The word can appear anywhere in the filename, and matching ignores letter case. scorecard does not need to be the complete filename. The file must be an image, such as a PNG, JPEG or WebP; a PDF is not selected as an image.

The first matching image of each kind is used. When replacing a scorecard, remove or replace the previous matching attachment so an older file does not continue to win the match. Avoid giving one file both keywords, such as act-scorecard-logo.png, because it can match both image roles.

There is no fallback to an unrelated attachment or the page's Social media image. An item with a scorecard but no logo still appears in the carousel; an item with only a logo does not create a slide.

Order and lightbox behaviour

Arrange scorecard children beneath the carousel module in the desired order using its Sub nav pages screen, then preview the parent landing page. Moving the whole carousel section uses the landing page's Sub nav pages instead.

The visitor can move through the carousel using its controls or drag/swipe it. The carousel does not advance automatically. With multiple slides, arrows and position dots are displayed.

Selecting an image opens its larger view and any description. The duplicate headline is visually hidden. The toolbar contains previous/next controls, View full size and Close, keeping controls away from the scorecard artwork. Lightbox navigation wraps through all scorecards, including any that have no logo. Visitors can also use arrow keys and horizontal swipes. Close or Escape returns them to the page.

View full size opens the current original image in a new tab, where visitors can use the browser's zoom controls. The button follows whichever scorecard is selected, so no extra CMS setting is required. Replacing that item's matching scorecard attachment updates the image used by the carousel, lightbox and full-size button together.

The images are fitted inside their display area so the full scorecard remains visible. Use a clear Headline and useful descriptive text to support the information shown in the image.

Troubleshooting

Problem What to check
Whole module missing Parent has subpage_layout; the module is published, enabled in supporter navigation and tagged module_scorecard_carousel.
One scorecard missing Its page is a published direct child of the carousel module and has an attached image with scorecard in its filename.
Wrong image or logo used Check for multiple matching attachments or a filename containing both keywords. The first matching image wins.
Incorrect image label for screen readers Edit that child page's Headline. It still supplies the label even though the lightbox heading is visually hidden.
Description missing Add Basic Content or an Excerpt to the child page.
Logo missing while the slide works Add a matching logo image to that same child, then check the Logos module's source tag.

Without JavaScript, the image links can still open the scorecard files directly. The carousel and lightbox interactions require the site's scripts. If those controls stop working after the content checks above, contact For Purpose.