Copied to clipboard

Flag this post as spam?

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


  • Richard Geekie 4 posts 74 karma points
    4 days ago
    Richard Geekie
    0

    Displaying Image Crops in Umbraco Cloud

    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?

  • Johan Runsten 12 posts 123 karma points c-trib
    3 days ago
    Johan Runsten
    0

    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.

  • Richard Geekie 4 posts 74 karma points
    3 days ago
    Richard Geekie
    0

    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?

  • Johan Runsten 12 posts 123 karma points c-trib
    3 days ago
    Johan Runsten
    0

    Hi!

    Did you click on the crop and click Reset crop?

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

  • Richard Geekie 4 posts 74 karma points
    3 days ago
    Richard Geekie
    0

    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?

  • Johan Runsten 12 posts 123 karma points c-trib
    3 days ago
    Johan Runsten
    0

    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.

  • Richard Geekie 4 posts 74 karma points
    3 days ago
    Richard Geekie
    0

    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?

  • Chriztian Steinmeier 2741 posts 8406 karma points MVP 6x admin c-trib
    3 days ago
    Chriztian Steinmeier
    0

    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

Please Sign in or register to post replies

Write your reply to:

Draft