November Happy Hour will be moved to Thursday December 5th.

How to Persist and Use Focal Point Data from ImagePointEditor in a Headless Optimizely Setup?

Vote:
 

I'm integrating the ImagePointEditor into a headless Optimizely project (v.12) to allow content editors to set focal points on images. The backend integration is working fine - I can save the focal point data without any issues.

The problem arises when trying to get this focal point data to the frontend. It seems that the data isn't being included in the content delivery API, so the focal point is not available when rendering images on the frontend.

How can I ensure that the focal point data from ImagePointEditor is correctly exposed through the content delivery API and utilized on the frontend in a headless setup?

#328503
Edited, Aug 30, 2024 7:32
Vote:
 

Is the focalpoint property declared as virtual?

If it is have you ensured that your api-call include expand=*, or possibly expand=yourFocalpointProperty?

#328655
Sep 02, 2024 8:39
Vote:
 

The solution is to make sure that the image property is expanded. Then you will get all data from your image model, like alt-text, focal point, etc.

This link shows how to expand multiple levels of a content area:
https://docs.developers.optimizely.com/content-management-system/v1.5.0-content-delivery-api/docs/customizing-conversion-from-icontent-to-contentapimodel#example-expand-multiple-levels-of-nested-contentarea-property
You need to do something similar but for you Image properties.

/// <summary>
/// Makes a content reference always expanded when serialized for Content delivery API.
/// https://docs.developers.optimizely.com/content-management-system/v1.5.0-content-delivery-api/docs/customizing-conversion-from-icontent-to-contentapimodel
/// </summary>
[Serializable]
[PropertyDefinitionTypePlugIn(GUID = "f656760c-3ab9-445e-987b-19e38281c8c9")]
public class AlwaysExpandedContentReference : PropertyContentReference
{
    // Empty constructor should be present, otherwise it will cause exception during startup.
    public AlwaysExpandedContentReference() : base()
    {
    }

    public AlwaysExpandedContentReference(ContentReference contentReference) : base(contentReference)
    {
    }
}
/// <summary>
/// Property converter for ContentReference properties that always expands the content reference.
/// </summary>
public class ExpandContentReferencePropertyConverter : IPropertyConverter
{
    public IPropertyModel Convert(PropertyData propertyData, ConverterContext contentMappingContext)
    {
        var model = new ContentReferencePropertyModel(propertyData as PropertyContentReference, contentMappingContext);
        model.Expand(contentMappingContext.Language);

        return model;
    }
}


 It really shouldn't be this difficult... It would be nice to be able to set an attribute on your property that makes sure that it is always expanded.

#328772
Edited, Sep 04, 2024 10:24
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.