The Kentico Media Selector allows content editors to preview selected media files and manage them in order to provide a superior user experience.
When managing images, a content editor should be able to verify that the selected image is correct for its proposed use before publishing to the website.
As useful a tool as it is, straight out of the box Kentico does not account for the original proportions of an image, which might lead to an inaccurate and skewed preview of the image. Something that should be a thumbnail-like experience might instead be an image stretched disproportionately across the user’s interface. If a website does not utilize web optimized graphics the likeliness of this scenario is an unfortunate probability.
In this blog post I am going to explain an easy way to implement a fix for this undesirable characteristic.
First of all we need to understand how the Pages application renders the Form tab. It’s a construction of nested and dynamically injected ASP.NET MasterPages. The master page is responsible for displaying (in this case) the Form tab as the SimplePage master page. This file is located at ~/CMS/CMSMasterPages/UI/SimplePage.master.
In order to implement the fix we need to write a small CSS script, preferably in a separate stylesheet that can be reused for other UI modifications. Let’s call this file kentico.ui.custom.css. kentico.ui.custom.css
.media-selector-image > img {
max-width: 600px;
}
I have chosen a max width of 600px, but feel free to adjust to your needs. Pick a preferred location within the solution (or register the stylesheet through the CSS stylesheets application) and save the file.
The last step is including the stylesheet in the master page, like shown below.
SimplePage.master
<%@ Master Language="C#" AutoEventWireup="true" Inherits="CMSMasterPages_UI_SimplePage" Codebehind="SimplePage.master.cs" %>
<%@ Register Src="~/CMSModules/Objects/Controls/Locking/ObjectEditPanel.ascx" TagName="ObjectEditPanel" TagPrefix="cms" %>
<%@ Register Src="~/CMSAdminControls/UI/PageElements/PageTitle.ascx" TagName="PageTitle" TagPrefix="cms" %>
<%@ Register Src="~/CMSAdminControls/UI/Development/DevTools.ascx" TagName="DevTools" TagPrefix="cms" %>
<!DOCTYPE html>
<html>
<head runat="server" enableviewstate="false">
<title>SimpleMasterPage</title>
<asp:Literal ID="ltlHeadElements" runat="server" Visible="false"></asp:Literal>
<link type="text/css" href="/static/css/kentico.ui.custom.min.css" rel="stylesheet" />
</head>
<body runat="server" id="bodyElem">
<form id="form1" runat="server">
...
</form>
</body>
</html>
Back in the Pages application we might need to flush the browser cache before we can see the final result! Pressing Ctrl+F5 should do it.
Hope this helps!
Note:
Since we modified the MasterPage file directly, there is a chance that our modifications will be overridden by a future hotfix or upgrade. If that happens, repeat the step where we include the stylesheet in the master page.
