How To Change The Image and Logo on the Log-in Page in Episerver 9

With the release of Episerver 7 comes a brand new log-in screen, as seen below.

episerver_9_login_screen

With the out-of-the-box new log-in screen, we have 3 background images and the ‘Digital Experience Cloud’ logo.  A nice touch when developing a project in Episerver for a client, is to customise this screen for their branding.  Luckily customising the log-in screen is very simple.  In today’s tutorial, I will guide you through the process

How To Customise The Background Image

The first thing I’m going to cover is how to switch the background images.  In order to change the screens, we will need to create an initialization modules.  In the initialization modules, we will use a VirtualPathMappedProvider to intercept the login screens URLs and customise them to a location of our choosing.  In Episerver, a lot of CMS based config parameters are available in a NameValueCollection which the VirtualPathMappedProvider gives us access to.

In the log-in screen the Url to the log-in pages images are:

  • /Util/images/login/Pictures_Page_1-min.jpg
  • /Util/images/login/Pictures_Page_2-min.jpg
  • /Util/images/login/Pictures_Page_3-min.jpg

So in order to override these Urls we need to inject/overide the default ones with custom ones:

[InitializableModule]
[ModuleDependency(typeof(EPiServer.Web.InitializationModule))]
public class ChaningLoginImagesModule : IInitializableModule
{
public void Initialize(InitializationEngine context)
{
var host = ServiceLocator.Current.GetInstance<IHostingEnvironment>();
if (host == null)
return;
var virtualPathMappedProvider = new VirtualPathMappedProvider("LoginImage", new NameValueCollection());
virtualPathMappedProvider.PathMappings.Add("/Util/images/login/Pictures_Page_1-min.jpg", "/Images/bg_services.jpg");
virtualPathMappedProvider.PathMappings.Add("/Util/images/login/Pictures_Page_2-min.jpg", "/Images/bg_services.jpg");
virtualPathMappedProvider.PathMappings.Add("/Util/images/login/Pictures_Page_3-min.jpg", "/Images/bg_services.jpg");
host.RegisterVirtualPathProvider(virtualPathMappedProvider);
}
public void Uninitialize(InitializationEngine context)
{
}
public void Preload(string[] parameters)
{
}
}

In this code, we use the IHostingEnvironment which is an Episerver API that mocks of the System.Web.Hosting.HostingEnvironment class.  This will be used to register our new Urls.  We create a new VirtualPathMappedProvider giving it a unique name and an empty NameValueCollection.  We then map virtual paths from the default Episerver Url structure to a new structure.  The new structure points to images within my webroot.

When we load the site you will now see the new images:

episerver_9_custom_login_screen

How To Customize The Logo

Now we have updated the background images, it’s time to change the logo.  In the login screen, this is the bit that says ‘Digital Experience Cloud’.  First thing to note is you will need an image in SVG format in order for this to work.  Using the code above all you need to do is intercept the logo url, like so:

virtualPathMappedProvider.PathMappings.Add("/Util/images/login/DXC_long.svg", "/Images/logo.svg");

Conclusion

That wraps up everything you need to know in order to change the Episerver 9 log-in screen.  Using an InitializableModule, a IHostingEnvironment and a VirtualPathMappedProvider. We can change the Episerver Url’s to point to a custom route.

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts

7 replies
  1. Vincent
    Vincent says:

    Nice one!

    By using this technique, I can remove the background image now 🙂 When I RDP to the server, it’s too slow to open episerver login page.

    Reply
  2. Ted Nyberg
    Ted Nyberg says:

    Good one! I did it the same way, but also registered an HTTP module to replace the color codes in login.css. That way I get a top bar and button color matching the custom background, while still being “future-proof” if Epi changes the login page.

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *