Loading CSS, JS files from media library in Sitecore

Here we upload the CSS files to Sitecore media library and then read those CSS files in the code. This approach is suggested only when you want to allow a Sitecore user to edit CSS classes. The same applies for javascript files too.

One advantage of storing css files in sitecore media library is that we need not to hard code the CSS file path in html files but we can directly refer the CSS file in media library through sitecore content editor. Here we shall see an example where we upload a CSS file into Sitecore media library and use it in our view files (.cshtml razor file).

Version: Sitecore 7.2, MVC 5.1

###Adding media type entry for css file: Find the CSS mediatype line (if not present, add a new entry) and add the line <forceDownload>false</forceDownload> to configure sitecore handle CSS file uploads.

<mediaType extensions="css">
    <mimeType>text/css</mimeType>
    <forceDownload>false</forceDownload>
</mediaType>

###Uploading a CSS file to media library:

1. Create .css file.
2. Go to media library and upload this CSS file to media library

###Create a 'file' field in Sitecore item:

In this example, I am using the CSS file in a layout instead of an individual page. Consider ‘MySite/Home’ is the Home page in a sitecore site which uses ‘Home’ content item.

The home content item uses some sitecore layout, say ‘OneColLayout’. This Layout will use some template say ‘MyTemplate’.

Now go to MyTemplate template. Add a new field under Builder tab, with below values.

Name: cssFile

Type: File

Save and publish.

Now go to OneColLayout item. The new data field ‘cssFile’ which we have added above will be appearing here. Click on ‘Open file’ option then browse through the media library and select the .css file which we have uploaded. Save and publish.

###Reading the CSS from media library in the view file:

We have uploaded the CSS file to media library and then linked that CSS file to the layout file. So the next thing is we should read the ‘cssFile’ field of the layout item and retrieve the media url of the selected file. Using this URL of the CSS file we add a reference in the .cshtml file. To do that use the below code.

var rc = Sitecore.Mvc.Presentation.RenderingContext.CurrentOrNull;
string ltlDynamicCss;
Sitecore.Data.Items.Item mediaItem;
if (rc != null)
{
     var parms = rc.Rendering.Parameters;
     var item = Sitecore.Context.Database.GetItem(rc.Rendering.LayoutId.ToString());
     Sitecore.Data.Fields.FileField cssFileField = item.Fields["cssFile"];
     mediaItem = cssFileField.MediaItem;
     if (mediaItem != null)
     {
         string cssPath = Sitecore.StringUtil.EnsurePrefix('/', 
            Sitecore.Resources.Media.MediaManager.GetMediaUrl(mediaItem));
         ltlDynamicCss = string.Format("<link href=\"{0}\" rel=\"stylesheet\" type=\"text/css\" />", 
            cssPath);
         @Html.Raw(ltlDynamicCss ); //here the link to CSS file is placed
     }
}