determining which image crop option the user has selected

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

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
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
Copy Link
Nicholas Westby 2054 posts 7103 karma points c-trib

Dec 29, 2015 @ 21:13

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).

Copy Link
Paul Griffiths 370 posts 1021 karma points

Dec 29, 2015 @ 21:44

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

Copy Link
Paul Griffiths 370 posts 1021 karma points

Dec 30, 2015 @ 09:44

0

Hi All,

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

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

Copy Link
Rune Hem Strand 147 posts 911 karma points hq c-trib

Dec 30, 2015 @ 10:29

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

Copy Link
Paul Griffiths 370 posts 1021 karma points

Dec 31, 2015 @ 17:49
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
Copy Link
Rune Hem Strand 147 posts 911 karma points hq c-trib

Jan 01, 2016 @ 13:42
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.

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)

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
Copy Link
Paul Griffiths 370 posts 1021 karma points

Jan 03, 2016 @ 12:23

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

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?