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 359 posts 999 karma points
    Aug 18, 2020 @ 08:28
    Paul Griffiths
    0

    Image processor rotating images and leaving black bars

    Honestly, I'm unsure where to start explaining this one but here goes.

    I built a Umbraco project using 7.7.2 for a friend but it never went live. It sat dormant for about 2 years until he recently decided he wanted to put some effort into it and get it live. I sent it over for him to populate and I'm experiencing a very weird issue with Image Processor where after calling GetCropUrl("alias", "cropAlias") it is rotating and sometimes leaving black bars .

    He uploaded a tonne of images into the media section and also via the various croppers available on the different document types and although they display correctly (correct orientation) in the CMS. On the front end they are wrong.

    Example in the CMS (for image cropper)

    enter image description here

    Example on the front end (for image cropper)

    enter image description here

    Example in the CMS (for media image)

    enter image description here

    Example on the front end

    enter image description here

    The code (wasnt using model builder at the time of the build) is as follows:

    Cropper image code (service is IPublishedContent via a foreach)

    <img class="img-responsive" src="@(service.HasValue("image") ? service.GetCropUrl("image", "768x768") : productImgPlaceholder)" alt="@service.Name" title="@service.Name">
    

    Media Image code (pulled from an album in the media section)

    var galleryAlbum = Umbraco.TypedMedia(Model.Content.GetPropertyValue<int>("galleryAlbum"));
                    <ul class="work-grid">
                        @foreach (var image in galleryAlbum.Children)
                        {
                            <li class="col-sm-3 col-md-2">
                                <a href="@image.Url" title="@image.Name" class="image-lightbox">
                                    <div class="work-item-image">
                                        <img class="img-responsive" src="@image.GetCropUrl(768,768)" alt="@image.Name" title="@image.Name">
                                    </div>
                                </a>
                            </li>
                        }
                    </ul>
    

    I have looked at the following things with no luck

    • I have upgraded to the latest version on V7 (now running v7.15.5).
    • I've also done some comparisons against other projects, specifically around the image processor config files (cache, processing, security)
    • Installed https://github.com/marcemarc/uSpinMeRightRound
    • Clean, rebuild and removed and restored all packages to ensure correct binaries are being used
    • Deleted TEMP and Cache folders from App_Data
    • (as a test) Append auto rotate which does work but leaves black bars in the portrait view

    It seems that it uses a crop mode of percentage instead of crop!

    I have read some posts on 'our' mentioning EXIF data but after removing the photo info it doesn't make a difference.

    Some of the posts on Our

    Perhaps its something to do with the image itself which were all from iPhone. If I create an image canvas in photoshop i.e. 768x768 place the image o, save for web, and upload to Umbraco via media or crop... it displays as expected in the CMS and front end. The problem is there are hundreds of images and I wanted to avoid going through them all and editing. Also, it gives me no confidence in future uploads.

    Ive built many small Umbraco sites using v8 and v7 and ive not come across this. If anyone can help me I would be really grateful.

  • Thomas 274 posts 555 karma points c-trib
    Sep 11, 2020 @ 10:55
    Thomas
    0

    Did you found a fix ?

  • Paul Griffiths 359 posts 999 karma points
    Sep 11, 2020 @ 11:19
    Paul Griffiths
    0

    Hey Thomas,

    No is an honest answer, so frustrating! I've used Umbraco for many years and not experienced anything like it.

    I established that it was something related to the image that was uploaded, what I don't really know! I read posts about iPhone images containing EXIF metadata that may cause the issue but unsure in my case. To resolve i did two things

    • Downloaded all the affected images (a lot) and uploaded them to photoshop and re-edited\saved them. After re-uploading them the displayed as expected
    • For images in the media, i installed https://our.umbraco.com/packages/backoffice-extensions/tooorangeyuspinmerightround/. Even the images in the media section were displaying the correct orientation they were in the wrong orientation on the front end. Running it through uspinmerightround didnt actually alter the orientation in the back office but it fixed it on the front end. How im not sure!

    It was a frustrating issue that i 'worked around' but im not filled with any confidence that the next image to be uploaded will be incorrect.

    Hope this helps and good luck. Let me know if you solve it.

    Paul

Please Sign in or register to post replies

Write your reply to:

Draft