Copied to clipboard

Flag this post as spam?

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


  • syn-rg 282 posts 425 karma points
    Apr 09, 2014 @ 08:34
    syn-rg
    0

    v7.1 image cropper display cropped image based on radiobutton list selection

    I've added the image cropper to a doctype, the image cropper has 2 cropping options.

    I want the user to be able to select which cropped image is displayed, by the use of a radiobutton list.

    The radiobutton list values are:

    • Original image
    • Use 207 x 200 image (207x200) - crop alias
    • Use 680 x 200 image (680x200) - crop alias

    If the user selects "original image" the uploaded image is displayed, without being cropped.

    If they select either of the other options, the corresponding cropped image will be displayed.

    How can I achieve this using razor?

    I don't know how to check which radiobutton has been checked, or how to display the "original" uploaded image.

    Any help would be greatly appreciated.

    Cheers, JV

    @inherits Umbraco.Web.Macros.PartialViewMacroPage

    @if (CurrentPage.HasValue("imageCrop"))
    {
    <p><img src='@CurrentPage.GetCropUrl("imageCrop", "680x200")' /></p>
    }
  • Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib
    Apr 09, 2014 @ 10:40
    Jeavon Leopold
    0

    Hi JV,

    Great question, here is how I would do it:

    @if (CurrentPage.HasValue("miniFigure"))
    {
        var cropAlias = string.Empty;
    
        switch ((int)CurrentPage.miniFigure)
        {
            case 37:
                cropAlias = "myCropAlias1";
                break;
            case 38:
                cropAlias = "myCropAlias2";
                break;    
        }
    
        var myImageUrl = string.Empty;
        if (!string.IsNullOrEmpty(cropAlias))
        {
            myImageUrl = CurrentPage.GetCropUrl("imageCrop", cropAlias);
        }
        else
        {
            myImageUrl = ImageCropperTemplateExtensions.GetCropUrl(CurrentPage, propertyAlias: "imageCrop");
        }
    
        <img src="@myImageUrl"  />
    }   
    

    In this snippet, the Radiobutton list property alias is "miniFigure" and the cropper property alias is "imageCrop" and my two crop aliases are "myCropAlias1" & "myCropAlias2".

    Additionally I am using the prevalue ID from my radiobutton list to decide which one to use. If your option in the radiobutton list actually contained the crop alias itself you could simplify to something like this:

    @if (CurrentPage.HasValue("miniFigure"))
    {
        string myImageUrl;
        string cropAlias = Umbraco.GetPreValueAsString(CurrentPage.miniFigure);
    
        if (!String.Equals(cropAlias, "Orginal", StringComparison.InvariantCultureIgnoreCase))
        {
            myImageUrl = CurrentPage.GetCropUrl("imageCrop", cropAlias);
        }
        else
        {
            myImageUrl = ImageCropperTemplateExtensions.GetCropUrl(CurrentPage, propertyAlias: "imageCrop");
        }
    
        <img src="@myImageUrl"  />
    }    
    

    This would mean your radio button list options would have to be:

    • Orginal
    • MyCropAlias1
    • MyCropAlias2

    Jeavon

  • syn-rg 282 posts 425 karma points
    Apr 10, 2014 @ 02:13
    syn-rg
    0

    Hi Jeavon,

    This is great, however the "original" image doesn't display in either option.

    It just displays the first crop image, which in my case is the 680x200 image.

    How can the original image display without the "?crop=..." following the .jpg extension?

    Cheers, JV

  • Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib
    Apr 10, 2014 @ 08:25
    Jeavon Leopold
    0

    Hi JV,

    Could you post your code? It might just be because I have misspelled "original" in the check?

    Jeavon

  • syn-rg 282 posts 425 karma points
    Apr 10, 2014 @ 08:38
    syn-rg
    0

    Hi Jeavon,

    I noticed the misspelling and tried lowercase as well to no avail.

    Here's the code I'm using:

    @if (CurrentPage.HasValue("imageSize"))
    {
        string myImageUrl;
        string cropAlias = Umbraco.GetPreValueAsString(CurrentPage.imageSize);
    
        if (!String.Equals(cropAlias, "Original", StringComparison.InvariantCultureIgnoreCase))
        {
            myImageUrl = CurrentPage.GetCropUrl("imageCrop", cropAlias);
        }
        else
        {
            myImageUrl = ImageCropperTemplateExtensions.GetCropUrl(CurrentPage, propertyAlias: "imageCrop");
        }
    
        <img src="@myImageUrl"  />
    } 
    
  • Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib
    Apr 10, 2014 @ 09:06
    Jeavon Leopold
    0

    Hi JV,

    Ok, is it right that the HasVaue is on imageSize but the property of the cropper is "imageCrop"?

    Could you try:

    @if (CurrentPage.HasValue("imageSize"))
    {
        string myImageUrl;
        string cropAlias = Umbraco.GetPreValueAsString(CurrentPage.imageSize);
    
        myImageUrl = ImageCropperTemplateExtensions.GetCropUrl(CurrentPage, propertyAlias: "imageCrop");
    
        <img src="@myImageUrl"  />
    } 
    

    To see if you get the original image for all?

    Jeavon

  • syn-rg 282 posts 425 karma points
    Apr 10, 2014 @ 09:29
    syn-rg
    0

    Hi Jeavon,

    Ok I tried that, but it still displays the cropped image instead of the original.

    The imageSize refers to the radiobutton list, imageCrop is the image cropper datatype alias on my doctype.

    Cheers, JV

  • Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib
    Apr 10, 2014 @ 09:47
    Jeavon Leopold
    0

    Ok, could you post me the full image URL?

  • Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib
    Apr 10, 2014 @ 11:42
    Jeavon Leopold
    0

    I've tested this through again and it seems to work perfectly for me, however the "Original" does get a url like this "http://umbraco7docs.local/media/1007/desert.jpg?center=0.38333333333333336,0.5325&mode=crop&rnd=130415998280000000" but because this doesn't have a width or height it is not resized and so shows the original image. But in your case you are seeing the first crop for original, right?

    This is my code now:

    @if (CurrentPage.HasValue("cropSelector"))
    {
        string myImageUrl;
        string cropAlias = Umbraco.GetPreValueAsString(CurrentPage.cropSelector);
    
        if (!String.Equals(cropAlias, "Original", StringComparison.InvariantCultureIgnoreCase))
        {
            myImageUrl = CurrentPage.GetCropUrl("umbracoFile", cropAlias);
        }
        else
        {
            myImageUrl = ImageCropperTemplateExtensions.GetCropUrl(CurrentPage, propertyAlias: "umbracoFile");
        }
    
        <img src="@myImageUrl" />
    } 
    
  • Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib
    Apr 10, 2014 @ 18:32
    Jeavon Leopold
    100

    Hi JV,

    While the sample above seems to work well for me, I have altered it so that it does now get only the original path of the image when set as such, here is the code (please note the 2 @using statements):

    @using Newtonsoft.Json
    @using Umbraco.Web.Models
    
    @if (CurrentPage.HasValue("cropSelector"))
    {
        string myImageUrl;
        string cropAlias = Umbraco.GetPreValueAsString(CurrentPage.cropSelector);
    
        if (!String.Equals(cropAlias, "Original", StringComparison.InvariantCultureIgnoreCase))
        {
            myImageUrl = CurrentPage.GetCropUrl("umbracoFile", cropAlias);
        }
        else
        {
            var imageCrops = JsonConvert.DeserializeObject<ImageCropDataSet>(CurrentPage.umbracoFile.ToString());
            myImageUrl = imageCrops.Src;
        }
    
        <img src="@myImageUrl" />
    } 
    

    Please substitute "umbracoFile" and "cropSelector" for your own property aliases.

    Jeavon

  • syn-rg 282 posts 425 karma points
    Apr 11, 2014 @ 02:29
    syn-rg
    0

    Thanks Jeavon,

    That works perfectly! Thank you for your patience and effort. I'm hoping this solution comes in handy for other users.

    For those wishing to use this method, ensure that your radiobutton list value is the same as your image cropper alias.

    e.g. To display my "680x200" cropped image, my selected radiobutton value was "680x200".

    Cheers, JV

Please Sign in or register to post replies

Write your reply to:

Draft