Media file icons in assets library

When uploading media to the assets library, most file types gets a suitable icon that describes the document, while some will get no icon or an unknown icon. I did a little bit of investigation and found out some hacks to get these icons a little bit more editor-friendly.

This is what our asset library looked like. Svg files were missing thumbnails, zip folders looked like a text file. Json and css (etc.) file icons were unknown:

First thing I started on was the .svg format, it did not get a thumbnail when it was treated as an ImageFile. This is what the model looked like:

[MediaDescriptor(ExtensionString = "jpg,jpeg,jpe,ico,gif,bmp,png,svg,webp")]
public class ImageFile : ImageData;

So what I did was to create a separate class for the svg formats and set the thumbnail property to the BinaryData:

[MediaDescriptor(ExtensionString = "svg")]
public class SvgFile : ImageData
{
   public override Blob Thumbnail => BinaryData;
}

And now the thumbnail for svg files will show:

I continued with the other documents that were treated like generic files, where some got a matching icon, while some did get this unknown one with an exclamation mark. 
What I found in the built-in epi.css was that there are only icons for these formats:

.epi-iconObjectVideo, .epi-iconObjectUnknown, .epi-iconObjectCSV, .epi-iconObjectPDF, .epi-iconObjectDOC, .epi-iconObjectDOCX, .epi-iconObjectXLS, .epi-iconObjectXLSX, .epi-iconObjectZIP, .epi-iconObjectRAR, .epi-iconObject7Z

I did some further research and found this old style guide https://frontendstyleguide.azurewebsites.net/#icons (scroll down to ‘Object Icons’). When trying out these classes, some icons work, while some look a little bit different than their example, just try them out yourself to see what they will look like. For example, I tried out the ‘.epi-iconObjectPage’ for js and css files, but that looked bad with no margins, so I reverted that back and keep the unknown icon (we don’t really use these file types so they are not so important to us). We do however use a lot of .json files, so I wanted to get a nicer icon for that format. 

What we need to do to add a class for an asset type, is to add a UIDescriptor. Below is an example for the .json type where I add the ‘epi-iconObjectZIP’ class. I know it looks strange using the zip icon class but that icon actually looks like a file to me. 

[MediaDescriptor(ExtensionString = "json")]
public class JsonFile : MediaData;

[UIDescriptorRegistration]
public class JsonFileUIDescriptor: UIDescriptor<JsonFile> {
// Using epi-iconObjectZIP cause it looks like a file
   public JsonFileUIDescriptor(): base("epi-iconObjectZIP") { }
}

Then I saw that zip files got an icon, but I didn't think it felt appropriate since they are usually symbolized as a folder, so I added a new class to that one as well:

[MediaDescriptor(ExtensionString = "zip,7z,tar,gz,rar,tar.gz")]
public class ZipFile : MediaData;
    
[UIDescriptorRegistration]
public class ZipFileUIDescriptor: UIDescriptor<ZipFile> {
// Using iconObjectFolder cause it’s more descriptive than the epi zip icon
    public ZipFileUIDescriptor(): base("epi-iconObjectFolder") { }
}

And this is the result:

Hope you found this blog post interesting — I’d love to hear your thoughts, so drop a comment below with your ideas or suggestions!