Copied to clipboard

Flag this post as spam?

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


  • Paul Griffiths 370 posts 1021 karma points
    Dec 29, 2015 @ 20:13
    Paul Griffiths
    0

    Determining which image crop option the user has selected

    Hi All

    I have defined a property on my doc type of type image cropper and i have defined around four different crop options for the data type in the developer section.

    Lets say the user decides to use the 300 x 300 crop option, using Razor how can i check which crop option they have selected.

    1. 100 x 100 alias = one
    2. 200 x 200 alias = two
    3. 300 x 300 alias = three
    4. 400 x 400 alias = four

    i know that the following code will display the crop but i want to know which option they selected

    <img class="img-responsive" src="@Model.Content.GetCropUrl("MainImage", "three")"
    

    so i can use @If statements to display the correct crop

    Many thanks

    Paul

  • Nicholas Westby 2054 posts 7100 karma points c-trib
    Dec 29, 2015 @ 21:13
    Nicholas Westby
    0

    I don't think the image cropper allows you to select a particular crop. I think the idea is that the user can specify a number of crops for a given image, then the code will request whichever crop it requires in that context (e.g., a slideshow vs a preview thumbnail).

  • Paul Griffiths 370 posts 1021 karma points
    Dec 29, 2015 @ 21:44
    Paul Griffiths
    0

    Hi Nicholas,

    Thanks for your response, that's a shame I was really hoping I could query which crop option had been selected by the user.

    Do you know what is the best approach to check whether the image property contains a value ?

    E.G

    @if (cropProperty.hasValue) {do this....}

    Many thanks

    Paul

  • Paul Griffiths 370 posts 1021 karma points
    Dec 30, 2015 @ 09:44
    Paul Griffiths
    0

    Hi All,

    Just to confirm with this one, so, if i have the following image cropper property on my document type

    enter image description here

    then there is definately no way to programtically define which crop (from the 4 defined) the user has selected to be used?

    Many thanks

    Paul

  • Rune Hem Strand 147 posts 911 karma points hq c-trib
    Dec 30, 2015 @ 10:29
    Rune Hem Strand
    1

    Hi Paul

    The user does not "select" a crop. The Image Cropper will automatically generate the crops based on the focal point (blue dot) and the user can then adjust each crop individually by clicking on them. The desired crop is then rendered on the frontend by calling the crop alias.

    Rune

  • Paul Griffiths 370 posts 1021 karma points
    Dec 31, 2015 @ 17:49
    Paul Griffiths
    100

    Hi Rune,

    Thanks for your response mate, it makes sense.

    I dont think what i am trying to achieve can be done then if im honest. Basically from an image cropper property (alias=interestMainImage) i wanted the user to be able whether they wanted to use a mainImageCropLarge (dispalys an image crop of 865x680) or a mainImageCropSmall (displays an image crop of 865x340) and based on the one that they selected i wanted to display that crop. The issue i was having was achieving this programatically (which i now understand cant be done)

    <img class="img-responsive" src="@Model.Content.GetCropUrl("interestMainImage", "mainImageCropLarge")" alt="@Model.Content.GetPropertyValue("interestTitle")" title="@Model.Content.GetPropertyValue("interestTitle")" />
    

    I guess if i wanted to add the option of multiple image crops i would need to have multiple image cropper data types defined on my document type with a seperate alias' to reference them. For example, add another image cropper with an alias of interestsMainImageSmall and have the follwoing code on my view. (Only populate the property you want to display)

    <img class="img-responsive" src="@Model.Content.GetCropUrl("interestMainImage", "mainImageCropLarge")" alt="@Model.Content.GetPropertyValue("interestTitle")" title="@Model.Content.GetPropertyValue("interestTitle")" />
    
    <img class="img-responsive" src="@Model.Content.GetCropUrl("interestMainImageSmall", "mainImageCropSmall")" alt="@Model.Content.GetPropertyValue("interestTitle")" title="@Model.Content.GetPropertyValue("interestTitle")" />
    

    Thanks for your help

    **Edit this is not the solution i marked the wrong post! Please see Rune answer below (with screen shots)

    Paul

  • Rune Hem Strand 147 posts 911 karma points hq c-trib
    Jan 01, 2016 @ 13:42
    Rune Hem Strand
    2

    Hi Paul

    EVERYTHING can be done :)

    A really simple way to do it is to add a Dropdown List property to your document type.

    enter image description here

    If you place it just beneath the Image cropper property it is close enough to give context to the dropdown (you can see the names of the crops on the Image Cropper)

    enter image description here

    And you can then use the selection in in your template:

        @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
        @{
            Layout = null;
    
            string crop = CurrentPage.ChooseCrop;
    
            switch (crop)
            {
                case "Big":
                crop = "Big";
                break;
    
                case "Small":
                crop = "Small";
                break;
    
                default:
                crop = "Big";
                break;
            };
        }
    
        <img src="@CurrentPage.GetCropUrl("cropper", crop)" />
    

    If you want to be able to do the selection on the Image Cropper itself it would require you to create a custom version of the Image Cropper.

    Hope this can provide some inspiration.

    All the best
    Rune

  • Paul Griffiths 370 posts 1021 karma points
    Jan 03, 2016 @ 12:23
    Paul Griffiths
    0

    Hi Rune,

    This is a very good approach, and thank you for taking the time out to provide an example with screen shots, its very clear ;)

    I will give this a go and see if i can get it implemented. I will provide an update.

    Thanks for all your help!

    Ps i was meant to mark your post as the answer but accidently marked mine :|. Sorry!

    Paul

Please Sign in or register to post replies

Write your reply to:

Draft