Blog posts by Vincent Baaij2019-01-15T15:30:18.0000000Z/blogs/vincent-baaij/Optimizely WorldEpiserver and ImageProcessor: New Crop addition and renaming of UI package/blogs/vincent-baaij/dates/2019/1/episerver-and-imageprocessor-new-crop-addition/2019-01-15T15:30:18.0000000Z<p>I wanted to see if the Image Cropper Property Editors <span style="display: inline !important; float: none; background-color: #ffffff; color: #000000; cursor: text; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">could work with my ImageProcessor add-ons too. Turned out they did. Just had to make some small changes to </span><code>using</code><span style="display: inline !important; float: none; background-color: #ffffff; color: #000000; cursor: text; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;"> statements and url formatting and that was basically it. I have now added the functionality from the package </span>(NuGet Package: <a href="https://nuget.episerver.com/package/?id=ITMeric.ImageCrop">ITMeric.ImageCrop</a>, source: <a href="https://github.com/itMeric/ITMeric.ImageCrop">https://github.com/itMeric/ITMeric.ImageCrop</a>) by <a href="/link/5341f632537c4b0ab6b8fb651bd310f8.aspx?userid=03aab476-132a-e511-9afb-0050568d2da8">Maciej Golis</a> <span style="background-color: #ffffff; color: #000000; cursor: text; display: inline; float: none; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">to the ImageProcessor add-on family.</span> Thank you Maciej for creating this! </p>
<p>Because of this addition, I changed the ImageProcessor.Web.Episerver.UI package too. This has now been renamed to <code>ImageProcessor.Web.Episerver.UI.Blocks</code>. Along with the rename I added the <code>CropProcessImageBlock</code> to the package. This block basically has the same functionality as the <code>ProcessImageBlock</code> but uses the Image Cropper property editor for selecting and cropping the image at the same time</p>
<p><img src="/link/96fcb657e569458ab3973d9f50fe96a3.aspx" width="381" height="302" /></p>
<p>You can use all the other methods (or method collections) to manipulate the cropped image. See <a href="/link/8d08ab88231344b39531deb1aa8cbd52.aspx">Episerver and ImageProcessor: now for editors too!</a> for more information about the blocks functionality.</p>
<p>Of course you can also use the Crop package standalone. The <a href="/link/b1192f5017d14e0ba1f72eb2b01aa079.aspx">blog post from Maciej</a> and the Readme in the original GitHub repository contain more information about it's usage. <span style="text-decoration: line-through;">Only thing that is not ported over is the <code>CropRatio</code> attribute as this functionality is not present in the ImageProcessor library</span> (added in 5.3)</p>
<p>So, to summarize we now have ImageProcessor.Web.Episerver.UI.Blocks and <span style="display: inline !important; float: none; background-color: #ffffff; color: #000000; cursor: text; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">ImageProcessor.Web.Episerver.UI.Crop. The first has a dependency on the second because of the addition of the new block described above. The previous ImageProcessor.Web.Episerver.UI package will be discontinued. The new packages are submitted to the feed. </span></p>
<p>To learn more about the ImageProcessor, you can check out my other blog posts. A good starting point would be <a href="/link/5a228738b5994fe2885fe6c835550f61.aspx">this one</a></p>
<p>The code for the package is available on <a href="https://github.com/vnbaaij/ImageProcessor.Web.Episerver">my GitHub account</a>. I still really appreciate feedback in the comments below and help in the form of issues and, even better, pull requests in the repository.</p>
<p>Hope this helps.</p>
<p> </p>
Episerver and ImageProcessor: Now for editors too!/blogs/vincent-baaij/dates/2018/7/fggnrh/2018-11-26T23:08:26.0000000Z<p><strong>Update 16 January 2019: this package has been renamed to</strong> <code>ImageProcessor.Web.Episerver.UI.Blocks</code></p>
<p>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.</p>
<p><img src="/link/0a72dc32b7d64541bf6fe562bbaad083.aspx" width="444" height="193" /></p>
<p>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 <a href="http://imageprocessor.org/imageprocessor-web/imageprocessingmodule/">ImageProcessor documentation</a> 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.</p>
<p>Selecting the same blocks over and over for each image is not convenient of course, so I added one other block, named the <code>MethodCollectionBlock</code> 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.</p>
<p><img src="/link/57e6ce5dc39b407ea5fe0ffc4e6aca5a.aspx" width="391" height="314" /><img src="/link/2a13fdcd30674ce18c5e377148acfb96.aspx" width="510" height="315" /></p>
<p>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. </p>
<p><img src="/link/9a76f22b49264bddbfb139666ec8f50c.aspx" width="300" height="199" /><img src="/link/6cb2959a24544b15afe686f06767ca23.aspx" width="300" height="199" /></p>
<p>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.</p>
<h2>More new stuff</h2>
<p>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:<br /><code>PictureUtils.GetPictureData(Url.ContentUrl(Model.Image), ImageTypes.Teaser)</code></p>
<p>(Thanks Erik!)</p>
<p>Because of all these additions, the main add-on has a new (major) version as well. All the packages are available on the <a href="https://nuget.episerver.com/?q=Imageprocessor&s=Popular&r=10&f=All">NuGet feed</a>.</p>
<p>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!)</p>
<p>To learn more about the ImageProcessor, you can check out my other blog posts. A good starting point would be <a href="/link/5a228738b5994fe2885fe6c835550f61.aspx">this one</a></p>
<p>The code for the package is available on <a href="https://github.com/vnbaaij/ImageProcessor.Web.Episerver">my GitHub account</a>. I still really appreciate feedback in the comments below and help in the form of issues and, even better, pull requests in the repository.</p>
<p>Hope this helps.</p>ImageProcessor.Web.Episerver: new versions/blogs/vincent-baaij/dates/2018/7/imageprocessor-web-episerver-new-versions/2018-07-23T14:07:41.0000000Z<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>I have released new versions for my ImageProcessor.Web.Episerver and ImageProcessor.Web.Episerver.Azure packages for CMS 11 (<a href="https://nuget.episerver.com/package/?id=ImageProcessor.Web.Episerver&v=3.0.1">version 3.0.1</a>). If you are not familiar with this package, please see <a href="/link/5a228738b5994fe2885fe6c835550f61.aspx">this blog</a> for more information. I consider this as a major release because there are some breaking changes. In this version I refactored and simplified both the file blob cache and the Azure blob cache quite extensively. I tried to use as much of the standard Episerver blob functionality as possible. It is very well possible that this breaks the ability to store images in a UNC path (I don't have a setup to test this). Be carefull when upgrading to this version if this is your setup.<br />I decided to not backport these changes into the CMS 10 version (also because I wouldn't know how to handle the versioning then :))</p>
<p>Configuration became a bit easier. Neither the file blob cache nor the Azure blob cache require specific settings with these versions. Also there is no special IImageService needed anymore when using Azure. The NuGet installation/update should take care of updating the config files for you. If you encounter problems there, please refer to the sample sites in the repository for comparisson.</p>
<p>There is of course also some new functionality available. It is now possible to also use ImageProcessor on static files! The fluent API has an overload to start processing an image from a path string, so you can also use this API with your static files (and get Intellisense help while doing so). A special folder is created in the cache to store these processed images. Erik Henningson made a PR (thanks!) that allows for lazy loading of processed images. The readme in the GitHub repository explains how to use this and the sample site comes with an implementation of this.</p>
<p>I have some ideas about other stuff I like to add in the coming months, but that will have to wait untill after the holiday. If there are things YOU would like to see added, please let me know in the comments below or in the <a href="https://github.com/vnbaaij/ImageProcessor.Web.Episerver">repo on GitHub</a>.</p>
<p>As always, hope this helps.</p>
</body>
</html>ImageProcessor.Web.Episerver: new versions!/blogs/vincent-baaij/dates/2018/5/episever-and-imageprocessor-new-versions/2018-05-25T14:24:13.0000000Z<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>I have released new versions for my ImageProcessor.Web.Episerver package for both CMS 10 (<a href="https://nuget.episerver.com/package/?id=ImageProcessor.Web.Episerver&v=1.1.0">version 1.1.0</a>) and CMS 11 (<a href="https://nuget.episerver.com/package/?id=ImageProcessor.Web.Episerver&v=2.1.0">version 2.1.0</a>). If you are not familiar with this package, please see <a href="/link/5a228738b5994fe2885fe6c835550f61.aspx">this blog</a> 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.</p>
<p>Erik described the steps he took and the code in two blog post (<a href="https://hacksbyme.net/2018/03/19/picture-element-imageprocessor-responsive-images-made-easy/">link1</a>, <a href="https://hacksbyme.net/2018/05/12/optimize-your-images-with-imageprocessor/">link2</a>), 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:</p>
<p><span style="background: yellow;">@</span>Html.Picture(Html.ProcessImage(Model.Image).Resize(378, <span style="color: blue;">null</span>).ReplaceColor(<span style="color: #a31515;">"fff"</span>, <span style="color: #a31515;">"f00"</span>, 99).Watermark(<span style="color: #a31515;">"Episerver"</span>, <span style="color: blue;">new</span> <span style="color: #2b91af;">Point</span>(100, 100), <span style="color: #a31515;">"fff"</span>), <span style="color: #2b91af;">ImageTypes</span>.Teaser)</p>
<p>will output the following HTML:</p>
<pre><span style="color: blue;"><</span><span style="color: maroon;">picture</span><span style="color: blue;">></span>
<span style="color: blue;"><</span><span style="color: maroon;">source</span> <span style="color: red;">sizes</span><span style="color: blue;">=</span><span style="color: blue;">"(max-width: 980px) calc((100vw - 40px)), (max-width: 1200px) 368px, 750px"</span>
<span style="color: red;">srcset</span><span style="color: blue;">=</span><span style="color: blue;">"/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"</span><span style="color: blue;">></span>
<span style="color: blue;"><</span><span style="color: maroon;">img</span> <span style="color: red;">src</span><span style="color: blue;">=</span><span style="color: blue;">"/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"</span><span style="color: blue;">></span>
<span style="color: blue;"></</span><span style="color: maroon;">picture</span><span style="color: blue;">><br /><br /></span></pre>
<p>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".</p>
<p>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.</p>
<p>Let me know if you would like to see other additions to the package. Hope this helps.</p>
</body>
</html>Editing on a touch screen device/blogs/vincent-baaij/dates/2018/5/editing-on-a-touch-screen-device/2018-05-18T15:28:25.0000000Z<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Working with a touch screen device, like a Surface Pro, Book or Laptop, might lead to some unexpected behaviour in the editor. In my case, I didn't receive any feedback on hovering the cursor over the editable parts of a page or block. So, no green (or grey on a content area) highlight and no information label with the field name. It didn't matter what browser I tried it in. Edge, Firefox and Chrome all gave me the same feedback-less experience.</p>
<p>It took some digging around to find out what caused this. I consulted developer support, but for them it was working as expected. I uninstalled all browser extensions/add-ons, but still no success. Then I moved to the browser specific settings. Turns out all the browsers have W3C Touch API support that you can change. After disabling this support all browsers started to show the expected highlight and label!</p>
<p>If you happen to have the same problem on a touch screen device, here's how you can change the mentioned setting:</p>
<p><strong>Edge</strong></p>
<p>Navigate to 'about:flags'. In the screen that appears scroll down to <span style="display: inline !important; float: none; background-color: transparent; color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">Standards Preview. For </span>'Enable touch events' select 'Always off' in the dropdwn list.</p>
<p><img src="/link/63ca10322ca841b1b35c8adf6138aaf9.aspx" width="600" alt="Image EdgeTouch.PNG" /></p>
<p><strong>Firefox</strong></p>
<p><strong></strong>Navigate to 'about:config'. In the screen that appears serch for 'touch_events'. Double click and set the value to '0'</p>
<p><img src="/link/0184f22180394afa91b4b2671a2be835.aspx" width="500" alt="Image FirefoxTouch.PNG" /></p>
<p><strong>Chrome</strong></p>
<p>Navigate to 'chrome://flags'. In the screen that appears look for 'Touch Events API'. Set value to 'Disabled'</p>
<p><img src="/link/615c38e3aafc4043b1e4d03fb62d4655.aspx" width="500" alt="Image ChromeTouch.png" /></p>
<p>Hope this helps,</p>
<p>Vincent</p>
</body>
</html>Upgrading the AlloyDemoKit to Episerver 11/blogs/vincent-baaij/dates/2017/12/upgrading-the-alloydemokit-to-episerver-11/2017-12-13T17:11:56.0000000Z<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p><strong>Update 23-1-2018</strong></p>
<p>With update 198 we are now at a point that we can merge the V11 branch into the master! The update brings along A/B testing, so we now have everything we need. The last commit in the master branch has been tagged with a V10 label. If the need arrises to go back, you should be able to find it.</p>
<p><strong>Update 16-1-2018</strong></p>
<p>After update 197 the following package has been added to the demo again:</p>
<ul>
<li>EPIServer.TinyMCESpellChecker (1.3.0)</li>
</ul>
<p><strong>Update 29-12-2017</strong></p>
<p>After update 194 the following functionality is once again available in the demo kit in the v11 branch:</p>
<ul>
<li>Episerver Self-Optimizing Block (2.4.0)</li>
<li>PowerSlice (3.0.0)</li>
</ul>
<p>Custom Powerslice samples are available in the code in the Business\PowerSlice folder. Remember that you need to create your own Find index to get this to work.</p>
<p>Also as part of this update the <a href="http://nuget.episerver.com/en/OtherPages/Package/?packageId=EPiServer.VisitorGroupsCriteriaPack">EPiServer.VisitorGroupsCriteriaPack</a><span style="display: inline !important; float: none; background-color: transparent; color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;"> (2.0.0)</span> package has been added back to the solution.</p>
<p>In making this a real version 11 solution, I have replaced (and removed) all the older XForms forms with 'new' forms.</p>
<p>The only thing missing to merge this in the master branch is the A/B testing functionality. This will probably come somewhere soon in the new year.</p>
<p><strong>Update 20-12-2017</strong></p>
<p>The following packages have now been added to the demo again:</p>
<ul>
<li>BVN.404Handler</li>
<li>Episerver.GoogleMapsEditor</li>
<li>Geta.SEO.Sitemaps</li>
</ul>
<p>Because of the upgrade to Episerver.CMS.UI to 11.2, the MenuPin functionality is now available ou-of-the-box. See <a href="/link/fe82046021e94e2a9dff196ec7016a16.aspx">this post</a> for more information. Through code in MenuPin, we were able to adjust the styling of the Visitor Groups section. With the inclusion of MenuPin in Episerver, this code has now disappeared. I copied the required cocde over to the demo kit so the Visitor Groups styling is now looking better again.</p>
<p>The target framework for the projects is now .NET Framework 4.6.2</p>
<p>---</p>
<p>A new branch has been added to the <a href="https://github.com/episerver/AlloyDemoKit/tree/V11">AlloyDemoKit repository on GitHub</a>. In this branch I have updated the site to Episerver CMS 11. Until all (or at least the most important) packages used by the demo kit are available for this new version, this branch will co-exist as a separate branch besides the master branch. The site works and can most certainly be used for demo scenarios, but not all functionality is there yet so be aware of that!</p>
<p>To get the demo kit up an running on version 11, I first made a list of all the packages that are not (yet) available or compatible. As more package become available, they will be added back in of course. The following lists shows all the incompatible packages. Each package links to the coresponding page in the Episerver NuGet site:</p>
<ul>
<li><a href="http://nuget.episerver.com/en/OtherPages/Package/?packageId=AppleWatchChannel">AppleWatchChannel</a>(*)</li>
<li><a href="http://nuget.episerver.com/en/OtherPages/Package/?packageId=BVN.404Handler">BVN.404Handler</a></li>
<li><a href="http://nuget.episerver.com/en/OtherPages/Package/?packageId=Episerver.GoogleMapsEditor">Episerver.GoogleMapsEditor</a></li>
<li><a href="http://nuget.episerver.com/en/OtherPages/Package/?packageId=EPiServer.TinyMCESpellChecker">EPiServer.TinyMCESpellChecker</a></li>
<li><a href="http://nuget.episerver.com/en/OtherPages/Package/?packageId=EPiServer.VisitorGroupsCriteriaPack">EPiServer.VisitorGroupsCriteriaPack</a></li>
<li><a href="http://nuget.episerver.com/en/OtherPages/Package/?packageId=MenuPin">MenuPin</a>(**)</li>
<li><a href="http://nuget.episerver.com/en/OtherPages/Package/?packageId=PowerSlice">PowerSlice</a></li>
<li><a href="http://nuget.episerver.com/en/OtherPages/Package/?packageId=TextTVChannel">TextTVChannel</a>(*)</li>
<li><a href="http://nuget.episerver.com/en/OtherPages/Package/?packageId=Geta.SEO.Sitemaps">Geta.SEO.Sitemaps</a>(***)</li>
</ul>
<div>Some remarks apply to this list:<br /><br /></div>
<div>*Although the package says it has no dependencies, it will <strong>not</strong> work on Episerver 11. This is because of the separation of ASP.NET specific code into it's own assemblies and namespaces. A version 11 compatible package is released and added to the solution. See <a href="/link/6cab22cb90604c009ee1730ea2a4c202.aspx">this post</a> and <a href="http://nuget.episerver.com/en/OtherPages/Package/?packageId=DemoChannels">this package</a> for more information</div>
<div>**The MenuPin functionallity will be integrated into Episerver in an upcoming release</div>
<div>***A<span style="display: inline !important; float: none; background-color: transparent; color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">lthough the package says it has a dependency on EPiServer.CMS.UI</span><span style="display: inline !important; float: none; background-color: transparent; color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;"> (≥ 10.0.2), it will </span><strong><span style="text-align: left; color: #000000; text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-style: normal; font-variant: normal; text-decoration: none; word-spacing: 0px; display: inline !important; white-space: normal; orphans: 2; float: none; -webkit-text-stroke-width: 0px; background-color: transparent;">not</span></strong><span style="display: inline !important; float: none; background-color: transparent; color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;"> work on Episerver 11. This is because of the separation of ASP.NET specific code into it's own assemblies and namespaces. The <a href="https://github.com/Geta/SEO.Sitemaps">repo on GitHub</a> shows an version 11 package is in the works.</span></div>
<p>Besides the packages mentioned, A/B testing is not yet available.</p>
<p>The packages that do not have an alternative available have been uninstalled from the solution. If there is source code linked to such a package, it has been excluded for now. The number of necessary code changes was quite low. They have been described in several posts like <a href="https://swapcode.wordpress.com/2017/12/01/upgrade-episerver-solution-to-version-11-update-190/">this one</a> already. I also checked the code against the recently released <a href="https://github.com/episerver/alloy-mvc-template">Alloy Template source code</a> (<a href="/link/e9fda9fc659c4762848421f348f7979e.aspx">see this blog for more information</a>). This led to a lot of small changes, but at least the standard Alloy part is now up-to-date again.</p>
<p>With CMS 11 we also get an officially supported version of the Property Value List, as described in <a href="/link/b89585bc85f84513a24796d6f3457eee.aspx">this blog post</a>. This can be used for the Unique Selling Points property on the Product page type (this is now also how it works in the new Template I just mentioned). I incorporated this into the source. It did require some manual updates to the database to change the existing values of the property though. I also made the Meta Keyword property work in this way. This is not the case within the available Alloy Template source. I don't know why that is. Oh, and by the way, if keywords have been entered, they will now actually show up in the rendered HTML :).</p>
<p>I will update this post when new packages become available and are added back into the solution.</p>
<p>Hope this helps.</p>
</body>
</html>"New" package: Demo Channels for Episerver 11/blogs/vincent-baaij/dates/2017/12/new-package-demo-channels/2017-12-12T12:39:53.0000000Z<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>If you ever worked with the AlloyDemoKit (our demo environment based on the starterkit and <a href="https://github.com/episerver/AlloyDemoKit">available on GitHub</a>), then you might have seen that there are 2 display channels available which are not in the starterkit. These channels are the Text-TV (also known as Teletext) channel and the Apple Watch channel and can be found in the interface by going to the 'Toggle view settings' and then use the 'Select to view in a channel or resolution' button as shown in the image below. </p>
<p><img src="/link/516a51fe3ff243be96cec74bc2e780b4.aspx" width="350" alt="Image channels1.PNG" height="358" /></p>
<p>The channels can be added to any Episerver site by using the <a href="http://nuget.episerver.com/en/?search=apple+watch&sort=MostDownloads&page=1&pageSize=10">packages available on the feed</a>. They are both displayed on the feed with the name "Apple Watch Channel" but you can see from the tags which is which.</p>
<p>Although both packages say that there are no dependencies, they will however <strong>not</strong> work on an Episerver CMS 11 site. This is because of to the moving around of namespaces and the splitting out of the ASP.NET specific code.</p>
<p>I reached out to some members of The EPiCode Community and got hold of parts of the source code for both packages. Combined with the contents from the packages, I was ablo to create a new version that does work on Episerver CMS 11. As the channels are quite similar, I decided to combine them into one package under the Demo Channels monniker. The package is <a href="http://nuget.episerver.com/en/OtherPages/Package/?packageId=DemoChannels">available on the feed</a> and has been given version number 11 to keep up with with major Episerver version numbers. Just install into your solution and the channels will show up in your site after a recompile/restart. No additional configuration needed. Oh, and the source code is of course available from <a href="https://github.com/vnbaaij/DemoChannels">my GitHub account</a>.</p>
<p>Hope this helps.</p>
</body>
</html>Episerver and ImageProcessor: now also on Azure AND on CMS 11!/blogs/vincent-baaij/dates/2017/11/episerver-and-imageprocessor-now-also-on-azure-and-cms-11/2017-11-28T12:16:06.0000000Z<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>As I wrote in <a href="/link/5a228738b5994fe2885fe6c835550f61.aspx">my previous post</a>, I was going to work on an Azure enabled version of the ImageProcessor Episerver integration package. This work is now finished and the package (ImageProcessor.Web.Episerver.Azure) is now available on the <a href="http://nuget.episerver.com/en/OtherPages/Package/?packageId=ImageProcessor.Web.Episerver.Azure">NuGet feed</a>!.</p>
<p>I used the same approach to setting it up as with the file blob storage one. This means that the package re-uses as much of the Episerver configuration as possible. So you don't have to specify a storage connection string. It just uses the one that is configured for Episerver. the same goes for the container. It just takes the value from the Episerver configuration.<br />All the necessary config changes are made by the NuGet package installation.</p>
<p>I also released a small update to the file blob storage version. No major changes, but it does change how the generated cache file names are generated. Now every cached file gets a prefix ('3p!_'). This makes it easier (both for humans and the automated cleanup process) to make a distinction between the original assets and the cached files. This is also the case with the Azure version by the way.</p>
<h2>CMS 11</h2>
<p>Alongside the updates mentioned above, I have also worked on supporting CMS 11. Not a lot had to be changed and I have released both packages with a version 2.0 number. Just install the packages and you should be good to go.</p>
<p>The packages are available on the NuGet feed.</p>
<h2>Next steps</h2>
<p>In my previous post I also wrote about delivering an Amazon version of the package. I decided to postpone that as I have no experience whatsoever with Amazon. If someone really wants this, let me know in the comments below. I'll see what I can do then.</p>
</body>
</html>Episerver and ImageProcessor: more choice for developers and designers/blogs/vincent-baaij/dates/2017/10/episerver-and-imageprocessor-more-choice-for-developers-and-designers/2017-10-09T17:14:44.0000000Z<p>When working with images in Episerver from a developer/designer perspective, the go-to solution seems to be to install ImageResizer and the accompanying ImageResizer plugin package (<a href="http://nuget.episerver.com/en/OtherPages/Package/?packageId=ImageResizer.Plugins.EPiServerBlobReader">package</a>, <a href="https://github.com/valdisiljuconoks/ImageResizer.Plugins.EPiServerBlobReader">source</a>) from <a href="https://blog.tech-fellow.net/">Valdis</a> (which are both excellent). This does however come with some drawbacks:</p>
<ul>
<li>If you want to use a disk based cache for your resized images (and you REALLY should on a production environment), you need to buy a commercial license for ImageResizer.<br /><em>If you don't have a license and still use the DiskCache plugin, you'll see a red dot in the lower right corner of every processed image</em>.</li>
</ul>
<ul>
<li>You might need to buy commercial licenses for extra modules/plugins.</li>
</ul>
<p>With this blogpost I would like to introduce an alternative solution. You may have heard of the (brilliant) <a href="http://imageprocessor.org/">ImageProcessor</a> package by the all round nice guy <a href="https://about.me/james_south">James Jackson-South</a>. It is used in many, many projects, websites and software packages, is completely <a href="https://github.com/JimBobSquarePants/ImageProcessor">open source</a>, is very configurable and does not require paid-for licenses. To make it work seamlessly with Episerver requires some code though. The package I have built and introduce here contains those changes and additions. It is called ImageProcessor.Web.Episerver (because it is technically an ImageProcessor extension) and <span style="text-decoration: line-through;">will be</span> is available from the <a href="http://nuget.episerver.com/en/OtherPages/Package/?packageId=ImageProcessor.Web.Episerver">Episerver NuGet feed</a> <span style="text-decoration: line-through;">shortly (after approval)</span>.</p>
<p>Let me first sum up what is in the package and then explain in more detail:</p>
<ul>
<li>It has code so ImageProcessor can find and process images from blob storage</li>
<li>It has a disk cache which stores the processed images alongside the originals in the blob storage</li>
<li>It comes with a strongly typed Fluent API for all ImageProcessor.Web image processing methods</li>
</ul>
<h2>Let ImageProcessor read from blob storage</h2>
<p>Episerver uses <a href="/link/bad5bb72bde642e196061e58812d4911.aspx">blob storage</a> to store media items like images and documents. ImageProcessor needs some help to understand where to get the files from. Specifically, for that goal ImageProcessor comes with an <a href="http://imageprocessor.org/imageprocessor-web/extending/#iimageservice">IImageService</a>. From the docs: <em>“The IImageService defines methods and properties which allow developers to extend ImageProcessor to retrieve images from alternate locations to process.”</em> An implementation of this interface for Episerver is quite straightforward and has already been written (see for example <a href="https://gist.github.com/andreas-cloudnine/34dc468205a230f0579585db17aa1593">here</a> and <a href="https://gist.github.com/CameronWills/bcaf9be253ec8fe127226fc0d33ef810">here</a>). I added a combination of these in this package. I also added code to make the processing work from within the editing experience. Just like with the <a href="https://blog.tech-fellow.net/2016/10/31/imageresizer-plugin-for-episerver-v10/">solution from Valdis</a>, this might not always play well with unpublished images.</p>
<h2>Caching</h2>
<p>ImageProcessor uses a disk based caching mechanism that creates a file structure in /App_Data/cache by default (the location it stores the files is configurable). Using it this way is certainly possible, but then you end up with two separate structures of files. I thought it would be nicer (not necessarily better) to store the processed and cached files alongside the original blobs. This package contains code which does just that. This is possible because ImageProcessor exposes an <a href="http://imageprocessor.org/imageprocessor-web/extending/#iimagecache">IImageCache</a> interface. From the docs: <em>“The IImageCache defines methods and properties which allow developers to extend ImageProcessor to persist cached images in alternate locations.”</em> It retains all the good stuff that the default ImageProcessor implementation already has, like automatic cleanup and store cache outside of www root. Yes, it can also be an UNC path. To change the path, follow the regular steps to do this in Episerver (in <episerver.framework> section change <appData basePath>).</p>
<h2>Fluent API</h2>
<p>ImageProcessor, like the name implies, does a lot more than just resizing images. See the <a href="http://imageprocessor.org/imageprocessor-web/imageprocessingmodule/">ImageProcessingModule documentation</a> for all available out of the box methods that you can use. It works as an HttpModule that processes commands added to the query string of an image in your views. Adding to the query string is however not very developer friendly. You don't get IntelliSense and there is no compile time checking of the syntax. Inspired by the fluent api in Valdis’s package, I decided to add this to my package as well. I added a complete, strongly typed, fluent implementation for <em>all </em>default ImageProcessingModule methods and provided a couple of extra ones as shortcuts. This means that you can now do things like this in your views:</p>
<pre class="language-csharp"><code>@Html.ProcessImage(Model.Image).Resize(375,null).ReplaceColor("fff", "f00",99).Watermark("Episerver",new Point(100,100),"fff")</code></pre>
<p><em>Note that the Resize function has parameters that are only used in specific combinations. I created a couple of overloads for this. Using the mentioned shortcuts, instead of .Resize you could also use .Width.</em></p>
<p>Don't forget to add the using stament to your view:</p>
<pre class="language-csharp"><code>@using ImageProcessor.Web.Episerver</code></pre>
<p>I tried to retain the defaults for parameters as much as possible. I documented the methods and parameters based on the original documentation. IntelliSense is your friend and will show you all the information when needed.</p>
<p><strong><em>Note that the commands will be executed in the order supplied</em></strong>.</p>
<p>To get an example after installing the package in the Alloy starter kit, change TeaserBlok.cshtml in Views/Shared/Blocks to the code below:</p>
<pre class="language-csharp"><code>@using EPiServer.Core
@using ImageProcessorEpiserverTest.Controllers
@using ImageProcessor.Web.Episerver
@using System.Drawing
@model TeaserBlock
<div class="border">
@*Link the teaser block only if a link has been set and not displayed in preview*@
@using (Html.BeginConditionalLink(
!ContentReference.IsNullOrEmpty(Model.Link) && !(ViewContext.Controller is PreviewController),
Url.PageLinkUrl(Model.Link),
Model.Heading))
{
<h2 @Html.EditAttributes(x => x.Heading)>@Model.Heading</h2>
<p @Html.EditAttributes(x => x.Text)>@Model.Text</p>
<div @Html.EditAttributes(x => x.Image)>
<img src="@Html.ProcessImage(Model.Image).Resize(375,null).ReplaceColor("fff", "f00",99).Watermark("Episerver",new Point(100,100),"fff").RoundedCorners(20)" />
</div>
}
</div></code></pre>
<p><em>Remenber to change the @using in line 2 AND to enable all the necessary processors in config/imageprocessor/processing.config</em></p>
<p>This should give you the following:</p>
<p><em><img src="/link/d944dc8fe1a64c099e1e9eb856b0e1a5.aspx" width="1046" alt="Image Capture.PNG" height="536" /></em></p>
<h2>Installation</h2>
<p>The package is available on the Episerver NuGet feed with the name <a href="http://nuget.episerver.com/en/OtherPages/Package/?packageId=ImageProcessor.Web.Episerver">ImageProcessor.Web.Episerver</a>. It obviously has a dependency on both the ImageProcessor core and the ImageProcessor.Web packages and will therefore add these to your solution.</p>
<p>ImageProcessor uses sensible defaults for it's configuration options. If you would like to override these defaults, you can install the ImageProcessor.Web.Config package. We need to do this here, so this package is also installed as a dependency. The needed configuration changes to both the ImageProcessor.Web configuration and the site web.config are then made by my NuGet package.</p>
<p>If you want to enable or disable processors, you can do that in the standard ImageProcessor way. See <a href="http://imageprocessor.org/imageprocessor-web/configuration/#processingconfig">http://imageprocessor.org/imageprocessor-web/configuration/#processingconfig</a> how to do this. If you want to tryout the processors, you can copy the contents from <a href="https://github.com/vnbaaij/ImageProcessor.Web.Episerver/blob/master/sample/AlloySample/config/imageprocessor/processing.config">this</a> file in the sample site in the repository to enable them <strong>all</strong>.</p>
<p><strong><em>To minimize possible attack areas, only enable what you need in your production environment!</em></strong></p>
<p><em></em>Uninstalling the package will revert everything back to the default ImageProcessor configuration.</p>
<h2>Next steps</h2>
<p>ImageProcessor has plugins to store the cache in Azure or Amazon S3 blob storage. I hope to release Episerver adapted versions of these plugins in the near future. The goal is that cache will be stored alongside the source blobs just as with the disk based solution without requiring additional configuration besides the regular Episerver blob storage cloud settings.</p>
<p>James is working on a completely rebuilt .NET Core version of ImageProcessor named ImageSharp (in beta at the time of writing). When this gets released, ImageProcessor will probably go into maintenance mode. He mentioned on Twitter that he wants to write a HttpModule which, because of .NET Standard support, makes it possible to use ImageSharp from .NET Framework and Episerver. I hope to be able to offer a comparable package then. Lets first see how this goes…</p>
<p>All the code for this package is on <a href="https://github.com/vnbaaij/ImageProcessor.Web.Episerver">my GitHub account</a>. I would really appreciate feedback in the comments below and help in the form of issues and, even better, pull requests in the repository.</p>
<p>Hope this is helpful.</p>
<p>More recent posts about this add-on:</p>
<ul>
<li><a href="/link/e7016b875f42456baed73da7a9239688.aspx">https://world.episerver.com/blogs/vincent-baaij/dates/2017/11/episerver-and-imageprocessor-now-also-on-azure-and-cms-11/</a></li>
<li><a href="/link/7b0842116c0d4067a788974f6c4778d8.aspx">https://world.episerver.com/blogs/vincent-baaij/dates/2018/5/episever-and-imageprocessor-new-versions/</a></li>
<li><a href="/link/076ccd4b462245acadd5f607a7add92b.aspx">https://world.episerver.com/blogs/vincent-baaij/dates/2018/7/imageprocessor-web-episerver-new-versions/</a></li>
<li><a href="/link/8d08ab88231344b39531deb1aa8cbd52.aspx">https://world.episerver.com/blogs/vincent-baaij/dates/2018/7/fggnrh/</a></li>
<li><a href="/link/2e816d6e14b244f1bb9f785a6d2b02f2.aspx">https://world.episerver.com/blogs/vincent-baaij/dates/2019/1/episerver-and-imageprocessor-new-crop-addition/</a></li>
</ul>
<p><a href="/link/076ccd4b462245acadd5f607a7add92b.aspx"></a></p>
<p><a href="/link/7b0842116c0d4067a788974f6c4778d8.aspx"></a></p>
<p><a href="/link/e7016b875f42456baed73da7a9239688.aspx"></a></p>