displaying image crops in umbraco cloud

Richard Geekie 4 posts 74 karma points

Jun 21, 2022 @ 08:09

We are trying to allow a user to upload their own image in an Umbraco cloud setup, but the image cropper does not seem to work for us.

We have the image uploads and crops saving well, but the crop displayed on the site always has the focal point out of place.

When uploading we set the crop and get the mage as per the following : Clip taken

We then get the following out on our page : Focal point ignored for display

The code we are using for the display on our list screen is as follows, this is done as a foreach to ensure we get a list of all members displayed :

<img src="@item.GetCropUrl("memberImage", "square")" height="200" alt="@item.Value("memberName").ToString()" />

What are we doing wrrong?

Copy Link

Johan Runsten 38 posts 277 karma points c-trib

Jun 22, 2022 @ 08:03

Hi!

As far as I can tell, as soon as you change the scale of a crop (zoom in on the image) or manually move the crop, the focal point is not used any more. You can verify this by looking at the crop preview while changing the focal point on the image. It only updates when the crop is "unmodified".

However you can still get the crop with the focal point by doing the following: <img src="@item.GetCropUrl(propertyAlias: "memberImage", cropAlias: "square", useCropDimensions: true, preferFocalPoint: true)" />

Note that the scale/zoom is not taken into account here unfortunately.. Not sure if this behavior is a bug or not.

Copy Link

Richard Geekie 4 posts 74 karma points

Jun 22, 2022 @ 08:38

I have updated the code to be :

<img src="@item.GetCropUrl(propertyAlias: "memberImage", cropAlias: "square", useCropDimensions: true, preferFocalPoint: true)" />

and the results have changed but are still not right...

Clip as saved

Clip as displayed

it appears that the focal point becomes lower than the one set?

Copy Link

Johan Runsten 38 posts 277 karma points c-trib

Jun 22, 2022 @ 08:48

Hi!

Did you click on the crop and click Reset crop?

Is there any custom CSS that might affect the resulting image?

Copy Link

Richard Geekie 4 posts 74 karma points

Jun 22, 2022 @ 08:55

I did reset the clip, have also deleted the image and re-uploaded just to be sure.

The css that this sits within is nothing major, just the following :

    .release-row{
    border-radius: 20px;
    max-width: 100%;
    height: auto;
}

.release-row .release-col{
    border-radius: 20px;
    padding: 25px;
    background-color: #D9D9D9;
    color: #226C38;
    max-width: 100%;
    height: auto;
}

    .release-row .release-col img{
        border-radius: 50%;
    }

and the actual code sits in a table as per the below :

@foreach (var item in selection)
            {
                <div class="release-row">
                    <div class="release-col">
                        <table border="0" style="width: 100%; border-collapse: collapse; border-style: hidden;">
                            <tbody>
                                <tr>
                                    <td style="padding: 10px">
                                        <img src="@item.GetCropUrl(propertyAlias: "memberImage", cropAlias: "square", useCropDimensions: true, preferFocalPoint: true)" />
                                    </td>
                                    <td style="padding: 10px; white-space: nowrap;">
                                        <div class="article-title">@item.Value("memberName").ToString()</div>
                                        <br>
                                        <div class="article-subheading">@item.Value("memberRole").ToString()</div>
                                    </td>
                                    <td style="padding: 10px">
                                        <div class="article-body">
                                            <div class="article-content">@item.Value("memberDescription")</div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <br>
                    </div>
                </div>
                <br>
            }

Any advice?

Copy Link

Johan Runsten 38 posts 277 karma points c-trib

Jun 22, 2022 @ 09:38

So if you click on the image to change the focal point, the thumbnail for the "square" crop to the right changes to reflect the new position in realtime yes?

Double check that the "Enable focal" (or something like that) is set to true in the properties for the media picker.

Copy Link

Richard Geekie 4 posts 74 karma points

Jun 22, 2022 @ 11:32

Image updates in real time as you would expect.

Enable Focal is definitely turned on.

I have been testing it out and am fairly sure this is to do with the Image Picker being used for the display. I have create a new crop called memberIcon and updated the cropAlias to that and I am getting no image at all.

I am using an Image Picker using "Member Image Picker" so as this crop is only available in that Image Picker it would make sense that the focal point set in that picker is also only available there.

How do I force the GetCropUrl to use that image picker?

Copy Link

Chriztian Steinmeier 2800 posts 8791 karma points MVP 8x admin c-trib

Jun 22, 2022 @ 12:52

Hi there,

There was a bug at some point where the focal point wasn't displayed correctly (depending on screensize): https://github.com/umbraco/Umbraco-CMS/issues/11339

Some of the cases mentioned sounds a bit like that behavior, so could be good to check the version (or if there's been a regression).

/Chriztian

Copy Link

is working on a reply...

Flag this post as spam?

Displaying Image Crops in Umbraco Cloud