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
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]
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.
If you have time, and want to do it on the image, then look at how BVNetwork have done it in this demo site: