0

「ダウンロード」と呼ばれるデータ型があります。それを構成するプロパティの中には、メディア ライブラリからファイルを関連付けるためのメディア ピッカーがあります。かみそりを使用してこれらの「ダウンロード」をリストする必要があり、各ファイルには、ファイル形式を識別するためのアイコンが必要です。

これで、「ダウンロード」のリストを作成したり、ファイルへのリンクを作成したりできますが、Umbraco に正しいファイル形式のアイコンを表示できるプロパティがあるかどうか疑問に思っていました。メディア アイテムを表示すると、それぞれに「type」プロパティがあることに気付きました。その出力を得ることができれば、可能性ごとに css クラスを作成できます。しかし、どうすればその物件にたどり着けるでしょうか？

4

2 に答える 2

0

dludlowの答えは技術的にはあなたが求めていたものですが、Razorで何か違うことをする必要なく、純粋なCSS3で求めていることを実行できるという別の提案を投稿したかった.

これは、私が何を意味するかを示すために私がつかんだもののほんの一部のサンプルです:

#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省略形のルールを単にbackground-image.

頑張ってください！頑張ってください！

于 2012-08-06T19:31:34.127 に答える
0

メディア タイプはドキュメント タイプと同じです。それらのプロパティは、[設定] セクションで構成されます。「ファイル」または「画像」のメディア タイプを見ると、プロパティにどのエイリアスが使用されているかがわかります。この場合、「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 を介して適切な画像アイコンを追加できます。

于 2012-08-06T18:09:10.783 に答える