Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • bh 211 posts 720 karma points
    Aug 23, 2018 @ 14:02
    bh
    0

    Hot Spot Property Editor

    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.

  • Lee Kelleher 3886 posts 14629 karma points MVP 9x admin c-trib
    Aug 23, 2018 @ 14:15
    Lee Kelleher
    2

    Hi Ben,

    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.

    https://github.com/mattbrailsford/umbraco-photon

    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?

    Cheers,
    - Lee

  • bh 211 posts 720 karma points
    Aug 23, 2018 @ 14:29
    bh
    0

    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 ?

  • Lee Kelleher 3886 posts 14629 karma points MVP 9x admin c-trib
    Aug 23, 2018 @ 14:32
    Lee Kelleher
    0

    There's a package zip download on the repo...

    https://github.com/mattbrailsford/umbraco-photon/raw/master/Package/Photon_0.1.zip

    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. :-)

    Good luck!

    Cheers,
    - Lee

  • Matt Brailsford 2300 posts 11175 karma points MVP 6x c-trib
    Aug 23, 2018 @ 14:36
    Matt Brailsford
    1

    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:

    https://github.com/mattbrailsford/umbraco-photon/raw/wip/media-picker/Package/Photon_0.2.zip

    Hope it helps.

    Matt

  • bh 211 posts 720 karma points
    Aug 23, 2018 @ 14:44
    bh
    0

    @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!

  • bh 211 posts 720 karma points
    Aug 23, 2018 @ 14:48
    bh
    0

    Nevermind @MattBrailsford I read the packages.xml and figured out the file structure. Thanks again!

  • Lee Kelleher 3886 posts 14629 karma points MVP 9x admin c-trib
    Aug 23, 2018 @ 15:15
    Lee Kelleher
    0

    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...

    http://www.jondjones.com/learn-umbraco-cms/umbraco-developers-guide/umbraco-packages/how-to-install-an-umbraco-7-package

    Hope this helps?

    Cheers,
    - Lee

  • bh 211 posts 720 karma points
    Aug 23, 2018 @ 15:21
    bh
    1

    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!

  • Lee Kelleher 3886 posts 14629 karma points MVP 9x admin c-trib
    Aug 23, 2018 @ 15:50
    Lee Kelleher
    0

    No worries at all. It's one of those, everything is obvious (once you know the answer).

    Cheers,
    - Lee

  • bh 211 posts 720 karma points
    Aug 27, 2018 @ 14:48
    bh
    0

    @MattBrailsford the Photon editor has an image upload and that's it. I don't see any mechanism to add/edit hotspots. enter image description here Am I missing something? Have I misconfigured it somehow?

  • Miguel 11 posts 83 karma points
    Sep 04, 2018 @ 12:48
    Miguel
    0

    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:

    data.tabs.pop();
    

    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!!

  • bh 211 posts 720 karma points
    Sep 04, 2018 @ 13:26
    bh
    0

    @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?

  • Miguel 11 posts 83 karma points
    Sep 04, 2018 @ 15:11
    Miguel
    0

    Hi @bh, 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.

  • bh 211 posts 720 karma points
    Sep 04, 2018 @ 16:14
    bh
    0

    Thank you @Miguel. That popped-up a pencil and a trashcan. I clicked the pencil and the editor is blank.enter image description here I was expecting to see the property editors for wHotspot there. enter image description here

    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!

  • Miguel 11 posts 83 karma points
    Sep 10, 2018 @ 11:14
    Miguel
    0

    Hi @bh,

    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.

  • bh 211 posts 720 karma points
    Sep 10, 2018 @ 13:41
    bh
    0

    @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.

    enter image description here

  • Miguel 11 posts 83 karma points
    Sep 21, 2018 @ 14:14
    Miguel
    0

    Hi @bh

    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.

  • Adam Prendergast 33 posts 77 karma points c-trib
    Jan 28, 2019 @ 14:07
    Adam Prendergast
    0

    Hi @bh,

    Did you manage to get this plugin working. I'm thinking of giving it a try myself. Any help, gotchas would be much appreciated.

    Thanks, Adam

  • bh 211 posts 720 karma points
    Jan 28, 2019 @ 14:49
    bh
    0

    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.

  • Adam Prendergast 33 posts 77 karma points c-trib
    Jan 28, 2019 @ 15:08
    Adam Prendergast
    0

    Fair enough. I'm going to give it a go any way... I'll let you know if I have any luck!

  • Nik 1155 posts 4763 karma points MVP 2x c-trib
    Jan 28, 2019 @ 15:34
    Nik
    0

    I have this package working on an Umbraco v7.10.5 site. Don't remember having an issues getting it to work :-)

  • Adam Prendergast 33 posts 77 karma points c-trib
    Jan 28, 2019 @ 16:41
    Adam Prendergast
    0

    Hey @bh,

    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.

  • jake williamson 150 posts 632 karma points
    Sep 20, 2019 @ 08:55
    jake williamson
    0

    hey out there,

    i was wondering if anyone has had a stab at converting photon to version 8 of umbraco?!

    spent a couple of hours on it this arvo and so far, so good ;)

    managed to get as far as clicking the hotspot edit button and opening the dialog and then got stuck...

    the main question i have at the moment is if the DetachedPublishedContent class in photon has now been replaced by the new PublishedElement class?

    interestingly if i search for DetachedPublishedContent in the umbraco v8 core there's this comment:

    // notes:
    // a published element does NOT manage any tree-like elements, neither the original NestedContent (from Lee) nor the DetachedPublishedContent POC did.
    

    i'm guessing that's lee kelleher being referenced there ;)

    it feels like the editor window could use the same process as the recently released doc type grid editor

    enter image description here

    it's a sweet package, it'd be great to get it up and running in v8!

Please Sign in or register to post replies

Write your reply to:

Draft