Blog posts by Erik Henningson2024-08-02T15:59:03.0000000Zhttps://world.optimizely.com/blogs/erik-henningson/ Optimizely World Changes to PictureRenderer.OptimizelyIn version 3.2 of PictureRenderer.Optimizely it is possible to add any attribute to the rendered img element. This makes it possible to add e.g. custom data and itemprop attributes. Version 3.2 introduces the PictureAttributes object that may be used as an input parameter when calling @Html.Picture. It&#8217;s in the PictureAttributes object where you can add &#8230; <a href="https://hacksbyme.net/2024/08/02/changes-to-picturerenderer-optimizely/" class="more-link">Continue reading <span class="screen-reader-text">Changes to PictureRenderer.Optimizely</span></a>2024-08-02T15:59:03.0000000ZBlog post Image optimization at the edge.The latest version of PictureRenderer has support for resizing and optimizing images using Cloudflare's image service.2023-08-30T09:49:13.0000000ZBlog post On-page editing with Optimizely CMS on an externally hosted siteDid you know that you can enable on-page editing for a site that isn&#8217;t hosted on the same server as the CMS? I&#8217;m not sure when this feature was introduced, as there isn&#8217;t much documentation available. It took me several hours to figure out all the necessary steps. Hopefully, this article will save you some &#8230; <a href="https://hacksbyme.net/2023/06/13/on-page-editing-with-optimizely-cms-on-an-externally-hosted-site/" class="more-link">Continue reading <span class="screen-reader-text">On-page editing with Optimizely CMS on an externally hosted site</span></a>2023-06-13T07:45:01.0000000ZBlog post Optimize images added in the rich text editor.PictureRenderer for Optimizely CMS can be used to optimize images added in the rich text editor (TinyMce). In PictureRenderer.Optimizely v2.3 an XhtmlString extension is added that replaces img elements in the rich text content with a picture element. You enable this by creating a display template for XhtmlString properties. Create the file&#160;/Views/Shared/DisplayTemplates/XhtmlString.cshtml&#160;and add this: If &#8230; <a href="https://hacksbyme.net/2022/08/29/optimize-images-added-in-the-rich-text-editor/" class="more-link">Continue reading <span class="screen-reader-text">Optimize images added in the rich text editor.</span></a>2022-08-29T11:45:27.0000000ZBlog post Optimize images on your Optimizely CMS siteYou want the images on your site to be lazy loaded in the most optimal size and format, and still look really sharp on all devices. You don&#8217;t want the content editor to have to care about image size, image format, or what proportions the image should have. PictureRenderer can help you with all of &#8230; <a href="https://hacksbyme.net/2022/08/16/optimize-images-on-your-optimizely-cms-site/" class="more-link">Continue reading <span class="screen-reader-text">Optimize images on your Optimizely CMS site</span></a>2022-08-16T13:38:32.0000000ZBlog post Updates for Optimizely CMS 11 Picture helperThe Picture helper for Optimizely CMS 11 now supports creating webp versions for &#8220;all&#8221; image formats. Up until now webp versions was only created for jpg images. The reason was that the webp versions where lossy. The webp versions of a png image would get grainy/blurry parts, instead of the solid colors in the original &#8230; <a href="https://hacksbyme.net/2021/12/01/updates-for-optimizely-cms-11-picture-helper/" class="more-link">Continue reading <span class="screen-reader-text">Updates for Optimizely CMS 11 Picture helper</span></a>2021-12-01T15:12:56.0000000ZBlog post PictureRenderer for Optimizely CMS 12Say hello to PictureRenderer.Optimizely! The html helper that makes it super simple to render HTML Picture elements in your Optimizely CMS 12 solution. Images are automatically cropped and resized, and the browser will always select the most optimal image to use.The result is optimized (width, format, and quality), lazy loaded, and responsive images. If you &#8230; <a href="https://hacksbyme.net/2021/10/18/picturerenderer-for-optimizely-cms-12/" class="more-link">Continue reading <span class="screen-reader-text">PictureRenderer for Optimizely CMS 12</span></a>2021-10-18T09:22:57.0000000ZBlog post Serve Optimizely CMS pages directly from a CDN.This blog post is about speeding up your site by caching your Episerver Optimizely CMS pages in a CDN. This solution gives you granular control on how long a specific page should be cached. It works for any CDN, but here I&#8217;m focusing on getting it to work with the Cloudflare CDN that is included &#8230; <a href="https://hacksbyme.net/2021/08/13/serve-optimizely-cms-pages-directly-from-a-cdn/" class="more-link">Continue reading <span class="screen-reader-text">Serve Optimizely CMS pages directly from a CDN.</span></a>2021-08-13T12:39:26.0000000ZBlog post Getting started with Optimizely CMS previewThis is my experience on how to get started with the preview version of Optimizely CMS. Expect this blog post to be outdated fairly soon&#8230; Finally I took the time to take a look at the brand new Optimizely CMS, the .Net 5 version of former Episerver CMS. It seems to be pretty easy to &#8230; <a href="https://hacksbyme.net/2021/08/08/getting-started-with-optimizely-cms-preview/" class="more-link">Continue reading <span class="screen-reader-text">Getting started with Optimizely CMS preview</span></a>2021-08-08T19:34:04.0000000ZBlog post When do we stop using the term “headless” for a CMS?&#8230;and just call it a CMS?&#160; Sorry for this grumpy-old-man-rant, but isn’t it time to retire the term “headless” when we are talking about CMSs? It’s not needed, and it doesn’t really mean anything. If you search for a definition of the term “headless CMS” you might find something like: a CMS where the content &#8230; <a href="https://hacksbyme.net/2021/02/12/when-do-we-stop-using-the-term-headless-for-a-cms/" class="more-link">Continue reading <span class="screen-reader-text">When do we stop using the term “headless” for a CMS?</span></a>2021-02-12T09:14:10.0000000ZBlog post Powershell vs Azure CLI when creating an Episerver environment.It doesn't really matter if you use Powershell or Azure CLI to setup your Azure resources. It's more a matter of taste. Here is a quick comparision anyway :-)2020-03-05T16:46:17.0000000ZBlog post Powershell vs Azure CLI when creating an Episerver environment.It doesn't really matter if you use Powershell or Azure CLI to setup your Azure resources. It's more a matter of taste. Here is a quick comparision anyway :-)2020-03-05T16:46:17.0000000ZBlog post Powershell vs Azure CLI when creating an Episerver environment.It doesn't really matter if you use Powershell or Azure CLI to setup your Azure resources. It's more a matter of taste. Here is a quick comparision anyway :-)2020-03-05T16:46:17.0000000ZBlog post Episerver Picture helper now have option for native lazy loading.The Picture helper in ImageProcessor.Web.Episerver now have an option to render the loading attribute that enables browser-native lazy loading. This makes it even simpler to optimize the loading of images. If you are familiar with the Picture helper you might already know that there are options for rendering the picture element that supports lazy loading. &#8230; <a href="https://hacksbyme.net/2020/02/16/episerver-picture-helper-now-have-option-for-native-lazy-loading/" class="more-link">Continue reading <span class="screen-reader-text">Episerver Picture helper now have option for native lazy loading.</span></a>2020-02-16T14:19:37.0000000ZBlog post Episerver Picture helper now have option for native lazy loading.The Picture helper in ImageProcessor.Web.Episerver now have an option to render the loading attribute that enables browser-native lazy loading. This makes it even simpler to optimize the loading of images. If you are familiar with the Picture helper you might already know that there are options for rendering the picture element that supports lazy loading. &#8230; <a href="https://hacksbyme.net/2020/02/16/episerver-picture-helper-now-have-option-for-native-lazy-loading/" class="more-link">Continue reading <span class="screen-reader-text">Episerver Picture helper now have option for native lazy loading.</span></a>2020-02-16T14:19:37.0000000ZBlog post (Trying to do) Code package deployment to Episerver DXC-SI have spent way to much time trying to set up code package deployment when using TeamCity together with Octopus deploy. Read this to avoid following my path to failure :-). Well, not complete failure, I did learn some new things about both PowerShell and Octopus&#8230; Episerver have created a PowerShell module to simplify code &#8230; <a href="https://hacksbyme.net/2019/12/12/trying-to-do-code-package-deployment-to-episerver-dxc-s/" class="more-link">Continue reading <span class="screen-reader-text">(Trying to do) Code package deployment to Episerver DXC-S</span></a>2019-12-12T15:45:58.0000000ZBlog post (Trying to do) Code package deployment to Episerver DXC-SI have spent way to much time trying to set up code package deployment when using TeamCity together with Octopus deploy. Read this to avoid following my path to failure :-). Well, not complete failure, I did learn some new things about both PowerShell and Octopus&#8230; Update: &#8220;DXC-S&#8221; is now known as &#8221; Episerver DXP&#8221; &#8230; <a href="https://hacksbyme.net/2019/12/12/trying-to-do-code-package-deployment-to-episerver-dxc-s/" class="more-link">Continue reading <span class="screen-reader-text">(Trying to do) Code package deployment to Episerver DXC-S</span></a>2019-12-12T14:45:58.0000000ZBlog post Deployments to DXC-S using API with Octopus DeployEpiserver recently released an API that allows partners and customers to automate deployment to DXC-S environments. If using this API you no longer need the manual process of logging in to the DXC-S portal and starting a deploy. The API also makes it possible to deploy directly to Pre-production or Production environments.  Currently I&#8217;m only &#8230; <a href="https://hacksbyme.net/2019/11/14/deployments-to-dxc-s-using-api-with-octopus-deploy/" class="more-link">Continue reading <span class="screen-reader-text">Deployments to DXC-S using API with Octopus Deploy</span></a>2019-11-14T13:44:31.0000000ZBlog post Deployments to DXC-S using API with Octopus DeployEpiserver recently released an API that allows partners and customers to automate deployment to DXC-S environments. If using this API you no longer need the manual process of logging in to the DXC-S portal and starting a deploy. The API also makes it possible to deploy directly to Pre-production or Production environments.  Update: &#8220;DXC-S&#8221; is &#8230; <a href="https://hacksbyme.net/2019/11/14/deployments-to-dxc-s-using-api-with-octopus-deploy/" class="more-link">Continue reading <span class="screen-reader-text">Deployments to DXC-S using API with Octopus Deploy</span></a>2019-11-14T12:44:31.0000000ZBlog post Let Episerver editors control the output cacheThe &#8220;Content output cache&#8221; is strangely enough a basically undocumented feature of Episerver CMS. It&#8217;s strange, because the content output cache can be a simple way to really speed up your site. I will not go into details about how to set up Content output cache in this article. Instead I&#8217;ll show a way to let &#8230; <a href="https://hacksbyme.net/2019/05/03/let-episerver-editors-control-the-output-cache/" class="more-link">Continue reading <span class="screen-reader-text">Let Episerver editors control the output cache</span></a>2019-05-03T10:08:38.0000000ZBlog post