Media Type Images - NCIOCPL/cgov-digital-platform GitHub Wiki

Discussion

What do we do about folder paths of images when we move them to the new system?

The image field does not have information in the wiki. (Not even the label). I am going to call the field "Image" but there are some other questions:

  • Is there ever a max height and width of the uploaded image? No
  • What image types are allowed? JPG, JPEG, PNG, GIF
  • Is there a minimum resolution/dimensions? No, but the minimum recommended width is 610px
  • Is there a maximum file size? 10MB
  • Is there any help text? Change original source to "Where did the image come from? Example: iStock. This field does not display on the front end". Delete reuse permission field. Add to alt text help "This text will be used by screen readers, search engines, or when the image cannot be loaded. Example: "Photo of a scientist in the laboratory." At the cropping tool section next to or underneath the header "CROP IMAGE" we need to explain how to make crops. Add text "Click on image or resize to set crop." After the helper text for caption and credit add "This field displays on the front end." What guidance should we give for alt text? "Enter "" for no alt text"? Or leave field blank if we don't require this.

What should the pathing be? year/month seems to be fine since this will not be exposed on the front-end.

Also to note: In Drupal the image field contains the alt text too. It is set to required on the file.

Image Crops

Information about the system wide crops used by the image cropping tool.

Image Styles

Information about the configuation that takes the crops and generate images.

cgov_image

Naming

  • Display Name: Image
  • Machine-readable Name: cgov_image

Description

Image media type that includes appropriate crops for use on the page, in feature cards, and social media sharing.

Common Media Fields

Caption

  • Field Name: field_caption
  • Label: Caption
  • Type: simple wysiwyg
  • Not required
  • Tooltip Text: Enter image caption [Displays below image]
  • Cardinality: 1
  • Translatable: Yes

Alt Text

  • Field Name: field_alt_text
  • Label: Image Alt Text
  • Type: Text (plain)
  • Not Required
  • Tooltip Text: Description of the image to be used by screen readers. Should not be the same as caption. Images that are only decorative should have empty alt text.
  • Translatable: Yes
  • Should output "" when no alt text is not entered

Accessible Text Version

  • Field Name: field_accessible_version
  • Label: Accessible Text Version
  • Type: Text (plain)
  • Not Required
  • Max Characters: currently no limit
  • Tooltip Text: Details to supplement alt text. [Used when an alt tag alone is not sufficient to describe a complex chart, diagram, and/or infographic]
  • Translatable: Yes
  • Note: Shows in code as longdesc

Unique Fields to This Content Type

Credit

  • Field Name: field_credit
  • Label: Photo Credit
  • Type: Text (plain)
  • Not Required (not currently required but should this be?)
  • Max Characters: 250
  • Tooltip Text: Enter full name of photographer or copyright owner, such as Jane Doe, Getty Images, or iStock.
  • Translatable: Yes

