Try our conversational search powered by Generative AI!

Image File with Properties


I am trying to figure out a way to create an image file when a user uploads a 1000x1000 image, and create scaled versions as properties of the file when the image is uploaded.  Basically I am hoping to create a class like the following.

public class ImageFile : ImageData 
  public virtual Image XLarge {get;set;} //100%
  public virtual Image Large {get;set;} //75%
  public virtual Image Medium {get;set;} //50%
  public virtual Image Small {get;set;} //25%

When the image is uploaded to the system, I am going to write a custom event that will take the image and store it as the XLarge size.  Then it will be scaled down appropriately by some set percentage.  Then, in the view, i would like to be able to add that as an asset to a product, and in the view I would reference the asset that is appropriate based on the screen size, mobile devices get smaller images than desktop devices).


  //if desktop

//if mobile

Can anybody provide any thoughts or guidance?

Jun 10, 2016 22:31

I would really recommend using ImageResizer for.NET. You need a few classes to enable it for Episerver 7.5+. 

Then you can simply upload your image in original size and then add calls like 


That will trigger a call to image resizer in background and automatically scale image to this width and return it. It has support for nice disc cache many options for cropping, scaling and filters etc.

Took me 1 h to get up and running.

Follow this guide

Avoid using Episervers thumbnail service btw since it results in too heavy pngs out of the box. Had to ditch that solution...

Edited, Jun 11, 2016 15:08

Also take a look at Mark Everard's post about how to easily set these as blobs in the same way as Episerver works with thumbnails instead.

Jun 11, 2016 21:29

If you go with Marks solution you really need to switch the image service though. I tried it out but the size of the created pngs images really hurt performance on the site so I had to ditch it. If performance is not a factor because you have very few images etc then Marks solution works great too.

Edited, Jun 11, 2016 23:22

Performance is a factor on our site, so I would prefer to have the images precreated on the server and not created on the fly through a resizer program.

Jun 13, 2016 14:12

I've been using Image Resizer Performance edition with DiskCache plugin. Works like a charm.

Jun 13, 2016 15:05

If you like performance, then ImageResizer is your friend. It will only create the images the first time. After that it will use the version on disc. 

Works great for me on an image heavy site...

Jun 13, 2016 15:38

It was suggested to me to use the ImageDescriptor to define the variations of the uploaded image.

[MediaDescriptor(ExtensionString = "jpg,jpeg,jpe,ico,gif,bmp,png")]
public class ImageFile : ImageData
    //Small 150x200
    [ImageDescriptor(Width = 200, Height = 150)]
    public virtual Blob Small { get; set; }
    //Large 300x400
    [ImageDescriptor(Width = 400, Height = 300)]
    public virtual Blob Large { get; set; }
Jun 15, 2016 17:38

It's a great solution. It will however only create large pngs right? So my remark on bad performance still stands with that solution unless you switch the image service beneath the thumbnail manager. Try resizing a jpg a few pixel and check size of the scales image in browser before you decide...

Jun 15, 2016 17:54

I was thinking of running all uploaded images through a compression tool like TinyPNG or something similar to do the compression.  I am assuming that is where I would need to switch the image service to overload those functions to call the third party service to compress them.

I suppose at that point if I already have to connect to a third party service, that I could just skip that and utilize image resizer for everything, I will check it out though, thanks for the assistance.

Jun 15, 2016 18:02

That sounds like my thinking a week ago :)

I started with Marks solution since it looks great. Then I realized the problems with image sizes and thought I could use the ImageResizer within the Imageservice to solve it. Then I realized that, hey...I'm wrapping a great component in a few layers of abstraction and getting no benefits while losing a lot of the potential of ImageResizer. So I switched out the old solution and it works great now...

Happy coding!

Jun 15, 2016 19:28

Thanks for the suggesting for Image Resizer.  I have gotten that working.  Did you run into the trouble of your images not having actual extensions and therefore not working?  When I upload an image, image.jpg it is saving the url as imagejpg instead of image.jpg.  ImageResizer doesn't seem to be working then with that particular url.

Jul 11, 2016 21:02

I had a url handler that was updating the image url to the wrong one, I modified it and it was working fine after it.  Thanks again for the help.

Jul 11, 2016 21:32
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.