3

When I am rendering images in my DXA 1.4 views by using Html.Media(ModelImageField) it is distorting images and creating image with different size in file system and rendering it in view.

I have tried passing width factor as well Html.Media(ModelImageField, "62"), but seems it is also creating a image of some different size. Then, I have tried it by simply using <img src="@ModelImageField.Url" />, this is rendering correct size of image.

I have to render images of fixed size in my view. Can anyone suggest if I can get image of specific size by passing some parameter to helper function Html.Media(ModelImageField, "62")? I have already tried unsuccessfully by passing widthfactor and aspect ratio. Can anyone suggest if I am missing anything. Thanks in advance.

Specific example for issue:

I have a multimedia component with image file (ZX_series_background_373x140) attached of size 373x140px (width x height). It is exactly same as I have to show in the view.

When I use Html.Media(ModelImageField) it is creating file with name like ZX_series_background_373x140_tcm8-112358_w1024_h633_n.jpg of size 227x140px. I am not sure why it is changing width and height of image. I am not sure if I am missing something in parameter. Even when I pass the WidthFactor as required width (373px) in that case too, name of file changed as ZX_series_background_373x140_tcm8-112358_w640_h396_n.jpg but size is still same 227x140px.

Improve this question

1 Answer 1

Reset to default
4

DXA has built-in server-side responsive image resizing (to not send unnecessarily large images to mobile devices) based on device parameters and width and aspect ratio parameters specified in the View code.

See https://github.com/sdl/dxa-web-application-dotnet/blob/master/Sdl.Web.Tridion/Statics/BinaryFileManager.cs

Not sure what you mean exactly with "distorting" images? Do they look really bad?

If you get very low-res images, there may be a problem with obtaining the device/context claims. If you turn on DEBUG log level, your DXA log file should have information about the retrieved context claims.

Improve this answer
4
  • Thanks for your response Rick. I have added a specific example of my issue. Here distorted means, as the file of image is changing here so quality is also changing. Am I missing anything?
    – Mukesh Kumar
    Commented Sep 16, 2016 at 8:59
  • OK, if you want to ensure the original image is served, you can indeed render the img tag yourself, as you mentioned. The image file should get cached in that case too (see BinaryFileManager implementation; if there is no "dimension" suffix in the URL, the image won't get resized, but it will get cached).
    – Rick Pannekoek
    Commented Sep 16, 2016 at 9:44
  • Thanks Rick. I can use img tag to show same image and yes I can see a cached version of same size. Can you also suggest for additional part of my question: In case of image with different size, can we get image of specific size by passing some parameter to helper function Html.Media(ModelImageField, "62")?
    – Mukesh Kumar
    Commented Sep 16, 2016 at 10:02
  • 2
    You can't prevent image resizing if you use Html.Media (or Url.GetResponsiveImageUrl for that matter). You can specify an absolute width, but that is only used as a guideline. For the complete algorithm of how image width/height is determined, see github.com/sdl/dxa-web-application-dotnet/blob/master/…
    – Rick Pannekoek
    Commented Sep 16, 2016 at 10:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.