Scorecard Logos

Module tag: module_scorecard_logos

This module shows a grid of logos. Selecting a logo opens its corresponding scorecard image in the Scorecard Carousel's lightbox. It is used for the “Party scorecards” section on the Scorecard page.

#Set up the logo section

  1. Create or open a Basic module subpage beneath the same subpage_layout landing page as the carousel.
  2. Add the page tag module_scorecard_logos.
  3. Use this module's Headline and Basic Content for the logo section's heading and optional introduction.
  4. Publish it and enable Include in support nav. Position it using the landing page's Sub nav pages screen.
  5. Check that the carousel module, not this logo module, is tagged scorecard-data and is published.

Keep both modules on the same landing page for the shared lightbox experience. Other content sections can sit between them.

Where the logos come from

The Logos module finds the published page tagged scorecard-data, then reads that page's direct children. In the current setup, that source is the Scorecard Carousel module.

Keep scorecard-data on one published source page only. If several pages have it, the module selects the most recently published match, which may not be the intended source. The logo module's own children and attachments do not supply its logo items.

Each source child needs both of these image attachments to appear:

For example, attach act-logo.png and act-scorecard.webp to the same scorecard child page beneath the carousel. You do not need a copy beneath the Logos module.

Content mappings

NationBuilder field / setting What it supplies
Logos module's Headline Heading above the grid, currently “Party scorecards”.
Logos module's Basic Content Optional introduction below that heading.
scorecard-data on the published carousel module The shared source page.
Each direct child of that source with both required images One logo link.
Child's first image attachment with logo in its filename Visible logo.
Same child's first image attachment with scorecard in its filename The scorecard opened when that logo is selected.
Child's Headline Logo/image alternative text and the lightbox's screen-reader label. The lightbox headline is visually hidden. Name is the fallback.
Child's Basic Content, or Excerpt if Content is empty The scorecard's description in the shared lightbox. Existing Blog Post items use their full post content.
Child-page order under the carousel source Logo order, with items missing either image left out.

The grid uses four columns on larger screens and two on smaller screens. Logos are fitted within their tiles so they remain fully visible.

Filename matching ignores case, uses the first matching image of each kind and does not fall back to Social media images or unrelated attachments. Use distinct filenames for the two roles and replace older matching files when updating an image.

An item with a scorecard image but no logo image remains in the carousel and lightbox, but is left out of the logo grid. An item with a logo but no scorecard is also left out of the logo grid because there is no scorecard to open.

This allows the overall scorecard to appear as a slide without needing a party logo. The current page has eight slides and seven logos; that is expected for the current content, not a fixed limit.

What happens when a logo is selected?

The corresponding scorecard opens in the carousel's shared lightbox, with any description below the image. Its duplicate headline is visually hidden but still labels the image and dialog for screen readers. View full size opens the currently selected original scorecard image in a new tab, where the browser's zoom controls are available.

The inline carousel selects the same scorecard without scrolling the page or changing the URL. Closing the lightbox returns focus to the selected logo.

The pairing comes from the logo and scorecard belonging to the same source child page. Reordering items or leaving one without a logo does not shift another logo onto the wrong scorecard.

If JavaScript is unavailable, or the corresponding carousel is absent from that landing page, the logo link opens the scorecard image file directly. Keep the carousel present for the enlarged overlay and its caption.

Troubleshooting

Problem What to check
Whole module missing It is a published direct module subpage, enabled in supporter navigation and tagged module_scorecard_logos.
Heading appears but no logos The intended carousel source is published and tagged scorecard-data; its children have both required image attachments.
One logo missing Its source child needs both a logo image and a scorecard image.
Logo opens the wrong image Check the two attachments on that child, including duplicate matches or a filename containing both keywords.
Logo opens a file instead of the lightbox Check that the corresponding carousel source is also rendered on the same landing page and its controls work. Contact For Purpose if the scripts need checking.
Order needs changing Reorder the children beneath the carousel source, rather than creating or moving children under the Logos module.