Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

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


  • Adrian 11 posts 41 karma points
    Jun 01, 2014 @ 08:31
    Adrian
    0

    MultipleMediaPicker and Image Cropper v7.1 working together

    Is there any way to use the Multiple Media Picker (MMP) together with the Umbraco Image Cropper in Umbraco 7.1?

    Essentially, I would like the admin to have the ability to update the crop (focal point, size, etc) for each image uploaded for the MMP. If the user uploads 5 images for a banner slideshow, then they would be able to crop each one differently.

    Can this be done? Or will I need to create multiple Image Cropper Instances to cater for this (as the IC is limited to one image upload / select for each instance)?

    Any assistance would be much appreciated.

    I did try to add the image cropper data type to the media>image media type, however this inserted a new image cropper instance with new upload field (as expected) rather than allowing the user to applying the crop to the selected media image.

    Thanks

    Copy Link
  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Jun 01, 2014 @ 08:53
    Jeavon Leopold
    100

    Hi Adrian,

    Yes it's totally possible. I would suggest you watch this weeks uHangOut where I go through the Image Cropper in detail.

    Once you've got the cropper setup on the "Image" type then it should be simple to get it working, something like:

    @{
    var bannerList = CurrentPage.banner.ToString().Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
    var bannerCollection = Umbraco.Media(bannerList);
    foreach (var item in bannerCollection)
    {
        <img src="@item.GetCropUrl("myCrop")" />
    }
}

    Snippet from multinode picker documentation here

    Jeavon

    Copy Link
  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Jun 01, 2014 @ 08:58
    Jeavon Leopold
    0

    Edited above snippet as Umbraco.Content should be Umbraco.Media in your case as your picker is picking media.

    Copy Link
  • Adrian 11 posts 41 karma points
    Jun 01, 2014 @ 09:07
    Adrian
    0

    Ahaaahh - thanks Jeavon,

    It all became clear once I changed the "image" type upload data type with the image cropper data type :)

    Thanks also for the uHangout link - look forward to watching!

    Cheers,

    Adrian

    Copy Link
  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Jun 01, 2014 @ 10:02
    Jeavon Leopold
    0

    Perfect!

    Copy Link
  • Craig100 1136 posts 2523 karma points c-trib
    Sep 05, 2014 @ 19:38
    Craig100
    0

    Just watched the excellent uHangout with Jeavon demo'ing the new image cropper and slimsy package. Have got them both working in my latest project but with just one little problem. I'm using a multiple media picker and have the image cropper added to the image media type. This drives a flexslider on the home page. All works apart from when the page first loads, all the slider images are very pixellated. If I change the size of the browser window, they come up to full res, even at the original full window size. This is using Google Chrome 37 on Windows 7.

    Code to output the images:-

    foreach (var sliderImage in sliderImagesCollection)
    {   <li>   
        <img src="@sliderImage.GetResponsiveCropUrl("slider")" alt="@sliderImage.Name">
        <p class="flex-caption">@sliderImage.Name</p>      
    </li>
    }

    Code to initiate slimsy:-

    <script>
    window.slimmage = { verbose: false };
</script>
<script src="/scripts/slimmage.min.js"></script>

    Any advice appreciated.

    Craig

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft