FE: Display Vet Center Banner Image on Facility Pages

[Agile6MSkinner]

Description

As a veteran who lands on a Vet Center facility page, I would like a VetCenter-specific banner imageto be prominently displayed at the top of the page so that I recognize it as something distinct from other VAMC facilities.

Figma Designs

Image will be added to Drupal in #18709

Implementation Details

The interface for fetching the Vet Center banner image

will utilize GraphQL. The query will be configured to retrieve the necessary fields for displaying the logo appropriately across various device breakpoints.

Example GraphQL query configuration (DO NOT use this verbatim, we do not know what the field is yet and it may come in a different format due to Centralized Content):

fieldVetCenterCCGraphic {
   entity {
        ... on MediaImage {
          image {
            alt
            title
            derivative(style: _32MEDIUMTHUMBNAIL) {
                url
                width
                height
            }
          }
        }
    }
}

QA

Preview Give feedback

1. Accessibility Review
2. Design Review
3. Verify that image displays
4. View on Desktop/tabet/mobile to verify breakpoints and resizing

Acceptance Criteria

• Create a GraphQL query to fetch the Vet Center banner image from the centralized content in Drupal.
• Banner image is presented on Vet Center pages
• Implement responsive breakpoints for the banner image
• Follow all annotations in linked Figma designs

[eselkin]

The interface is the GraphQL, it will just add something for the field they wire up to say like:

fieldVetCenterCCGraphic {
   entity {
        ... on MediaImage {
          image {
            alt
            title
            derivative(style: _32MEDIUMTHUMBNAIL) {
                url
                width
                height
            }
          }
        }
}

or something, depending on the sizes/configuration.

[Agile6MSkinner]

Hey team! Please add your planning poker estimate with Zenhub @eselkin @jv-agile6 @chriskim2311 @randimays @dsasser

[dsasser]

@Agile6MSkinner I just noticed that the design system has something to say about logos:

Using custom logos for VA departments, offices, teams, sub-groups, special programs, initiatives, or events is not supported on VA.gov. This practice aligns with the requirements in the VA Graphic Standards and the Web Governance site.

I know there have already been design reviews for this change, so maybe I'm misinterpreting the meaning of "custom logo".

[Agile6MSkinner]

Interesting point, @dsasser. @aklausmeier any thoughts on that?

[eselkin]

I put a caveat on the example GQL query.

[aklausmeier]

@Agile6MSkinner We have an exception to use the Vet Center logo by someone on the web governance board IF it becomes the final design. The design is still in iterations and the logo has potential to be revised to an image. In my view this ticket is blocked by design.

[randimays]

@Agile6MSkinner Should this be in the Ready column? Looks like it is still blocked by the Drupal ticket.

[Agile6MSkinner]

It has been refined, so the story is ready, but it has a dependency that's listed:

When looking at the board, it shows which tickets are blocked or blocking with these icons:

[eselkin]

Will wait on determination of image status for Monday

[laflannery]

@eselkin the image annotations have been finalized. The image will be contextual and I have added the approved alt text into Drupal already

[jilladams]

From planning:

• Image is still in Vet Center centralized Content
• FE will hard code, referencing that image
• Michelle isn't concerned about confusing Natl staff, as they are not likely to try and edit the image.
• We can leave it this way for now and iterate in future if needed.

[davidmpickett]

Verified on prod: https://www.va.gov/evanston-vet-center/