Moving the Media Cache folder in Sitecore

8 July 2020

One of the cache’s that Sitecore has is the Media Cache. Whenever you use an image from Sitecore’s media library, Sitecore will retrieve the image from the database, scale it to the size you requested and then store it to disk in the media cache folder. On any subsequent request the image will now be retrieved from the media cache rather than the database.

By default each content management and content delivery server will locate the media cache in /App_Data/MediaCache

This is a relatively logical place to store a cache for images that wont cause you many issues. However, if you have automated deployments setup then you are likely wiping the whole of your website folder each time you do a deploy to ensure that your deploy remains the same on all environments. As the App_Data folder is in the website, your Media Cache will be deleted too.

Depending on your site then deleting the media cache potentially isn’t much of an issue. After all it’s a cache so all that will happen is the images will get cached the next time they are requested. But depending how many images get retrieved at the same time this could slow down performance, particularly if your content editors decided to put every image they ever uploaded into the same folder. Opening the that folder in the admin will create a nice amount of load on your server, particularly if you also have some extra image optimization logic installed.

Like most things in Sitecore though, you can change the location through a config setting.

In Sitecore.config you will find a property called Media.CacheFolder. Change this to somewhere outside of your website folder and Sitecore will now start storing the Media Cache in this location and it will be safe your all your deploys.

1<!--  MEDIA - CACHE FOLDER
2            The folder under which media files are cached by the system.
3            Default value: /App_Data/MediaCache
4      -->
5    <setting name="Media.CacheFolder" value="/App_Data/MediaCache"/>

Force clients to refresh JS/CSS files

6 March 2018

It's a common problem with an easy solution. You make some changes to a JavaScript of CSS file, but your users still report an issue due to the old version being cached.

You could wait for the browsers cache to expire, but that isn't a great solution. Worse if they have the old version of one file and the new version of another, there could be compatibility issues.

The solution is simple, just add a querystring value so that it looks like a different path and the browser downloads the new version.

Manually updating that path is a bit annoying though so we use modified time from the actual file to add the number of ticks to the querystring.

UrlHelperExtensions.cs

1using Utilities;
2using UrlHelper = System.Web.Mvc.UrlHelper;
3
4namespace Web.Mvc.Utils
5{
6    public static class UrlHelperExtensions
7    {
8        public static string FingerprintedContent(this UrlHelper helper, string contentPath)
9        {
10            return FileUtils.Fingerprint(helper.Content(contentPath));
11        }
12    }
13}

FileUtils.cs

1using System;
2using System.IO;
3using System.Web;
4using System.Web.Caching;
5using System.Web.Hosting;
6
7namespace Utilities
8{
9	public class FileUtils
10    {
11        public static string Fingerprint(string contentPath)
12        {
13            if (HttpRuntime.Cache[contentPath] == null)
14            {
15                string filePath = HostingEnvironment.MapPath(contentPath);
16
17                DateTime date = File.GetLastWriteTime(filePath);
18
19                string result = (contentPath += "?v=" + date.Ticks).TrimEnd('0');
20                HttpRuntime.Cache.Insert(contentPath, result, new CacheDependency(filePath));
21            }
22
23            return HttpRuntime.Cache[contentPath] as string;
24        }
25    }
26}