Image File with Properties

scarter

Vote:

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).

View:

  //if desktop
 

//if mobile

Can anybody provide any thoughts or guidance?

#150130

Jun 10, 2016 22:31

Daniel Ovaska

Vote:

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

Http://www.domain.com/globalassets/image1.jpg?width=640

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

http://world.episerver.com/code/Martin-Pickering/ImageResizingNet-integration-for-CMS75/

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

#150136

Edited, Jun 11, 2016 15:08

Vote:

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.

http://www.markeverard.com/2014/02/13/image-resizing-in-episerver-7-5-cms/

#150142

Jun 11, 2016 21:29

Daniel Ovaska

Vote:

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.

#150144

Edited, Jun 11, 2016 23:22

scarter

Vote:

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.

#150183

Jun 13, 2016 14:12

Dejan Caric

Vote:

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

http://imageresizing.net/plugins/editions/performance

http://imageresizing.net/docs/v4/plugins/diskcache

#150185

Jun 13, 2016 15:05

Daniel Ovaska

Vote:

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...

#150187

Jun 13, 2016 15:38

scarter

Vote:

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

http://world.episerver.com/blogs/Mark-van-Dijk/Dates/2014/11/extending-the-imagedescriptor-attribute/

[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; }
}

#150302

Jun 15, 2016 17:38

Daniel Ovaska

Vote:

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...

#150303

Jun 15, 2016 17:54

scarter

Vote:

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.

#150304

Jun 15, 2016 18:02

Daniel Ovaska

Vote:

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!

#150305

Jun 15, 2016 19:28

scarter

Vote:

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.

#151099

Jul 11, 2016 21:02

scarter

Vote:

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.

#151103

Jul 11, 2016 21:32