World is now on Opti ID! Learn more

Vincent Baaij
May 25, 2018
  433
(0 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
Make Global Assets Site- and Language-Aware at Indexing Time

I had a support case the other day with a question around search on global assets on a multisite. This is the result of that investigation. This co...

dada | Jun 26, 2025

The remote server returned an error: (400) Bad Request – when configuring Azure Storage for an older Optimizely CMS site

How to fix a strange issue that occurred when I moved editor-uploaded files for some old Optimizely CMS 11 solutions to Azure Storage.

Tomas Hensrud Gulla | Jun 26, 2025 |

Enable Opal AI for your Optimizely products

Learn how to enable Opal AI, and meet your infinite workforce.

Tomas Hensrud Gulla | Jun 25, 2025 |

Deploying to Optimizely Frontend Hosting: A Practical Guide

Optimizely Frontend Hosting is a cloud-based solution for deploying headless frontend applications - currently supporting only Next.js projects. It...

Szymon Uryga | Jun 25, 2025

World on Opti ID

We're excited to announce that world.optimizely.com is now integrated with Opti ID! What does this mean for you? New Users:  You can now log in wit...

Patrick Lam | Jun 22, 2025

Avoid Scandinavian Letters in File Names in Optimizely CMS

Discover how Scandinavian letters in file names can break media in Optimizely CMS—and learn a simple code fix to automatically sanitize uploads for...

Henning Sjørbotten | Jun 19, 2025 |