I have created a property editor for Umbraco 7 that lets me add a hotspot to an image ( it's here on GitHub ).
Right now, the image is set when creating the data-type, but I'd much rather have it be able to pick that up from the document it's being used on (e.g. by just specifying a propertyAlias) but I can't figure out how to get to another property on the document being edited.
I kind of know I need to inject a service, but the API docs leave me with more questions than answers...
Does anybody know how to do this, or maybe know of another property editor that does something similar that I could take a look at?
It seems like you've figured out how to get the property value, so I'll skip that part.
Once you have the value (the media UDI), you can use the entityResource service in Angular to look up the underlying entity.
The function you'll need is called getById, and takes the ID or UDI as the first parameter (IIRC older versions of Umbraco didn't support UDIs for this function) and then the entity type as the second parameter (which is this case should be Media).
Once you get the entity object from the API, you can use the mediaResource to get the file path.
angular.module("umbraco").controller("MyController", function ($scope, entityResource, mediaHelper) {
var value = "umb://media/cf1ab8dcad0f4a8e974b87b84777b0d6";
entityResource.getById(value, "Media").then(function (media) {
console.log(JSON.stringify(media, null, " "));
var file = mediaHelper.resolveFileFromEntity(media, false);
console.log(file);
});
});
With this example, the media object will look something like:
Technically you can grab the file path via media.metaData.MediaPath, but it may be safer to use the media helper. Either way, the file path is then in this case:
I'm actually using the mediaResource's getById() method which also works with a UDI (even though the docs say it should be an int). The media returned from that has a .mediaLink property with the path in it.
How to access another property's value inside a property editor?
I have created a property editor for Umbraco 7 that lets me add a hotspot to an image ( it's here on GitHub ).
Right now, the image is set when creating the data-type, but I'd much rather have it be able to pick that up from the document it's being used on (e.g. by just specifying a propertyAlias) but I can't figure out how to get to another property on the document being edited.
I kind of know I need to inject a service, but the API docs leave me with more questions than answers...
Does anybody know how to do this, or maybe know of another property editor that does something similar that I could take a look at?
Update:
So I managed to atleast find the other properties (through Inception-level amounts of
.$parent) and I can find a property with a requested alias.But when I get the value of the property, I get (of course) something like
umb://media/12345678and need to get the path to the image instead.Goes looking for a service...
Hi Chriztian,
It seems like you've figured out how to get the property value, so I'll skip that part.
Once you have the value (the media UDI), you can use the
entityResourceservice in Angular to look up the underlying entity.The function you'll need is called
getById, and takes the ID or UDI as the first parameter (IIRC older versions of Umbraco didn't support UDIs for this function) and then the entity type as the second parameter (which is this case should beMedia).Once you get the entity object from the API, you can use the
mediaResourceto get the file path.With this example, the
mediaobject will look something like:Technically you can grab the file path via
media.metaData.MediaPath, but it may be safer to use the media helper. Either way, the file path is then in this case:Hope that helps ;)
Hi Anders,
Thank you very much - I've got it working now.
I'm actually using the
mediaResource'sgetById()method which also works with a UDI (even though the docs say it should be anint). Themediareturned from that has a.mediaLinkproperty with the path in it./Chriztian
is working on a reply...