Content Featured Image
10 min
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) \<font color="#0c121d">\</font> aspectratio object example (4 3 ratio) width 4 height 3 resolution 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