Question

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

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

Answer 1

媒体类型就像文档类型一样。它们的属性在“设置”部分中配置。如果您查看“文件”或“图像”媒体类型，您可以看到它们用于属性的别名。在这种情况下，“Type”属性的别名为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;
}

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

祝你好运！祝你好运！

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

2 个答案: