---
title: Content Featured Image
slug: experience/content-featured-image
description: Discover the details of a specific message on Microsoft Teams with this document providing the tenant ID, group ID, parent message ID, team name, channel name, and creation time. Access the link to view the comprehensive information within the message, si
docTags: 
createdAt: 2023-09-11T16:07:51.478Z
---

:::hint{type="info"}
**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**:

1. **Zooming into the image**
2. **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):

```none
"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**

```javascript
    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**

```none
$functions.getAspectRatio($context.device_type, $context.device_orientation)
```

:::hint{type="danger"}
<font color="#0C121D"></font>
:::

### AspectRatio object

&#x20;Example (4:3 ratio)

```json
width: 4
height: 3
```

## Resolution Strategy 

You may set the resolution strategy for the image to be `fixed` or `dynamic`.&#x20;

**fixed**: The image will use the width

**dynamic:&#x20;**&#x74;he image will be scaled according to the following settings:&#x20;

**min -** automatically use the shorter edge

**max -&#x20;**&#x61;utomatically 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&#x20;

- The content featured component offers a "propertyReference" to declare a URL or thumbnail object from the content properties

## Fallback&#x20;

- 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.&#x20;

Using the featured image component will automatically apply cropping based on the hubs' focal point information.&#x20;