Take the community feedback survey now.

Vincent Baaij
May 25, 2018
  5534
(5 votes)

ImageProcessor.Web.Episerver: new versions!

I have released new versions for my ImageProcessor.Web.Episerver package for both CMS 10 (version 1.1.0) and CMS 11 (version 2.1.0). If you are not familiar with this package, please see this blog for more information. The new version adds the work Episerver EMVP Erik Henningson has done to use the picture element together with ImageProcessor so you can create responsive images easily.

Erik described the steps he took and the code in two blog post (link1, link2), so please read those if you want to know more about how this works. I made some changes to the code Erik wrote, so that his Html.Picture helper can now be combined with my Html.ProcessImage helper. So doing something like this in your view:

@Html.Picture(Html.ProcessImage(Model.Image).Resize(378, null).ReplaceColor("fff""f00", 99).Watermark("Episerver"new Point(100, 100), "fff"), ImageTypes.Teaser)

will output the following HTML:

<picture>
    <source sizes="(max-width: 980px) calc((100vw - 40px)), (max-width: 1200px) 368px, 750px"
            srcset="/globalassets/alloy-plan/alloyplan.png?width=375&amp;replace=fff,f00&amp;fuzziness=99&amp;watermark=Episerver&amp;color=fff&amp;textposition=100,100&amp;fontsize=48&amp;fontstyle=Bold&amp;fontopacity=100&amp;dropshadow=false&amp;vertical=false&amp;rtl=false&amp;quality=80 375w,
		    /globalassets/alloy-plan/alloyplan.png?width=750&amp;replace=fff,f00&amp;fuzziness=99&amp;watermark=Episerver&amp;color=fff&amp;textposition=100,100&amp;fontsize=48&amp;fontstyle=Bold&amp;fontopacity=100&amp;dropshadow=false&amp;vertical=false&amp;rtl=false&amp;quality=80 750w,
		    /globalassets/alloy-plan/alloyplan.png?width=980&amp;replace=fff,f00&amp;fuzziness=99&amp;watermark=Episerver&amp;color=fff&amp;textposition=100,100&amp;fontsize=48&amp;fontstyle=Bold&amp;fontopacity=100&amp;dropshadow=false&amp;vertical=false&amp;rtl=false&amp;quality=80 980w,
		    /globalassets/alloy-plan/alloyplan.png?width=1500&amp;replace=fff,f00&amp;fuzziness=99&amp;watermark=Episerver&amp;color=fff&amp;textposition=100,100&amp;fontsize=48&amp;fontstyle=Bold&amp;fontopacity=100&amp;dropshadow=false&amp;vertical=false&amp;rtl=false&amp;quality=80 1500w">
    <img src="/globalassets/alloy-plan/alloyplan.png?width=750&amp;replace=fff,f00&amp;fuzziness=99&amp;watermark=Episerver&amp;color=fff&amp;textposition=100,100&amp;fontsize=48&amp;fontstyle=Bold&amp;fontopacity=100&amp;dropshadow=false&amp;vertical=false&amp;rtl=false&amp;quality=80">
</picture>

To make it easier to test that everything works as expected, Erik's code introduced a new appsetting “ImageProcessorDebug” in web.config. When its value is set to true, the width of the image will be shown in the image (you need to enable “watermark” in processing.config for that to work). I copied that setting over to my code. As you can see in the code above, I used the fluent API to also add a watermark to the image. In such a case the appsetting "wins".

Just as with Erik's implementation, this version will also create an additional src-set with webp-versions of the image. By setting type=”image/webp” we tell browsers that support webp that it can select that image instead of the original jpg. Browsers that don’t support webp will fallback to using the jpg versions. To facilitate this the ImageProcessor.Plugins.WebP package is now installed as a dependency.

Let me know if you would like to see other additions to the package. Hope this helps.

May 25, 2018

Comments

Please login to comment.
Latest blogs
How to Add Multiple Authentication Providers to an Optimizely CMS 12 Site (Entra ID, Google, Facebook, and Local Identity)

Modern websites often need to let users sign in with their corporate account (Entra ID), their social identity (Google, Facebook), or a simple...

Francisco Quintanilla | Oct 22, 2025 |

Connecting the Dots Between Research and Specification to Implementation using NotebookLM

Overview As part of my day to day role as a solution architect I overlap with many clients, partners, solutions and technologies. I am often...

Scott Reed | Oct 22, 2025

MimeKit Vulnerability and EPiServer.CMS.Core Dependency Update

Hi everyone, We want to inform you about a critical security vulnerability affecting older versions of the EPiServer.CMS.Core  package due to its...

Bien Nguyen | Oct 21, 2025

Speeding Up Local Development with a Fake OpenID Authentication Handler

When working with OpenID authentication, local development often grinds to a halt waiting for identity servers, clients, and users to be configured...

Eric Herlitz | Oct 20, 2025 |