Try our conversational search powered by Generative AI!

Load an Image in a block (in edit mode) on load



I am kindly request your help for me to get an advice to load an image on load in a block in cms edit mode. 

Scenario: I need to do a block for editors to create hotspots in an image. 

My suggestion to create 2 block types where 

Block 1 (InfographicBlock.cs): image (Content reference) as required field with a content area to hold hostspot areas.

Block 2 (InfographicHotspotBlock.cs): will load above loaded image on the block for editors to create hotspot.Simple 1 point (x,y) only. 

I am reading parent block’s (Block 1) image details to Block 2 by using following code : 


public string DeskTopImageURL

    get {

        var contentRepository = ServiceLocator.Current.GetInstance();

        var data = contentRepository.Get(((IContent)this).ParentLink).CreateWritableClone() as InfographicBlock;

        return !ContentReference.IsNullOrEmpty(data.DeskTopImageURL) ? UrlResolver.Current.GetUrl(data.DeskTopImageURL) : string.Empty;



Can someone suggest me a suitable method to load that image in Block 2  in edit mode for editor’s to create hotspots. Any help would be appreciated.

[Pasting files is not allowed]

Edited, Apr 26, 2017 13:09

If I understand correctly you have one block with an image and you want to use additional blocks to hold the co-ords of hot spots.

If that is true can I suggest a different approach: Don't use the second block.

Use a Textarea in the main block (the one with the image) and allow the editor to type the co-ords of the hot spot(s). One per line.

Use a controller for the block and parse the Textarea to extract the co-ords.

Apr 27, 2017 19:40

If you have time, and want to do it on the image, then look at how BVNetwork have done it in this demo site:

Apr 28, 2017 10:53
* 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.