(#4414) NCIDS 2 Column Updates - Image & Video

[dev-rana-publicis]

Closes #4414
ODE: https://ncigovcdode838.prod.acquia-sites.com/

[cgdp-management-server]

ODE Deployment

Code has been deployed to ODE 838.

[bryanpizzillo]

Images and videos should be within a <figure> element using <figcaption> for the caption. I am going to call in @olitharp-nci on this on what we should explicitly do. E.g. is it something like:

<figure class="nci-figure">
   <img class="nci-image">
   <figcaption class="nci-figure__caption">
      <span class="nci-figure__source">...
   </figcaption>

Or,
The following where we have some figure mixins.

<figure class="nci-image">
</figure>

OR,

<figure class="nci-figure nci-figure--image">
</figure>

Figures are used all over for Images, Videos, Tables. Technically MDN even suggests figures for pull quotes.

[bryanpizzillo]

Overall comments so I don't have to write them for each aspect ratio:

1. The cgov_image display modes should not be named ncids_aspect_ratio_X_Y.
   • Once again the ncids_image paragraph name is a little vague, but whatever.
   • This is going to suck a but it should follow what we have been doing for other components.
     • The labels should be Image Display: NCIDS Image: XxY Crop
     • The machine names should be ncids_image_ncids_image_XxY.
       • Yes, I see ncids_image is there twice, but it is following what we did for Promo, Feature Cards and Flag Cards.
2. You need different image styles for each of the renderings. Do not reuse ncids_featured or ncids_promo. You should have your own set of display modes and they need to set the max width to whatever the appropriate max width is for these use cases. The image style is for the presentation use of that image, not some sort of generic thing.

[bryanpizzillo]

A few more items

[blilianyu]

@dev-rana-publicis @dlescarbeau
Looks great but a couple things:

• Credit field should be optional
• Video caption margin is showing -4px top but it seems even smaller than Images. Can we make it the same?

[bryanpizzillo]

Requesting changes for me to make - but also requirements.

[KateMashkinaNIH]

1. Caption is not displayed on 16:9 ( english and spanish)
2. Credit field is not translated
3. Image NCIDS Promo Art 1:1 Override Field is not translatable  #4472 - it was just discovered, but it affects this component along with lists, promo blocks etc ( anywhere where NCIDS 1:1 override is used )

[sarinapadilla]

Per client feedback on 10/24:

• Keeping the caption/credit styling as is
• Uupdating caption font size to 2xs (14px)
• Updating credit font size to 3xs (13px)

[bennettcc]

Federal team has approved this PR - reviewed by Anna and Alex on 10/29

[andyvanavery31]

Passes product review.