These are the definitions of the various image "uses" throughout the site. You can produce multiple images from a single crop and use them in different ways across the site. These styles should match to their usage throughout the site. For example, in the migration, we will have only one Featured Card image style, using the 4:3 crop, which will be used for all feature cards. However we could have 1 for the inline feature card, the widest of the feature cards; then the primary/secondary could have their own style with a smaller image, both using the 4:3 crop. This will result in better Page Speed scores as we are reducing image sizes and therefore reduce download times.

Because the current Cancer.gov images are set to widths that are not exactly the crops (e.g. 425x319 vs a true 4:3 which would be 424x318) we are only scaling to the width of the current site and not forcing the width and height.

• Name: Article
• Machine Name: cgov_article
• Effects:
  • Manual Crop using Freeform crop
  • Scale width 970

• Name: Display Enlarge
• Machine Name: cgov_display_enlarge
• Effects:
  • Manual Crop using Freeform crop

Unfortunately Drupal ships with its own thumbnail generator for every image. We want to use it in the editing interfaces, so we can't remove it. Its name is "Crop thumbnail" and has an additional "Thumbnail (100x100)" -- please do not confuse them with our thumbnail image.

• Name: Thumbnail
• Machine Name: cgov_thumbnail
• Effects:
  • Manual Crop using Thumbnail crop
  • Scale width 228

• Name: Featured
• Machine Name: cgov_featured
• Effects:
  • Manual Crop using 4x3 crop
  • Scale width 425

• Name: Social Media
• Machine Name: cgov_social_media
• Effects:
  • Manual Crop using 4x3 crop
    • This is not scaled, but may produce large images, so this needs to be reviewed

• Name: Panoramic
• Machine Name: cgov_panoramic
• Effects:
  • Manual Crop using 16x9 crop
  • Scale width 785

In order for a crop to be added to the image upload, it must be used in a style. So these are placeholders for the future images.

• Name: 1x1_placeholder
  • Machine Name: cgov_1x1_placeholder
  • Effects:
    • Manual Crop using 1x1 crop
• Name: 3x4_placeholder
  • Machine Name: cgov_3x4_placeholder
  • Effects:
    • Manual Crop using 3x4 crop
• Name: 9x16_placeholder
  • Machine Name: cgov_9x16_placeholder
  • Effects:
    • Manual Crop using 9x16 crop

FUTURE: This will be implemented as part of #3690.

• Name: NCIDS Feature Card 16:9
• Machine Name: ncids_featured_16x9
• Effects:
  • Manual Crop using 16x9 crop
  • Scale width: 1408

FUTURE: This will be implemented as part of #3691.

• Name: NCIDS Feature Card 4:3
• Machine Name: ncids_featured_4x3
• Effects:
  • Manual Crop using 4x3 crop
  • Scale width: 700

FUTURE: This will be implemented as part of #3758.

• Name: NCIDS Promo Block 1:1
• Machine Name: ncids_promo_1x1
• Effects:
  • Manual Crop using 1x1 crop
  • Scale width: 890

FUTURE: This will be implemented as part of #3762.

• Name: NCIDS Promo Block 16:9
• Machine Name: ncids_promo_16x9
• Effects:
  • Manual Crop using 16x9 crop
  • Scale width: 1280

FUTURE: This will be implemented as part of #3489.

• Name: NCIDS Guide Card with Image and Description 16:9
• Machine Name: ncids_guide_card_16x9
• Effects:
  • Manual Crop using 16x9 crop
  • Scale width: 1304