Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Image selection

Cornell has a wonderful library of imagery to pull from for the Alumni and Giving sites. However, even when selecting from high-quality, University approved photographs and illustrations, it’s important to consider the message your selection conveys.

...

  • Lead with photos of Cornellians making a difference of the world and let nostalgic photos and scenery play a supporting role. Of course, nostalgia and gorges also have their place to shine on areas of the sites meant to remind alumni of what made their time at Cornell special.

  • Select images of people engaged in action over staged photos when possible. These photos are more interesting to visitors and help demonstrate the ways people can stay involved with Cornell.

  • Choose images that will work at multiple sizes and that can be cropped to different aspect ratios. The Cornell Alumni and Giving sites are systems. Images on one part of the site can be pulled into another. For example, featured images for news stories appear full-size on article pages but are cropped to squares in featured news modules. Selecting images that are too tightly cropped or have extreme vertical or horizontal compositions can lead to awkward image clipping in these contexts.

  • Candid, community generated images are best used on social media, to illustrate timely community stories, or to represent Cornell clubs and groups without professional photography. They should only be used on the Alumni and Giving sites as featured images for articles, embedded images or thumbnails. Low-resolution photography should not be used in page heroes.

  • Avoid stock photography, which can feel generic. However, when stock photography is the best option, try to select photographs of similar quality and composition to the Cornell-sourced images it will appear near.

Using images on your sites

Registered image sizes

All of the theme's supported image sizes are declared in web/wp-content/themes/cornell/lib/setup.php.

...

These are in addition to the default image sizes registered by WordPress for Thumbnail, Medium, Medium-Large, and Large. Learn more about post thumbnails from the codex.

Adding new supported image sizes

First of all, don't do this. A better option would be to re-purpose one of the existing sizes, or else reconcile the existing sizes into a smaller subset, before adding yet another file that WordPress must generate for every single uploaded photo.

...

The best place to do it for this theme is inside the function setup() in web/wp-content/themes/cornell/lib/setup.php.

How to regenerate specific image sizes

WP-CLI provides a wonderful command for regenerating thumbnails: wp media regenerate.

...

The above example will only generate the large file size for photos that are missing it. It will not delete any photos that have been orphaned and have no record in the WP database (a good safety precaution).

Art-Directed/responsive images

This theme supports responsive images through <picture> elements with srcset markup ("Art Direction") as well as support for alternate mobile images.

The helper functions for powering this are in web/wp-content/themes/cornell/lib/helpers.php - the_post_responsive_image( $post_id, $size ) - get_the_post_responsive_image( $post_id, $size ) - the_responsive_image( $args ) - get_the_responsive_image( $args )

Aviary integration

Documented separately via PDF

Post thumbnail editor

Documented separately via PDF

Image captions in the image module

All media in WordPress supports a "Caption" field. This can be optionally output when images are embedded in the content area and gets automatically included for images used in CTAs and other specific template areas throughout the theme.

...