Adaptive Crop

Adjust image that is displayed on mobile devices and list teasers.

On This Page:

Last reviewed: April 20, 2022

Flex UI is available to all UBCMS users now. Learn more.

Overview

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.

When should I use this tool?

Zoom image: This image would benefit from Adaptive Crop. This image would benefit from Adaptive Crop. In a cropped view, the central area would focus on a mud splash, and miss the contestants in the wings.  And a super-wide hero version might miss the contestants' heads which are in the upper third.

This image would benefit from Adaptive Crop.

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.

Why can't I just crop it the way I want and be done?

  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.

Instructions

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.

How should I use this tool?

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.

Adaptive Crop settings

  • Adapative Crop is applied to your original image after any Image Size changes.
  • These modifications override any changes previously made with the main Crop tool. You will be asked 'Would you like to override the native crop and use the adaptive crop?' Click Override to get started.
  • Flexible Height is applied to your desktop image after Adaptive Crop adjustments and has no impact on mobile or teaser images.
Zoom image: Adaptive Crop settings in a Photo component. In this example from Oozfest, the center of the original image is a muddy splash, so the cross-hairs and sliders have been used to refocus the images on the left side, where team members are clustered.

Adaptive Crop settings in a Photo component.

The tool approximates how your original image will be cropped for desktop, mobile and teaser (thumbnail) views, allowing adjustments to better represent your desired focus in these contexts.

The interface responds to the main Image Size setting. Set the Image Size, then drag the Adaptive Crop cross-hairs to the center of your desired focus, and adjust the three sliders as desired to highlight the three zones.

The interface approximates the final displays. After you make your adjustments, we suggest you preview the results (e.g. using the mobile device emulator). And if you realize the List thumbnail is not working out as desired, consider also loading an image into page Properties that is cropped exactly as desired, where it will be used preferentially for teasers.

Examples

Base Image

Oozfest - the base image without Adaptive Cropping.

The base image without Adaptive Cropping. The center focus is a muddy splash, while to the far left is a better focus with the team members in action.

List Teasers

Zoom image: Examples of two list teasers. The top image is cropped normally, center-focused on a muddy splash. The bottom image has used Adaptive Crop to focus to the left of center where team members are clearly visible. Examples of two list teasers. The top image is cropped normally, center-focused on a muddy splash. The bottom image has used Adaptive Crop to focus to the left of center where team members are clearly visible.

Examples of two list teasers. The top image is cropped normally, center-focused on a muddy splash. The bottom image has used Adaptive Crop to focus to the left of center where team members are clearly visible.

Master Classes

Was This Information Helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)
(Required)