Virtual Happy Hour this month, Jun 28, we'll be getting a sneak preview at our soon to launch SaaS CMS!

Try our conversational search powered by Generative AI!

Vincent Baaij
Nov 26, 2018
(10 votes)

Episerver and ImageProcessor: Now for editors too!

Update 16 January 2019: this package has been renamed to ImageProcessor.Web.Episerver.UI.Blocks

A new member has been added to the Episerver ImageProcesor family: ImageProcessor.Web.Episerver.UI. This add-on adds the Process Image Block to the site which brings all the power of the ImageProcessor library to regular editors. No longer is the manipulation of images something exclusive to developers and designers! On the block you select an image, can quickly change the width and/or height and select the processing methods that you want to apply to the image. The methods are implemented as 32(!) blocks. As each method is a block, it is possible for an editor or admin to setup a kind of 'processing presets' which can then be reused on different images throughout the site.

Each block exposes specific properties to manage the behavior of the processing method. Most blocks only have a single property that needs to be set and a lot of the properties are pretty self describing. if not, the ImageProcessor documentation can be used as a reference. To make it easier for the users a lot properties use a dropdown and whenever a color needs to be selected, they can do so with a color picker.

Selecting the same blocks over and over for each image is not convenient of course, so I added one other block, named the MethodCollectionBlock with wich you can group multiple processing methods into one collection. If you're really into it, you could even build collections of collections. The images below shows how you can build up a collection of methods (left or top). The right (or bottom) image shows how you can use such a collection in the Process Image block.

Remember, just as when using the fluent API, the order in which the methods are processed is important. Doing rounded corners before a vignette effect for example has a different effect than doing that the other way around (see below). Fortunately the content area in both the Process Image block and the Method Collection Block allows for re-ordering of the selected methods. 

The processing blocks will only work if the corresponding methods are enabled in the Imageprocessor configuration. The setup will not change the existing config file, so make sure that you (as a developer who sets this up for your editors) do that. See the processing.config file in the sample site for an example of a configuration that allows all methods.

More new stuff

The Picture helper now respects the "quality" and "mode" values set in querystring. That means e.g. that it's possible to override the quality value set in the ImageType for a specific image. It is now also possible to get picture data in an object that can be used if rendering the picture element on the client instead of using the Html helper:
PictureUtils.GetPictureData(Url.ContentUrl(Model.Image), ImageTypes.Teaser)

(Thanks Erik!)

Because of all these additions, the main add-on has a new (major) version as well. All the packages are available on the NuGet feed.

By the way, the add-ons now have an icon. The creator of the ImageProcessor package has graciously allowed me to reuse the original icon. (Thanks James!)

To learn more about the ImageProcessor, you can check out my other blog posts. A good starting point would be this one

The code for the package is available on my GitHub account. I still really appreciate feedback in the comments below and help in the form of issues and, even better, pull requests in the repository.

Hope this helps.

Nov 26, 2018


David Knipe
David Knipe Nov 26, 2018 10:35 PM

Nice! Thanks for putting the effort in to produce this!

Eric Nov 27, 2018 09:46 AM

Very nice. I specially like the URL for this post :) /fggnrh/ ?? 

Vincent Baaij
Vincent Baaij Nov 27, 2018 02:23 PM

@Eric: Yeah, you create a demo blog post once and then it stays like that :)

Antti Alasvuo
Antti Alasvuo Nov 27, 2018 07:51 PM

Really nice post and cool url for the post (new way to optimize SEO ;-D)

Vincent Nov 27, 2018 10:45 PM

Nice add-on! Great work. 

Marcus B
Marcus B Nov 28, 2018 10:14 PM

Love it! Great stuff!

ChiChing Lam
ChiChing Lam Dec 12, 2018 03:47 PM

Very Nice!! Great work :)

Please login to comment.
Latest blogs
Remove a segment from the URL in CMS 12

Problem : I have created thousands of pages dynamically using schedule jobs with different templates (e.g. one column, two columns, etc..) and stor...

Sanjay Kumar | Jun 21, 2024

Copying property values part 2

After publishing my last article about copying property values to other language versions, I received constructive feedback on how could I change t...

Grzegorz Wiecheć | Jun 18, 2024 | Syndicated blog

Enhancing online shopping through Optimizely's personalized product recommendations

In this blog, I have summarized my experience of using and learning product recommendation feature of Optimizely Personalization Artificial...

Hetaxi | Jun 18, 2024

New Series: Building a .NET Core headless site on Optimizely Graph and SaaS CMS

Welcome to this new multi-post series where you can follow along as I indulge in yet another crazy experiment: Can we make our beloved Alloy site r...

Allan Thraen | Jun 14, 2024 | Syndicated blog

Inspect In Index is finally back

EPiCode.InspectInIndex was released 9 years ago . The Search and Navigation addon is now finally upgraded to support Optimizely CMS 12....

Haakon Peder Haugsten | Jun 14, 2024

Change the IP HTTP Header used for geo-lookup in Application Insights


Johan Kronberg | Jun 10, 2024 | Syndicated blog