Forcing the image thumbnail UI element in all properties mode

Erik Täck

Vote:

Hi,

So I have a ContentReference property where the editor can pick images, videos, and an interface. I would like to force this property to have the image picker UI element in where there is a preview for an image since 98% of the time, there will be images there.

This is my property definition:

        [Display(GroupName = CustomTabs.Media, Order = 103, Name = "Local media", Description = "Replaces the media block if set.")]
        [AllowedTypes([typeof(IAmMedia), typeof(VideoData), typeof(ImageData)])]
        [CultureSpecific(true)]
        [UIHint(UIHint.Image)]
        public virtual ContentReference? LocalMedia { get; set; }

The above will just display the generic content reference picker UI element. If I remove the types IAmMedia and VideoData from the allowedtypes, leaving everything else as is, the image thumbnail preview element is shown instead. It seems there is somewhere some hidden code determining what to show in the edit mode only depending on the allowed types for a property, very tricky to find.

Is there a way to force the image thumbnail dialog? I thought that was determined by the UIHint (I have also tried using the UIHint overload with presentationlayer.edit to no avail) I have tried looking at UIDescriptors or EditorDescriptors, but that entire system is completely filled with magic string classes and generic dictionaries of objects with yet more magic strings configuring the javascript dojo interface, so I have no idea where to begin.

Ideally I would like to be able to configure what to return for the thumbnail myself somehow, but first I would just like to say "show the thumbnail here if you can find it" (cause I would expect there are some error handling there already in case of a broken/missing image).

#334241

Dec 12, 2024 7:24

PuneetGarg

Vote:

when you render it are you using @html.propertyfor ?

#334414

Dec 16, 2024 16:34

Erik Täck

Vote:

My question is about the property edit mode/all properties view in the CMS, its rendered automatically by the CMS.

#334415

Dec 16, 2024 16:38

Paul Gruffydd

Vote:

What version of the CMS are you using? Is this CMS version 12+ or <=11?

#334455

Dec 17, 2024 10:52

Erik Täck

Vote:

Its CMS12 (we're in the CMS 12 specific forum)

12.32.0 CMS.UI to be more specific.

#334456

Dec 17, 2024 12:40

Paul Gruffydd

Vote:

Ok. Interesting. I gave it a try in an alloy site and I got the media picker (even if I didn't have any media types in the allowed list) however that was version 12.30.0. When I upgraded to 12.32.0, I started seeing your issue. I'm wondering whether it's related to one of these bug fixes:
https://world.optimizely.com/support/bug-list/bug/CMS-35530
https://world.optimizely.com/support/bug-list/bug/CMS-35549

#334458

Dec 17, 2024 14:00

Erik Täck

Vote:

Paul:

Very nicely spotted, that seem to be exactly it. I reverted down to 12.30.0, and then everything works again.

I diffed the CMS.zip module package between 12.31.0 and 12.31.1 (as indicated byg bug35530), and the changes made to the function _isSelectorFor in ClientResources\epi-cms\contentediting\editors\ContentReferenceEditor.js.uncompressed.js seem to indicate that instead of checking if any type is image, now all of them must be image. But my expertise in dojo/dijit is not that excellent except through debugging the CMS UI..

Unsure if this is intended or not, otherwise, someone with bug reporting privileges (I can only read the bug list it seems, not report anything), feel free to report it.

#334459

Edited, Dec 17, 2024 15:05

Erik Täck

Vote:

If someone else is interested, I managed to create a workaround using an editordescriptor and a override for the editor. Obviously this will become weird if you use other restrictions, but as it require me to set a specific UIHint on the property, I am myself awaire of the limitations:

Decorate any relevant contentreference property with [UIHint(ForceThumbnailEditorDescriptor.UIHINT, PresentationLayer.Edit)]

/// <summary>
/// Forces the thumbnail editor element in the edit mode.
/// </summary>
[EditorDescriptorRegistration(TargetType = typeof(ContentReference), UIHint = UIHINT, EditorDescriptorBehavior = EditorDescriptorBehavior.PlaceLast)]
public class ForceThumbnailEditorDescriptor : ContentReferenceEditorDescriptor
{
    public override string RepositoryKey => "media";

    public const string UIHINT = "ThumbnailEditor";

    public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
    {
        base.ModifyMetadata(metadata, attributes);

        ClientEditingClass = $"/assets/system/cms/clientresources/ForcedThumbnailEditor_v1.js";

        // this must be set for the picker dialog to appear on thumbnail click, otherwise only drag and drop from the assets pane is available
        metadata.EditorConfiguration["repositoryKey"] = RepositoryKey;
    }
}

define([
    // dojo
    "dojo/_base/declare",

    // epi.cms
    "epi-cms/widget/ThumbnailSelector",
    "epi-cms/contentediting/editors/ContentReferenceEditor"
], function (
    // dojo
    declare,

    // epi.cms
    ThumbnailSelector,
    ContentReferenceEditor
) {

    return declare([ContentReferenceEditor], {
        _getContentSelectorType: function () {
            // always return the thumbnail editor, regardless of forced types
            return ThumbnailSelector;
        }
    });
});

#334503

Dec 18, 2024 12:42