André Hedberg
Dec 6, 2013
  8144
(7 votes)

Get ImageResizer to play along with EPiServer 7.5

I don’t know about you but I use ImageResizer a lot (http://imageresizing.net/). One of the major changes in EPiServer 7.5 is the way media/images are handled and ImageResizer no longer worked for images stored in EPiServer.


In order to fix this, might maybe be other solutions, is to create a plugin to ImageResizer. This is really simple.

public class EPiServerBlobPlugin : IVirtualImageProvider, IPlugin
{
        public bool FileExists(string virtualPath, System.Collections.Specialized.NameValueCollection queryString)
        {
            EPiServerBlobImage blobImage = this.GetImage(virtualPath);

            return (blobImage != null);
        }

        public IVirtualFile GetFile(string virtualPath, System.Collections.Specialized.NameValueCollection queryString)
        {
            return this.GetImage(virtualPath);
        }

        private EPiServerBlobImage GetImage(string virtualPath)
        {
            ContentRouteHelper routeHelper = ServiceLocator.Current.GetInstance<ContentRouteHelper>();
            MediaData mediaData = routeHelper.Content as MediaData;

            if (mediaData == null)
            {
                return null;
            }

            return new EPiServerBlobImage(virtualPath, mediaData);
        }

        public IPlugin Install(global::ImageResizer.Configuration.Config config)
        {
            config.Plugins.add_plugin(this);

            return this;
        }

        public bool Uninstall(global::ImageResizer.Configuration.Config config)
        {
            config.Plugins.remove_plugin(this);

            return true;
        }
    }

    public class EPiServerBlobImage : IVirtualFile
    {
        private MediaData _mediaData;

        public EPiServerBlobImage(string virtualPath, MediaData mediaData)
        {
            this.VirtualPath = virtualPath;
            this._mediaData = mediaData;
        }

        public Stream Open()
        {
            return this._mediaData.BinaryData.OpenRead();
        }

        public string VirtualPath
        {
            get;
            private set;
        }
    }

Register the plugin in resizer config section like so:

<resizer>
    <plugins>
        <add name="ImageResizer.EPiServerBlobPlugin" />
        ...
    </plugins>
</resizer>

Dec 06, 2013

Comments

Martin Pickering
Martin Pickering Dec 7, 2013 04:49 PM

A great Post that I am sure many will find both useful and a relief (I know I am relieved for one) that ImageResizing.Net use in Projects is still possible post EPiServer V7.5.

Without wishing to be or appear critical in any way, I would however advise a little caution in how and when this code is used as there are a number of Use Cases that it does not address:

- Edit Mode URLs of CMS managed Assets will not be recognized by ImageResizing.Net and so certain On-Page Edit Mode views will not reproduce with high fidelity
- the Plugin does not limit its scope to only those assets being managed by CMS and so is checking the Blob Store for any and all image requests received by the host; one might say that is being a little greedy
- by only implementing IVirtualFile (rather than IVirtualFileWithModifiedDate) there is limited co-operation and collaboration between the caching services of ImageResizing.Net and the Asset Management services of EPiServer CMS

Anybody in need of this feature with a little added spice is welcome to get in touch. martin dot pickering at maginus dot com

André Hedberg
André Hedberg Dec 9, 2013 09:10 AM

No, that is some great feedback and valuable information! However this post wasn't meant to be seen as a fully complete bulletproof implementation. :)

adamstewart
adamstewart Dec 13, 2013 05:52 PM

Martin, i for one would like to see a more robust solution to this. However, Andre thanks for getting us started on the road to recovery

Tiến Bùi
Tiến Bùi Dec 17, 2013 03:22 AM

Nice inspection André!

Maris Krivtezs
Maris Krivtezs Jan 15, 2014 03:13 PM

Here is Martin Pickering's post about same issue:
http://world.episerver.com/Code/Martin-Pickering/ImageResizingNet-integration-for-CMS75/

Joseph Tossell
Joseph Tossell Jun 1, 2017 12:53 PM

For the sake of anyone looking for an implemetation take a look at:

https://github.com/valdisiljuconoks/ImageResizer.Plugins.EPiServerBlobReader 

and for focal point control from within EPiServer:

https://github.com/CreunaAB/EPiFocalPoint 

Please login to comment.
Latest blogs
Content Delivery API – The Case of the Duplicate API Refresh Token

Creating a custom refresh provider to resolve the issues with duplicate tokens in the DXC The post Content Delivery API – The Case of the Duplicate...

David Lewis | Sep 29, 2022 | Syndicated blog

New Optimizely certifications - register for beta testing before November 1st

In January 2023, Optimizely is making updates to the current versions of our certification exams to make sure that each exam covers the necessary...

Jamilia Buzurukova | Sep 28, 2022

Optimizely community meetup - Sept 29 (virtual + Melbourne)

Super excited to be presenting this Thursday the 29th of September at the Optimizely community meetup. For the full details and RSVP's see the...

Ynze | Sep 27, 2022 | Syndicated blog

Preview multiple Visitor Groups directly while browsing your Optimizely site

Visitor groups are great - it's an easy way to add personalization towards market segments to your site. But it does come with it's own set of...

Allan Thraen | Sep 26, 2022 | Syndicated blog