Vincent Baaij
May 25, 2018
(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:

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

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


Please login to comment.
Latest blogs
Zombie Properties want to Eat Your Brains

It’s a story as old as time. You work hard to build a great site. You have all the right properties – with descriptive names – that the content...

Joe Mayberry | Mar 29, 2023 | Syndicated blog

Optimizely finally releases new and improved list properties!

For years, the Generic PropertyList has been widely used, despite it being unsupported. Today a better option is released!

Tomas Hensrud Gulla | Mar 28, 2023 | Syndicated blog

Official List property support

Introduction Until now users were able to store list properties in three ways: Store simple types (int, string, DateTime, double) as native...

Bartosz Sekula | Mar 28, 2023

New dashboard implemented in CMS UI 12.18.0

As part of the CMS UI 12.18.0 release , a new dashboard has been added as a ‘one stop shop’ to enable editors to access all of their content items,...

Matthew Slim | Mar 28, 2023