file - 使用 Umbracos 媒体节点“类型”字段创建下载图标

Question

我有一个名为“下载”的数据类型。组成它的属性之一是媒体选择器，用于关联媒体库中的文件。我需要使用 razor 列出这些“下载”，每个文件都需要一个图标来标识它是什么文件格式。

现在我可以创建“下载”列表，甚至可以创建文件链接，但我想知道 Umbraco 是否有一个属性可以让我显示正确的文件格式图标。我注意到在查看媒体项目时，每个项目都有“类型”属性。如果我能得到那个输出，我可以为每种可能性创建一个 css 类。但是我如何到达那个属性？

Answer 1

媒体类型就像文档类型一样。它们的属性在设置部分进行配置。如果您查看“文件”或“图像”媒体类型，您可以看到它们用于属性的别名。在这种情况下，“类型”属性的别名为umbracoExtension。如何使用 Razor 访问属性的示例如下：

var file = Library.MediaById(1066);
@file.umbracoExtension

根据返回的扩展名，您可以通过执行以下操作将类添加到下载文件的链接：

int folderId = 1000;
var files = Library.MediaById(folderId);

<ul>
@foreach (var file in files)
{
    string attr = "";

    if (file.umbracoExtension != "")
    {
        attr = " class=\"" + file.umbracoExtension + "\"";
    }

    <li@attr><a href="@file.umbracoFile">@file.Name</a></li>
}
</ul>

然后您可以通过 CSS 添加适当的图像图标。

Answer 2

dludlow 的回答在技术上是您所要求的，但我想发布一个替代建议，即您可以在纯 CSS3 中做您所要求的事情，而无需在 Razor 中做任何不同的事情。

这只是我抓取的部分示例，以说明我的意思：

#sample-div a {
 display:inline-block;
 padding-left:20px;
 line-height:18px;
}
#sample-div a[href$='.jpg'],
#sample-div a[href$='.jpeg'],
#sample-div a[href$='.gif'],
#sample-div a[href$='.psd'] {
 background:transparent url(/images/icon_image.png) center left no-repeat;
}
#sample-div a[href$='.csv'],
#sample-div a[href$='.xls'],
#sample-div a[href$='.xlsx'],
#sample-div a[href$='.xlw'] {
 background:transparent url(/images/icon_excel.png) center left no-repeat;
}
#sample-div a[href$='.pdf'] {
 background:transparent url(/images/icon_acrobat.png) center left no-repeat;
}
#sample-div a[href$='.ppt'],
#sample-div a[href$='.pps'] {
 background:transparent url(/images/icon_powerpoint.png) center left no-repeat;
}
#sample-div a[href$='.doc'],
#sample-div a[href$='.docx'],
#sample-div a[href$='.rtf'],
#sample-div a[href$='.txt'],
#sample-div a[href$='.wps'] {
 background:transparent url(/images/icon_word.png) center left no-repeat;
}

当然，还有其他方法可以改善这一点，例如添加更多扩展，使用 spritemap 而不是单个图像（我建议），将background速记规则简化为 justbackground-image等......

祝你好运！祝你好运！