Adaptive Crop

This tool adjusts how images are displayed where the UBCMS changes your original image's proportions, such as some mobile device views and list 'teaser' thumbnails. It compensates where the preferred focus is off-center and is thus also useful to fit 'non-ideal' images into almost any display format.

Typically UBCMS images are assumed to be center-focused. The UBCMS will automatically fill the required width of the image's placement (e.g. full page, or a narrow sidebar), then crops until the image fills the prescribed space (e.g. as a square). If the image is too wide, the left and right edges will be lost, or if the image is too tall, the top and bottom will be lost.

For reference, by default images will display as follows:

• Desktop regular images e.g. 'full size' -- Image fit to full column width, but top and bottom may be cropped (other sizes are smaller).
  
• Desktop 'hero-size' image - Image fit to full window/device width.
  
• Mobile device images -- Usually smaller in size and rectangular unless Flexible Height is selected.
  
• List teasers -- Square and usually smaller in size.
  

Expect to find Adaptive Crop settings in the Image tab of page Properties or the advanced settings for components that include an image (e.g. Directory Entry, Flex Module, Photo, Photo Teaser) plus certain Shared Content templates (e.g. Highlight, Faces & Voices, Faculty Profile, News Article).  

Adaptive Crop modifications are applied to the base image, what you loaded into the component plus any initial refinements with the Rotate tool and Image Size.

If your image's area of interest is to one side, or there is a center dead zone, Adaptive Crop will ensure your preferred part of the image is displayed in all views.

If your original image is center-focused (the main area of interest is roughly centered vertically and horizontally), you will likely not need to make additional changes because the standard adjustments that occurs for mobile phones and thumbnails for list teaser is also center-focused.

1. The image must always fit the exact shape on the page (unless Flexible Height is enabled). The main Crop tool does not constrain the shape. Instead, it reduces the base image, from which the UBCMS then automatically crops it further as needed. Adaptive Crop provides a way to influence that final cropping without requiring you to exactly pick one perfect shape (and change it if you change the Image Size, the page template it is used in, etc.).
2. Sometimes, like with a desktop hero image, the mobile image and desktop image are shaped quite differently and there is no one preferred crop. Adaptive Crop thus provides a way for you to better accommodate each final setting (desktop, mobile, teaser).
   
3. Sometimes, especially for the first image on the page, the image in page Properties, or images in special Shared Content template pages, the image is used in a variety of shapes and sizes as it is fit to a Slide Deck slide, or a tiny square in a List, and a range of everything in between as needed. Adaptive Crop thus allows significant control over what part of the image is the focus, rather than it always focusing on the center area.

The graphical interface displays your base image (what you loaded into the component plus any initial crop or rotation). You can then adjust the focal-point by dragging the 'cross-hairs' target to a preferred part of the image, and use the sliders to adjust the Desktop, Mobile and Teaser boxes, which approximate how the base image will display in desktop, small screen devices and list teaser thumbnails.

We recommend following this order:

1. Set the main Image Size and use the Crop to establish your base image.
   
2. Adjust the Guide Shape to mimic the proportions that were set in the Image Size setting. Choose from Landscape, Portrait, Square, or Hero.
3. The graphical interface will now approximate how your base image will be displayed in desktop and mobile views. (Teaser thumbnails are always square.)
4. If desired, drag the cross-hair in the graphical interface to re-center the mobile and teaser views to best advantage, especially if your image is not center-focused or has a center dead zone.
5. If desired, use the Mobile zoom and Teaser zoom sliders to tighten those crops within your preferred focal area..
6. Save your choices then test the results using the Mobile Device Simulator.
7. If desired, reopen the component and make any additional adjustments.