Overriding ThumbnailManager to save Blobs as jpg?

John L

Vote:

Hi,

We're working on a responsive site where we need to serve optimized image files based on browser width. To solve this we're using the picture element together with the picturefill polyfill. In EpiServer, we want the editor to upload ONE high-resolution image file of a specific ratio, and then make heavy use of the new Blob property together with the ImageDescriptor attribute to be able to get "thumbnail" variants of this image. For instance:

        [ImageDescriptor(Width = 640, Height = 480)]
        public Blob Image640x480
        {
            get { return base.Thumbnail; }
            set { base.Thumbnail = value; }
        }

        [ImageDescriptor(Width = 320, Height = 240)]
        public Blob Image320x240
        {
            get { return base.Thumbnail; }
            set { base.Thumbnail = value; }
        }

        [ImageDescriptor(Width = 160, Height = 120)]
        public Blob Image160x120
        {
            get { return base.Thumbnail; }
            set { base.Thumbnail = value; }
        }

And then in our views:

Now the problem, as I'm sure you know, is that the generated images are all png's, which makes the whole thing practically unusable to us. We cannot serve >500 kB 640x480 images for obvious reasons.

I would have liked some built-in functionality to be able to set the file type of the generated images, and ideally a jpg quality parameter. Maybe something like this:

[ImageDescriptor(Width = 640, Height = 480, ImageFormat = "jpg", JpgQuality = 80)]

I have been digging around in the ThumbNailManager class and I realize I somehow need to override the CreateBlob method (which uses the hardcoded private readonly string _thumbnailExtension = ".png" and the hardcoded value of 50 as the quality parameter in the ImageService.RenderImage method).

But how do I "tie" my own JpegThumbNailManager class in with the ImageDescriptor attribute? Or, more specifically, how do I pass my suggested additional ImageDescriptor properties (ImageFormat and JpgQuality) to the ThumbNailManager?

Any help is greatly appreciated.

John

#90850

Sep 19, 2014 9:22

Johan Björnfot

Vote:

One option is to create your own class that inherits ThumbnailManager and override method CreateImageBlob. Then you should register your class in IOC container as an implementation for ThumbnailManager (this can be done either using ServiceConfigurationAttribute or through a IConfigurableModule implementation) so it will be used by EPiServer.

Then to extend the image attibute to have additional properties a suggestion is to override ImageDescriptorAttribute and add your custom properties. And then use the attribute on the blob properties. In the CreateImageBlob implementation you could see if the blob property implements your attribute and if so handle it as you need and if not then you could call base.CreateImageBlob.

#90900

Sep 22, 2014 9:21