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

Sampath Gunarathne

Vote:

Hi,

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 :

[Ignore]

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]

#177997

Edited, Apr 26, 2017 13:09

David Twiggs

Vote:

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.

#178052

Apr 27, 2017 19:40

Sebastian Enberget

Vote:

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

https://github.com/BVNetwork/CommerceStarterKit

#178058

Apr 28, 2017 10:53