How to get original image height and width using I...
# help-with-umbraco
n
We are using Image Cropper data type for one of the image field. In model its auto generating as ImageCropperValue. I want to get orginal image height and width for that field but not able to find any way Thanks in adanced
s
I don't think that information is stored in the image field. If its a media item, there is the attributes umbracoWidth and umbracoHeight, you can get it form.
m
https://docs.umbraco.com/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/image-cropper Says it should return a MediaWithCrops... so something like
Copy code
csharp
if (imageCropperValue is MediaWithCrops mediaWithCrops)
{
    if (mediaWithCrops.Content is Image img)
    {
        var h = img.UmbracoHeight;
        var w = img.UmbracoWidth;
    }
}
or
{imageCropperValue}.MediaKey
might give you the guid to the selected media.. then something like
Copy code
csharp
        var MediaNode = Umbraco.Media({MediaKey})
        if (MediaNode is Image img)
        {
           var h = img.UmbracoHeight;
           var w = img.UmbracoWidth;
        }
r
You can look at the item in the media folder and see the original value.. or I would go down the road that @Mike Chambers suggested
n
going to try this
imageCropperValue doesnt have mediaKey
imageCropperValue is MediaWithCrops mediaWithCrops also not working. It throws error
Error: expression of type imagecroppervalue cant be handled by MediaWithCrops
m
Can I just check what version of Umbraco you are running?
s
MediaWithCrops is from the media picker, ImageCropperValue is from the Image Cropper (upload) field on the media item
m
Just spun up a v13.2 and looks like the docs are wrong. 😦
m
certainly.. but as this just stores a reference to a media url, there is no backing media item to fetch umbracoHeight/Width from... @Nilay if your use case is that the image you choose here is only to be used once in the site.. then imagecropper is the datatype.. if however you want to reuse.. then add your image to the media section and use a mediaPicker 🙂
s
If you are using the cropper on a content item, you could write a notification handler, that reacts to changes in the cropper field, and fills out width/height properties, just like the core does for media: https://github.com/umbraco/Umbraco-CMS/blob/2c41388096e2b539913597bf3d29ee8b1cf31e33/src/Umbraco.Infrastructure/PropertyEditors/ImageCropperPropertyEditor.cs#L160
m
not the most efficient.. but might suffice depending on usecase.. (just done in the view, hence the injections rather than DI) and lifted from https://github.com/umbraco/Umbraco-CMS/blob/contrib/src/Umbraco.Core/Media/UploadAutoFillProperties.cs
Copy code
csharp
@using Umbraco.Cms.Core;
@inject Umbraco.Cms.Core.IO.MediaFileManager _mediaFileManager;
@inject Umbraco.Cms.Core.IO.IIOHelper _ioHelper;
@inject Umbraco.Cms.Core.Media.IImageDimensionExtractor _imageDimensionExtractor;

@{
var filepath = _ioHelper.MapPath(Model.ImageCropper.Src);    

// using the _mediaFileManager incase media isn't local, eg azure blob storage                    
if (_mediaFileManager.FileSystem.FileExists(filepath))
{
    try
    {
        var extension = (System.IO.Path.GetExtension(filepath) ?? string.Empty).TrimStart(Constants.CharArrays.Period);

        using (System.IO.Stream filestream = _mediaFileManager.FileSystem.OpenFile(filepath))
        {
            System.Drawing.Size? size = _imageDimensionExtractor.IsSupportedImageFormat(extension)
            ? _imageDimensionExtractor.GetDimensions(filestream) ?? new System.Drawing.Size(Constants.Conventions.Media.DefaultSize, Constants.Conventions.Media.DefaultSize)
            : null;

            @(size.Value.Height)<br/>
            @(size.Value.Width)
        }
    }
    catch { }
}
}
@skttl interesting seeing the autofillproperties stuff, but wouldn't we need to extend imageCropper Datatype to have original width/height properties to persist the data only on change?
s
No you can do your own notification handler for this
m
to save props in the imageCropper? or are you meaning props on the doctype? (so you can only have one imageCropper per content node... without some thought)
l
@Mike Chambers not sure if ive got the wrong end of the stick here, but you could use a notification hander, then get the width and height using the code above, set these values on the media type of image? Then when you need the width/height you could use the Umbraco extension to GetValue("width") as an example
n
i can't change data type now as its been used many place and for lot of content
Thanks @Mike Chambers . This code might work but images are stored on Azure blob so wont be able to find image by path
s
@Nilay MediaFileManager is able to fetch the files from blob storage too
m
🙂 // using the _mediaFileManager incase media isn't local, eg azure blob storage if (_mediaFileManager.FileSystem.FileExists(filepath))
260 Views