Adjust image that is displayed on mobile devices and list teasers.
Last reviewed: April 20, 2022
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:
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.
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:
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.