Using Image Cropper with Media Picker instead of File Upload
Why do the Image Cropper only work with Uploaded Images? Is there a way to make it use the Media Picker but have the Cropper in the Content node?
For example, if I upload an image to the Media section I don't want to specify all possible crops on the site. However, when I select the image in a Content node I want to specify crops that are relevant to the Content where the image is being used.
Instead of using predefined crops, you can specify your crop sizes directly in your Razor, the crop will be created around the blue focal point. This means you can have as many crops as you like without the editor having to select them in the back office.
I go through how to implement this method in detail in uHangOut EP30 which you can watch here.
Additionally there is a plan to add a "quick edit" option to each selected media item in the media picker, when clicked this will open a dialog on the right which is actually a editor for the media item, this could include the image cropper and can be saved within the dialog. I believe this is scheduled for v7.2 RTM
You might also be interested in my Slimsy package.
Yes, I've watched the video and it's a great uHangOut that's helped us a lot, many thanks for that.
I think you're touching one big issue here, the "quick edit" or just linking to the media from the content. When I select a media item in the content node, there is no link at all to the media item, so there is some manual work for the editor going to the Media Section and then finding the right image to do the crops.
And secondly, I guess you're pointing out that there are different opinions on how Media and Content relates in Umbraco.
My view is that the Media section is a library for the editors to use and organize images and other media. It's an important section of Umbraco.
When an editor selects images to use in a content node, this is what is selected – the media. Nothing more. The crops for that image has really to do with content, as it is a form of "manifestation" of a media item. There can be different image crops for different manifestations trough different content and the editor should have the power to be able to do these crops in the relevant part – the content.
We could use the Image Cropper directly on the content, but that would really make the Media section obsolete as all images are bound to the content and hidden in the file system.
However, right now we are going with the programmatic crops for different pages/modules where the image is used, and the editor just have to set the focal point. If there are needs in the future to be able to crop "aggressively", ie one crop is in most top left and another in bottom right, we can experiment with this as we've kept different media types and data types for each type of image we have.
If you just want to have additional data for the selected media (like a title) you could also do this with Archetype. I'm using it for a slider for example.
The edit in media link looks nice. Maybe add it as a pull request to the Umbraco source.
That's a good way to use Archetype, Jeroen! We built our sliders some year ago, so we're still using separate document types and hierarchies... Extended Media Picker just works on the selected Media and adds some additional info and link for the editor, that we were missing.
I could create a pull request... but I'm not sure the bigger thumbnail and the additional nodename is right. However, I think it's just the html file and a less file... well. :)
Using Image Cropper with Media Picker instead of File Upload
Why do the Image Cropper only work with Uploaded Images? Is there a way to make it use the Media Picker but have the Cropper in the Content node?
For example, if I upload an image to the Media section I don't want to specify all possible crops on the site. However, when I select the image in a Content node I want to specify crops that are relevant to the Content where the image is being used.
Any thoughts about this from others?
Hi Rolf,
Instead of using predefined crops, you can specify your crop sizes directly in your Razor, the crop will be created around the blue focal point. This means you can have as many crops as you like without the editor having to select them in the back office.
I go through how to implement this method in detail in uHangOut EP30 which you can watch here.
Additionally there is a plan to add a "quick edit" option to each selected media item in the media picker, when clicked this will open a dialog on the right which is actually a editor for the media item, this could include the image cropper and can be saved within the dialog. I believe this is scheduled for v7.2 RTM
You might also be interested in my Slimsy package.
Hope that helps,
Jeavon
Hi Jeavon!
Yes, I've watched the video and it's a great uHangOut that's helped us a lot, many thanks for that.
I think you're touching one big issue here, the "quick edit" or just linking to the media from the content. When I select a media item in the content node, there is no link at all to the media item, so there is some manual work for the editor going to the Media Section and then finding the right image to do the crops.
And secondly, I guess you're pointing out that there are different opinions on how Media and Content relates in Umbraco.
My view is that the Media section is a library for the editors to use and organize images and other media. It's an important section of Umbraco.
When an editor selects images to use in a content node, this is what is selected – the media. Nothing more. The crops for that image has really to do with content, as it is a form of "manifestation" of a media item. There can be different image crops for different manifestations trough different content and the editor should have the power to be able to do these crops in the relevant part – the content.
We could use the Image Cropper directly on the content, but that would really make the Media section obsolete as all images are bound to the content and hidden in the file system.
However, right now we are going with the programmatic crops for different pages/modules where the image is used, and the editor just have to set the focal point. If there are needs in the future to be able to crop "aggressively", ie one crop is in most top left and another in bottom right, we can experiment with this as we've kept different media types and data types for each type of image we have.
Thanks for your feedback.
Just to let you know, I did a quick hack on the Media Picker and just added the information and link to the Media that I wanted:
https://github.com/rolfis/ExtendedMediaPicker
If you just want to have additional data for the selected media (like a title) you could also do this with Archetype. I'm using it for a slider for example.
The edit in media link looks nice. Maybe add it as a pull request to the Umbraco source.
Jeroen
That's a good way to use Archetype, Jeroen! We built our sliders some year ago, so we're still using separate document types and hierarchies... Extended Media Picker just works on the selected Media and adds some additional info and link for the editor, that we were missing.
I could create a pull request... but I'm not sure the bigger thumbnail and the additional nodename is right. However, I think it's just the html file and a less file... well. :)
Maybe just create a pull request for the "edit in media" link. I think a lot of developers will be happy with that :-).
Jeroen
Ok, I did it. We'll see how it goes. :)
Awesome! Could you also create an issue for it and link to the pull request in there? I know the HQ always likes that ;-).
http://issues.umbraco.org/dashboard#newissue=yes
Jeroen
Thanks, done in http://issues.umbraco.org/issue/U4-5317.
It's now my first package ever for Umbraco:
http://our.umbraco.org/projects/backoffice-extensions/extended-media-picker
is working on a reply...