Umbraco 媒体类型中的多个图像 SVG 文件答案

【问题标题】：Multiple Image SVG file in Umbraco Media TypeUmbraco 媒体类型中的多个图像 SVG 文件
【发布时间】：2016-01-02 01:56:45
【问题描述】：

我非常擅长 Razor/MVC，但对 Umbraco 很陌生。我有一个源设计，其中包含一个 Jpeg 和一个包含在 SVG 中的灰度 PNG，这样我就可以在比平时少得多的内存中拥有透明的背景图像。

只是想知道如何在 Umbraco 中设置一个媒体类型，将 SVG 文件和支持位图放在同一个文件夹中。

我尝试创建具有 3 个上传槽的新媒体类型，并将新类型创建为文件夹类型，但是当我查看文件夹 /media/1071 时，它只包含 SVG。

有没有办法让 Umbraco 将所有 3 个文件上传到同一个文件夹，以便 SVG 文件可以找到支持文件？

谢谢，

标记

【问题讨论】：

标签： svg png jpeg umbraco opacitymask

【解决方案1】：

我不确定这是否是 Umbraco 中的正确方法，但我确实设法让我的透明 JPeg 类型的东西正常工作。

我没有创建新的媒体类型，而是创建了一个新的文档类型。我还为文档类型制作了一个默认模板。

通过将两个媒体选择器属性添加到文档类型，并在模板中将 Content-Type 设置为“image/svg+xml”，我可以从模板动态生成适当的 SVG 文件。

这是适用于我的新 DocType 的模板。

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = null;

    UmbracoContext.HttpContext.Response.ContentType = "image/svg+xml";  

    var colourLayer = Umbraco.Media(Umbraco.Field("colourLayer").ToString());
    var maskLayer = Umbraco.Media(Umbraco.Field("maskLayer").ToString());
}<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 @colourLayer.umbracoWidth @colourLayer.umbracoHeight" enable-background="new 0 0 @colourLayer.umbracoWidth @colourLayer.umbracoHeight" xml:space="preserve">
  <image overflow="visible" width="@colourLayer.umbracoWidth" height="@colourLayer.umbracoHeight" mask="url(#imgmask)" xlink:href="@colourLayer.umbracoFile" />
  <mask id="imgmask">
    <image overflow="visible" width="@colourLayer.umbracoWidth" height="@colourLayer.umbracoHeight" xlink:href="@maskLayer.umbracoFile" />
  </mask>
</svg>

如果这不是 Umbraco 的工作方式，请告诉我。我更喜欢使用系统而不是反对它。

【讨论】：