Accessing Referencing Property Attributes in ImageMediaData

Vote:
 

Hi,

We’re currently implementing a custom image processing solution in our Optimizely CMS project where we generate different image proportions (e.g., Extra large, large, medium, small) based on image type (e.g., thumbnail vs. banner) based on the focal point selected by content editors.

We’re using the ImagePointEditor package to allow focal point selection in the CMS UI. Here's an example of how it's integrated in our extended media class:

[ContentType(DisplayName = "Image File", GUID = "...")]
[MediaDescriptor(ExtensionString = "jpg,jpeg,png,svg")]
public class ImageMediaData : ImageData
{
    [Display(Name = "Alt Text")]
    public virtual string? AltText { get; set; }

    [UIHint(ImagePoint.UIHint)]
    [Display(Name = "Focal point")]
    public virtual ImagePoint? FocalPoint { get; set; }
}

To determine what image variants to generate (e.g., 5 sizes for thumbnails or 5 for banners based on Bootstrap breakpoints), we planned to annotate the referencing properties with custom attributes, like this:  

[Display(Name = "Page Banner Image")]
[ImageType("banner")]
public virtual ContentReference? PageImage { get; set; }

The challenge is: inside the ImageMediaData context, we don’t know which property (e.g., PageImage, ThumbnailImage, etc.) is referencing the image. Therefore, we can't retrieve the attribute metadata (like ImageDimensionValidation) or make decisions on whether to generate banner or thumbnail image variants.

We’re looking for guidance on:

  1. Is there a way to determine the referencing property and access its attributes from  within the ImageMediaData class (or a related context)?

  2. If not directly supported, is there a known pattern or workaround in Optimizely to achieve this kind of referencing metadata awareness?

Any guidance, suggestions, or sample implementations would be highly appreciated.

Thanks!

#339141
Edited, Jun 02, 2025 6:06
Vote:
 

Hi Areeb,

You can define a custom attribute to tag each property that holds a ContentReference to an image:

[AttributeUsage(AttributeTargets.Property)]
public class ImageTypeAttribute : Attribute
{
    public string TypeName { get; }
    public ImageTypeAttribute(string typeName) => TypeName = typeName;
}

and use that annotation as below:

public class HomePage : PageData
{
    [Display(Name = "Page Banner Image")]
    [ImageType("banner")]
    public virtual ContentReference? PageImage { get; set; }

    [Display(Name = "Card Thumbnail")]
    [ImageType("thumbnail")]
    public virtual ContentReference? CardThumb { get; set; }
}

and in the view, 

@model HomePage
@Html.RenderTypedImage(Model, nameof(Model.PageImage), altText: "Site banner") @Html.RenderTypedImage(Model, nameof(Model.CardThumb), altText: "Featured card")

Hope this helps.

#339213
Edited, Jun 03, 2025 13:13
* 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.