Umbraco-cms: All images uploaded to media section have umbracoHeight / umbracoWidth of 200x200px

Created on 8 Jan 2019  路  9Comments  路  Source: umbraco/Umbraco-CMS

All images uploaded to media section have height of 200x200px

releas7.13.1 typbug

All 9 comments

They don't, but the meta data (umbracoHeight and umbracoWidth is indeed set to 200x200). I don't think many people use these in a responsive world, but yes should be fixed.

Must have something to do with SVG handling, where we set those to 200x200 by default to make sure we have some kind of height/width.

Alright, a few things:

I've changed this now:

  • Added a stream.Read so we actually get valid info for JPG / TIFF
  • If we can't detect the file type, we'll return a null instead of an exception and we'll fall back to reading the file using GDI

Changeset: https://github.com/umbraco/Umbraco-CMS/commit/086157cff8fc7d34596244265a19caa847c6936b

One instance in particular for us where this is quite a serious issue is that we allow users to upload their own logo to our sites via the CMS. We dont know what size of image they will upload so we use the umbracoWidth and umbracoHeight properties to calculate what the width of an image should be based on a fixed height that we have defined for our design. We then use this to control the height and width of the image when resized to a fixed height so that the user does not break the header area size we have defined for the website.

This then sets a fixed height and width to ensure we do not lose the quality of the image, which is something that can happen if you were to just rely on scaling the image freely. We understand that people like to try and use SVG images now for logos, however, for many of our users this is not yet the case.

Glad to see a fix for this is available so quickly. This would impact a great many sites I've worked on (I would guess the majority of them), especially the ones with responsive images.

For many cases, what we do is inspect the width/height of the original image, create a responsive URL based on that, then adjust that URL slightly to change the width (but other things like the height ratio remain intact) depending on browser width.

We will not be able to upgrade until the fix is released.

We'll get an update out soon, if absolutely necessary you could work around this with an eventhandler that responds to the Saving event and read the width/height manually and set the values of umbracoHeight and umbracoWidth appropriately.

Would be nice to have a fix that also corrects the wrongly set umbracoHeight and umbracoWidth. Is it possible to add a migration that only runs when upgrading from 7.13.0, searches all media with umbracoHeight=200 and umbracoWidth=200 and then updates these values?

Seems all existing logic is within the internal class UploadAutoFillProperties, but just resaving all media should update the auto-populated properties!

This re-saves all images with a dimension of 200x200:

```c#
using Umbraco.Core;
using Umbraco.Core.Logging;

public class UpdateMediaDimensions : ApplicationEventHandler
{
protected override void ApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
{
var mediaType = applicationContext.Services.ContentTypeService.GetMediaType(Constants.Conventions.MediaTypes.Image);
if (mediaType != null)
{
var images = applicationContext.Services.MediaService.GetMediaOfMediaType(mediaType.Id);
foreach (var image in images)
{
int width = image.GetValue(Constants.Conventions.Media.Width),
height = image.GetValue(Constants.Conventions.Media.Height);

            if (width == 200 && height == 200)
            {
                applicationContext.ProfilingLogger.Logger.Info<UpdateMediaDimensions>("Re-saving image with 200x200 dimension: {0}", () => image.Id);
                applicationContext.Services.MediaService.Save(image);
            }
        }
    }
}

}
```
It's not a nice migration that only runs once, so make sure you don't keep this in your project!

Looks like this issue still persists on 7.13.1 for some images.
When uploading the attached image - width and height is set to 200px:

break-2297835_1920

@nul800sebastiaan

Was this page helpful?
0 / 5 - 0 ratings