CODEWITHSUNDEEP
episerver
southtexasmike
southtexasmike

Reputation: 79

User can't select SVG in Episerver CMS (other image types are supported)

I am unable to get SVG images to show up in the "Select Image" box when a CMS user clicks the ellipse button for an image property on a page or block in Episerver. (Episerver 10.10.5.0)

The SVG images upload just fine, and they appear in the Assets Pane with the other images that have been uploaded. But when the user tries to select an image, only the other image types that are in the same folder appear.

I tried adding support via the model (Models\Media\VectorImageFile.cs) as suggested in the blog post here. When that didn't work, I removed VectorImageFile.cs and tried adding "svg" to the list of image extensions in Models\Media\ImageFile.cs:

[ContentType(DisplayName = "ImageFile", GUID = "88284fbf-9d34-469b-a259-716f8aac5529", Description = "")]
[MediaDescriptor(ExtensionString = "jpg,jpeg,jpe,ico,gif,bmp,png,svg")]

Both of those attempts compiled without issue, but did not make SVG images available to the user when selecting an image file for an image property of a page or block.

Hope I've provided enough information. I'm an Episerver noob (and a C# noob, tbh). Any guidance will be gratefully appreciated!

Upvotes: 1

Views: 812

Answers (1)

southtexasmike
southtexasmike

Reputation: 79

OK. Here are the answers I found to my question.

  • Put this code in a separate file, and make sure it's properly referenced/included in the project.
  • Once it's there, you'll have a defined "VectorImageFile" type, but 1) users won't be able to upload SVG files anymore and 2) users still won't be able to select SVG images from a block editor with the UIHint.Image property set.
  • These guys documented issue/annoyance #1 above. Change the inheritance of "VectorImageFile" from ImageData to MediaData. Now users can upload SVG images again. But they still can't select them.
  • So, remove UIHint.Image from the property, allowing users to select whatever media or content type they want. Then, grab the ContentURL from the ContentReference, assign it to a string variable, and call that string variable as the src of an img tag in the View.

What. A. Pain.

Upvotes: 1

Related Questions