Original Source

  • Field Name: field_original_source
  • Label: Original Source
  • Type: Text (plain)
  • Not required
  • Max Characters: 250
  • Tooltip Text: Used to provide a source for the content, such as VOL id or link from external site. [Does not display on front-end]
  • Cardinality: 1
  • Translatable: Yes?? (if Spanish is using same image, wouldn't the source be the same?)

The Image

  • Field Name:
  • Label:
  • Type: Image
    • Form Widget: Widget Cropping Tool with Crops: Freeform (Required)

Override Image (use manual upload)

  • Not required (and not preferred!)
  • Field Names:
    • Feature Card Override (overrides 4x3 for feature card)
      • field name: field_override_img_featured
      • label: Feature Card Override
    • Social Media Override (overrides 4x3 for social media)
      • field name: field_override_img_social_media
      • label: Social Media Override
    • Thumbnail Override (overrides thumbnail crop)
      • field name: field_override_img_thumbnail
      • label: Thumbnail Override
    • Panoramic Override (overrides panoramic crop)
      • field name: field_override_img_panoramic
      • label: Panoramic Override

Name

Image name in system

  • Field Name: This should be the Entity(node, media) Title
  • Label: Name
  • Type: This should be the Entity(node, media) Title
  • Required: Yes
  • Max characters: 255
  • Tooltip Text: This is the name of the image, to be displayed in the system.
  • Cardinality: 1
  • Translatable: Yes

Display Enlarge

  • Field Name: field_display_enlarge
  • Label: Display Enlarge
  • Type: Checkbox
  • Required: No
  • Tooltip Text: When checked, this will display the Enlarge overlay when the image is embedded on a page.
  • Cardinality: 1
  • Translatable: Yes
  • Validations/Rules: When this is checked, enlarge options appears on the lead image, and links to the full original image

Additional Behaviors

  • If accessible text is provided, the text needs to become a page.
  • If there's no accessible text provided, display a 404 error.

Form Display Order

  • Language
  • Name
  • The Actual Image + Crops (use cropping widget)*
  • Alt Text
  • Caption
  • Original Source
  • Photo Credit
  • Accessible Text Version
  • Display Enlarge
  • Thumbnail Override
  • Social Media Override
  • Feature Card Override
  • Panoramic Override

cgov_context_image

Naming

  • Display Name: Contextual Image
  • Machine-readable Name: cgov_context_image

Description

Image media type that for use within the WYSIWYG or body content of the page (contextually). Only includes the freeform crop.

Common Media Fields

Caption

  • Field Name: field_caption
  • Label: Caption
  • Type: simple wysiwyg
  • Not required
  • Tooltip Text: Enter image caption [Displays below image]
  • Cardinality: 1
  • Translatable: Yes

Alt Text

  • Field Name: field_alt_text
  • Label: Image Alt Text
  • Type: Text (plain)
  • Required
  • Tooltip Text: Description of the image to be used by screen readers. Should not be the same as caption. Images that are only decorative should have empty alt text.
  • Translatable: Yes

Accessible Text Version

  • Field Name: field_accessible_version
  • Label: Accessible Text Version
  • Type: Text (plain)
  • Not Required
  • Max Characters: currently no limit
  • Tooltip Text: Details to supplement alt text. [Used when an alt tag alone is not sufficient to describe a complex chart, diagram, and/or infographic]
  • Translatable: Yes

Unique Fields to This Content Type

Credit

  • Field Name: field_credit
  • Label: Photo Credit
  • Type: Text (plain)
  • Not Required (not currently required but should this be?)
  • Max Characters: 250
  • Tooltip Text: Enter full name of photographer or copyright owner, such as Jane Doe, Getty Images, or iStock.
  • Translatable: Yes

Original Source

  • Field Name: field_original_source
  • Label: Original Source
  • Type: Text (plain)
  • Not required
  • Max Characters: 250
  • Tooltip Text: Used to provide a source for the content, such as VOL id or link from external site. [Does not display on front-end]
  • Cardinality: 1
  • Translatable: Yes?? (if Spanish is using same image, wouldn't the source be the same?)

The Image

  • Field Name:
  • Label:
  • Type: Image
    • Form Widget: Widget Cropping with Crops: Freeform (Required)

Name

Image name in system

  • Field Name: This should be the Entity(node, media) Title
  • Label: Name
  • Type: This should be the Entity(node, media) Title
  • Required: Yes
  • Max characters: 255
  • Tooltip Text: This is the name of the image, to be displayed in the system.
  • Cardinality: 1
  • Translatable: Yes

Display Enlarge

  • Field Name: field_display_enlarge
  • Label: Display Enlarge
  • Type: Checkbox
  • Required: No
  • Tooltip Text: When checked, this will display the Enlarge overlay when the image is embedded on a page.
  • Cardinality: 1
  • Translatable: Yes
  • Validations/Rules: When this is checked, enlarge options appears on the image, and links to the full original image

Additional Behaviors

  • If accessible text is provided, the text needs to become a page.
  • If there's no accessible text provided, display a 404 error.

Image Templates:

  • Image Centered
  • Image Centered Full
  • Image Left Medium
  • Image Left Small
  • Image Right Medium
  • Image Right Small

Example URLs:

Form Display Order

  • Language
  • Name
  • The Actual Image + Crops (use cropping widget)*
  • Alt Text
  • Caption
  • Original Source
  • Photo Credit
  • Accessible Text Version
  • Display Enlarge
  • Feature Card Override
  • Social Media Override
  • Thumbnail Override
  • Panoramic Override

Image Display Sizes

image crops 1441 1440-->1025 1024 768 640 320
article (25%) 209w 171w 243w 185w 610w 290w
article (40%) 334w 274w 388w 295w 610w 290w
article (center) 626w 514w 728w 554w 610w 290w
article (center full) 835w 685w 970w 738w 610w 290w
feature card (primary) 324x243 260x195 281x211 196x147 174x131 78x59
feature card (secondary) 324x243 260x195 273x205 196x147 174x131 78x59
feature card (multimedia) 400x300 333x250 330x248 245x184 202x152 96x72
feature card (inline) 345x259 270x204 425x319 309x232 165x124 69x52
thumbnail (topic page) 194x146 156x118 228x171 170x127 no display no display
thumbnail (landing page) 170x128 137x103 137x103 98x74 no display no display
thumbnail (blog series) 98x74 142x107 204x153 155x117 no display no display
panoramic (landing pages multimedia) 785x441 652x366 646x363 476x267 390x219 177x99
panoramic (CTHP) 577x324 479x269 475x267 362x203 no display no display
⚠️ **GitHub.com Fallback** ⚠️