Content Featured Image
Content Feature Image always has LCP Priority set to high.
Possible settings for Featured Images are:
- Focal Point
- Crop / Zoom
- Aspect Ratio
- Resolution Strategy
- Thumbnail Reference
- Property Reference
- Fallback
- Hide Caption
Focal Point / Focus Point
Configuring the focal point serves two main purposes:
- Zooming into the image
- Adjusting the output aspect ratio
1. Zooming
Depending on how the focal point is configured in the HUB, the image can be zoomed into a specific area. The crop will be centered around the defined focus point, and the original image will be cropped accordingly.
2. Changing the Aspect Ratio
Since version 4.0, the aspectRatio field must be explicitly configured for every component that displays images. (This applies to Content Component and Issue Search component, too.)
The aspectRatio field supports two formats:
String
Example (4:3 ratio):
"1.33333"The aspect ratio might also be configured using a function in custom.server.ts. It can depend on device type and orientation. The function may be placed in the string field.
Example custom.server.ts
getAspectRatio: (deviceType, deviceOrientation) => {
switch (deviceType) {
case 'desktop':
return '1';
case 'tablet':
return deviceOrientation === 'landscape' ? '0.75' : '0.5';
case 'phone':
return deviceOrientation === 'landscape' ? '0.55' : '0.35';
default:
// Optional: handle unknown device types
console.warn(`Unknown device type: ${deviceType}`);
return ''; // Fallback ratio
}
}Views.json
$functions.getAspectRatio($context.device_type, $context.device_orientation)Important note !!!: In the current state, the image aspect ratio does not change when the orientation is changed or when the browser window is manually resized.
AspectRatio object
Example (4:3 ratio)
width: 4
height: 3Resolution Strategy
You may set the resolution strategy for the image to be fixed or dynamic.
fixed: The image will use the width
dynamic: the image will be scaled according to the following settings:
min - automatically use the shorter edge
max - automatically use the longer edge
width - use width
height - use height
Thumbnail Reference
- The content featured component offers a "thumbnailReference" to declare a different thumbnail than the default one
Property Reference
- The content featured component offers a "propertyReference" to declare a URL or thumbnail object from the content properties
Fallback
- The content featured component offers a "fallbackToDefault" to use a default thumbnail as a fallback
Hide Caption
- The content featured component offers a "hideCaption" , if the featured image is not meant to show the caption and credits of that image.
Further Settings and behaviour
The featured image respects the maximum width for images set on the content component.
Using the featured image component will automatically apply cropping based on the hubs' focal point information.