Someone wants you to develop a Sitecore custom field which allows for the users to pick the image coordinate inside Sitecore. The main purpose is to render the hot spots correctly on Hero Image / Banner Image as are the ones are defined inside Sitecore.

Assumptions:

• based on GOOGLE MAP LOCATION PICKER FIELD
• the hot spot items are created as sub-items of Hero / Banner items
• there is a Sitecore Image field for Hero Image / Banner Image in Hero / Banner item

If that is the case, you may try to play with my Image Coordinate Picker field.

How to install it

Download this tool as a Sitecore package on Sitecore Marketplace or on Gitlab then install it to your Sitecore instance via Installation Wizard.

Update (04-August-2017): a new version 1.1 is to make it work properly in case there is more than 01 Image Coordinate Picker field on a template.

• 
• the known issue: if you click on any Pick Coordinate link, there will be 03 different dialogs are displayed: one of Location 1, one of Location 2 and one of Location 3 . The root cause is that version 1.0 does not restrict the current control of a specific Pick Coordinate link (the reference)
• how to solve it: by adding the logic below
  • 

How to use it

1. create a new Sitecore template, let’s say HotSpot
   • add a new field:
     • Name: Coordinate
     • Type: Image Coordinate Picker
     • 
2. create a new Sitecore template, let’s say Banner
   • add a new field:
     • Name: HeroImage
     • Type: Image
     • 
3. add a new item Banner1 whose template is Banner
   • HeroImage field: browse and select an image
   • 
4. add a new item HotSpot1 whose template is HotSpot as a sub-item of Banner1
   • 
5. click on Pick Coordinate link, Image Coordinate Picker dialog should be displayed
   • 
6. click anywhere on Image Frame to pick your desired coordinate then click Select button to get the coordinate from the dialog and close it
7. click Save button (or Ctrl+S) to save the coordinate to HotSpot1
   • 
8. repeat #4 to add HotSpot2, HotSpot3, …, HotSpotN

Note: there are some settings for Image Coordinate Picker field, open \App_Config\Include\z.Vhs.ImageCoordinatePicker.config to update them for your needs

• Vhs.ImageCoordinatePickerField.DialogWidth: the default width of the dialog
• Vhs.ImageCoordinatePickerField.DialogHeight: the default height of the dialog
• Vhs.ImageCoordinatePickerField.ImageFieldName: the image field names of the Sitecore items which you want to define the hot spots on
• Vhs.ImageCoordinatePickerField.ImageAlternateText: the alternate text of Image Frame which is displayed when no image is available
  • 

Integration examples:

• My simple Sitecore development framework – Version 1.4

Not Good Enough? Please feel free to download the source code and add your own enhancements if necessary.

Got issues?

Please send your issues (with screenshots if possible) to viet.hoang.sitecore@gmail.com so that I have a chance to understand your problem and be able to suggest the solution.

Happy Sitecore coding!