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.
Here are suggestions for picking the best images to illustrate your message:
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 the custom defined sizes: - article-single-featured: 840 x 560 - article-slideshow: 1686 x 1126 - article-profile: 400 x 400 - content-cta: 1446 x 1080 - post-list: 1426 x 838 - search: 370 x 370 - footer-cta: 622 x 467 - module-full-news: 400 x 400 - hero-landing: 1435 x 720 - hero-landing-mobile: 400 x 400 - hero-desktop: 1527 x 900 - hero-mobile: 877 x 877 - inline-cta: 400 x 300 - half-modules: 145 x 145 - list-module: 185 x 185 - contact: 90 x 90
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.
Declaring support for a supported image size is easily done with a single function call: php add_image_size( $slug, $max_width, $max_height, $force_crop ); This function can be called at virtually any time, but the best place to declare it is at the after_setup_theme hook.
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.
It can be used with a few additional flags so that only specific thumbnail sizes are regenerated, and only if the file doesn't already exist, like so: bash wp media regenerate --skip-delete --only-missing --image_size=large
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
Post thumbnail editor
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.
In addition to this caption field, the Image Module also has its own Image Caption output. This field is not dynamically linked to the selected image in any way, on purpose. Having this as a stand-alone field allows for an alternate, custom caption to be used for an image that is embedded via the image module regardless of the default caption used for this image everywhere else.