I am in the process of extending the default media picker to load in the image cropper on the image that was picked directly in the content section. This means no multiple images can be picked, only a single one. So instead of displaying the "ui-sortable" element on the page, it would lad in the image cropper UI with the image selected.
My problem is how I can send the image that was selected to the image cropper. The property for this is "imageSrc" and the media picker saves all the images picked into an array called "images". In the html the image cropper UI checks to see if imageSrc has a value, and if so, display the UI.
I tried assigning the imageSrc after the image is uploaded to the "images" array and then calling the imageLoaded() function.
$scope.add = function () {
console.log("add link to media");
dialogService.mediaPicker({
startNodeId: $scope.model.config.startNodeId,
multiPicker: multiPicker,
callback: function (data) { //when user selects and image
//it's only a single selector, so make it into an array
if (!multiPicker) {
data = [data];
}
_.each(data, function (media, i) {
if (!media.thumbnail) {
media.thumbnail = mediaHelper.resolveFileFromEntity(media, true);
}
$scope.images.push(media);
$scope.imageSrc = media;
imageLoaded();
$scope.ids.push(media.id);
});
$scope.sync();
}
});
};
But this doesn't load in the image cropper UI. I have it included in my html with an ng-if attached to the wrapper div:
<div ng-if="imageSrc">
I've included all the angular code for both the media picker and the image cropper in my controller and imported all the services needed for both.
Here to get at the underlying MediaItem that the Cropper needs I'm using the mediaResource's getById method to retrieve the Media Object for the picked item, looping through it's properties til I find umbracoFile, and setting this on a ViewModel
mediaResource.getById(vm.overlay.mediaId).then(function (ent) {
//find umbracoFile is there a better way than this?
angular.forEach(ent.tabs, function (tabValue, tabKey) {
angular.forEach(tabValue.properties, function (propValue, propKey) {
if (propValue.alias === vm.status.umbracoFile.alias) {
vm.status.umbracoFile.propertyKey = propKey;
vm.status.umbracoFile.tabKey = tabKey;
vm.overlay.value = propValue.value;
vm.overlay.config = propValue.config;
vm.overlay.show = true;
which I then pass to the overlay directive along with the path to the view to do the cropping:
//move previously saved value to the editor
if ($scope.model.value) {
and here you can see that once it copes with the situation where the underlying media type might be crop based or legacy it sets the imageSrc property:
$scope.imageSrc = $scope.model.value.src
So your Media Picker needs to retrieve the picked media id, get the associated umbracoFile item stored for that picked media item, set this on a viewmodel and your cropping functionality needs to read that viewmodel to access the imgSrc...
hope that helps give you a steer as to why it's not working!
Also if you don't need your media to be stored in the Media Section, you can just use the ImageCropper data type as a property editor, and then the crops appear inline.
Thank you so much, I've been looking everywhere for anything remotely close to what I wanted to achieve. I can definitely use the code you linked. As I understand it, you need to have both the OutCrop and the mediapicker property editor on the same content node? I want to have both be part of the same property editor, but this is a good starting point.
Yes, I needed a quick fix for a client and didn't want to maintain my own media picker, hence the addition of the extra button, but long term aim was to put this functionality into the core, with a different overlay icon over the picked image to fire the cropper overlay, so it could be used in multiple image picking scenarios / grid etc.....
The core media picker will change overtime, (particularly with the use of udi's over ids) so having a separate version of it just doing cropping, would mean a maintenance overhead headache for a package..
My client wants to be able to pick just one crop to be used with the media picker, which will then be shown in the template, instead of being able to manage all the different crops. I'm not very experienced in property editors and I'm quite new to Umbraco as well, but I will give it a try by making a few changes to your project.
I'm not sure what the difference between using ids and udi's are, but I can see your point. I think I'd like to keep them separate and only change the functionality of OutCrop, without touching the media picker.
Let me know if you ever find the time to work on it again, I'd love to extend it to fit my client's needs.
Send media item picked to the image cropper "imageSrc" property
I am in the process of extending the default media picker to load in the image cropper on the image that was picked directly in the content section. This means no multiple images can be picked, only a single one. So instead of displaying the "ui-sortable" element on the page, it would lad in the image cropper UI with the image selected.
My problem is how I can send the image that was selected to the image cropper. The property for this is "imageSrc" and the media picker saves all the images picked into an array called "images". In the html the image cropper UI checks to see if imageSrc has a value, and if so, display the UI.
I tried assigning the imageSrc after the image is uploaded to the "images" array and then calling the imageLoaded() function.
But this doesn't load in the image cropper UI. I have it included in my html with an ng-if attached to the wrapper div:
I've included all the angular code for both the media picker and the image cropper in my controller and imported all the services needed for both.
Hi Thomas
Have a look at this github repository where something similar to what you are describing has been implemented:
https://github.com/marcemarc/OutCrop/tree/master/beta/Our.Umbraco.OutCrop
Here to get at the underlying MediaItem that the Cropper needs I'm using the mediaResource's getById method to retrieve the Media Object for the picked item, looping through it's properties til I find umbracoFile, and setting this on a ViewModel
which I then pass to the overlay directive along with the path to the view to do the cropping:
(https://github.com/marcemarc/OutCrop/blob/master/beta/Our.Umbraco.OutCrop/contentcrop.controller.js)
If you look at the ImageCropper controller it first reads in the details of the media item from this .value property
(https://github.com/umbraco/Umbraco-CMS/blob/dev-v7/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.controller.js)
//move previously saved value to the editor if ($scope.model.value) {
and here you can see that once it copes with the situation where the underlying media type might be crop based or legacy it sets the imageSrc property:
$scope.imageSrc = $scope.model.value.src
So your Media Picker needs to retrieve the picked media id, get the associated umbracoFile item stored for that picked media item, set this on a viewmodel and your cropping functionality needs to read that viewmodel to access the imgSrc...
hope that helps give you a steer as to why it's not working!
Also if you don't need your media to be stored in the Media Section, you can just use the ImageCropper data type as a property editor, and then the crops appear inline.
regards
marc
Thank you so much, I've been looking everywhere for anything remotely close to what I wanted to achieve. I can definitely use the code you linked. As I understand it, you need to have both the OutCrop and the mediapicker property editor on the same content node? I want to have both be part of the same property editor, but this is a good starting point.
Yes, I needed a quick fix for a client and didn't want to maintain my own media picker, hence the addition of the extra button, but long term aim was to put this functionality into the core, with a different overlay icon over the picked image to fire the cropper overlay, so it could be used in multiple image picking scenarios / grid etc.....
The core media picker will change overtime, (particularly with the use of udi's over ids) so having a separate version of it just doing cropping, would mean a maintenance overhead headache for a package..
it's on the list 'todo'
but just not had time
My client wants to be able to pick just one crop to be used with the media picker, which will then be shown in the template, instead of being able to manage all the different crops. I'm not very experienced in property editors and I'm quite new to Umbraco as well, but I will give it a try by making a few changes to your project.
I'm not sure what the difference between using ids and udi's are, but I can see your point. I think I'd like to keep them separate and only change the functionality of OutCrop, without touching the media picker.
Let me know if you ever find the time to work on it again, I'd love to extend it to fit my client's needs.
is working on a reply...