Press Ctrl / CMD + C to copy this to your clipboard.
This post will be reported to the moderators as potential spam to be looked at
Can anyone recommend a hot spot property editor? I need to be able to upload an image and identify multiple "hot spots" X/Y coordinates by % to be able to manage hot spots on a responsive image an example of the kind of end effect I'm going for is something like this.
A few years ago, Matt Brailsford did a prototype called Photon. It wasn't released as a downloadable package on Our, but the source-code is available on GitHub.
I'm sure there's a video demo of it out there somewhere, but I can't find it at the moment.
Hope this helps?
Thank you @LeeKelleher! I install umbraco from *.zip Any idea how I would go about installing this? What's the chance this would work with 7.12.0 ?
There's a package zip download on the repo...
It's worth bearing in mind that, I've never tried it myself, and it was developed 4 years ago.
BUT... but if it does work, it'd be a pretty sweet solution, so worth the risk of trying it out, IMHO. :-)
It's defo on my list to update soon, but it should still work. You'll likely want to use the version in the media picker branch though, so this one:
Hope it helps.
@MattBrailsford thank you so much! So, I was asking @LeeKelleher about how to install this. Sorry, but I've never installed a package manually before. I saw in the package.xml about creating a "Photon" folder under "\app_plugins" does that hold everything from the *.zip but the *.dll and the *.dll goes in the "\bin" ? Thank you so much for creating this! Can't wait to get it installed!
Nevermind @MattBrailsford I read the packages.xml and figured out the file structure. Thanks again!
Ah sorry, I misread what you were asking. It's interesting, as I've been doing Umbraco for so long, I'd forgot that the initial steps aren't that straight forward, e.g. "How do I install a package?"
You shouldn't need to manually extract the package files from the zip, they should be installable via the Developer/Packages section in the back-office.
I had a look around the documentation section, but I couldn't find anything relevant. I did find this blog post from a Google search...
Rock on! Drag and dropped the *.zip to the appropriate location and it worked like champ. I've installed packages from the "store" before, but never this way. Should have known. Thank you!
No worries at all. It's one of those, everything is obvious (once you know the answer).
@MattBrailsford the Photon editor has an image upload and that's it. I don't see any mechanism to add/edit hotspots. Am I missing something? Have I misconfigured it somehow?
Just a little note to make it work on the latest versions of Umbraco, you will need to remove the following line from the photon.js file:
This line is supposed to remove the last tab (Properties) from the edition dialog panel of the photon document types, but Umbraco is not using it anymore.
Thanks @MattBrailsford for this great package!!
@Miguel I rem'd out that line of code. I see no difference in the property editor. Still, just the image upload without any mechanism to add/edit hot spots. Is there another step? Does something need to be recompiled?
usually, to add the hotspots you need to literally draw them. Click with your mouse on top of the image and draw a rectangle while keeping it pressed. As far as I know it should work on all browsers.
Thank you @Miguel. That popped-up a pencil and a trashcan. I clicked the pencil and the editor is blank. I was expecting to see the property editors for wHotspot there.
That's question 1: How to get the wHotspot property editor to show when you click the pencil?
Question 2: How do I loop through the hotspots and access the wHotspot data in razor?
Many thanks in advance!
Please make sure you remove the line I suggested from the photon.js file, as it will prevent the document properties to be displayed on the latest versions of Umbraco. This should do the trick, otherwise try to debug using the developers tool to check what is going on.
To get the hot spot properties you can adapt the code below:
var hotspot = Model.Content.GetPropertyValue<object>("propertyAlias") as PhotonValue;
var tags = hotspot.Tags;
foreach (var tag in tags)
decimal x = tag.X;
decimal y = tag.Y;
decimal width = tag.Width;
decimal height = tag.Height;
IPublishedContent metadata = tag.MetaData;
You can then get the property values from the metadata object.
@Miguel thanks for responding! I have rem'd out the code data.tabs.pop(); That hasn't resolved the issue. I'm getting a 404 error looks to be coming from /dependencyHandler.axd
I put several console.log() into photon.js and none of them fire. Wondering if the 404 is preventing the photon.js from running.
The 404 error pops when I click on the HotSpot property editor tab to expand the left pane and show the image i'm adding hot spots to. I tried deleting the hotspot (item 1) and starting over and got the same 404 error.
it looks like there is an error somewhere in the JS that is preventing it to work. You should be able to debug the code and find out exactly where it breaks. If you debug your solution locally, you should see the list of resources on your browser developer tools instead of the dependency handler file.
Did you manage to get this plugin working. I'm thinking of giving it a try myself. Any help, gotchas would be much appreciated.
Never did get it to work. I created a stand alone page that allowed the user to upload an image. Anywhere the user clicked on the image it would display the x/y coordinates. The user could then enter those coordinates into the CMS. Not smooth, but effective.
Fair enough. I'm going to give it a go any way... I'll let you know if I have any luck!
I have this package working on an Umbraco v7.10.5 site. Don't remember having an issues getting it to work :-)
I've managed to get it working.
1) Installed the 'wip/media-picker' branch package that Matt mentioned above. (Photon_0.2.zip).
2) Commented out the JS line recommended be @Miguel.
3) Incremented the Client Dependency number and actioned an IIS app refresh.
4) Created a doctype to as a template for 'meta data' and referenced this in the settings for the data type.
@bh I wonder if steps 3 & 4 were what you were missing?
Hope it helps someone anyway.
is working on a reply...
Write your reply to:
Image will be uploaded when post is submitted