MovableType

アップロードされたファイルの形式ごとに専用アイコンを表示する方法

はじめに

アイテムでアップロードされたファイルをニュース記事のリンク先に設定する場合、リンク先が分かる様に「アイコン」を表示することが多いと思います。

アップロードされた拡張子を判別し、アイコンを表示できるサンプルを作成しました。

サンプルテンプレート

コンテンツデータ「ニュースリリース」にある、コンテンツタイプ「アセット」を出力します。

アップロードされた拡張子を判別し、「class」にアイコン用のクラス名を設定します。

<mt:Contents content_type="ニュースリリース">
    <mt:if name="__first__"><ul></mt:if>
        <mt:Setvar name="undef(class)">
        <mt:SetVar name="class" value="item" append="1">
        <mt:ContentField content_field="ファイルアップロード">
            <mt:if tag="AssetURL" like="pdf$">
                <mt:ignore>PDF</mt:ignore>
                <mt:SetVar name="class" value=" icon-pdf" append="1">
            <mt:elseif tag="AssetURL" like="(xls|xlsx)$">
                <mt:ignore>MS Excel</mt:ignore>
                <mt:SetVar name="class" value=" icon-xlsx" append="1">
            <mt:elseif tag="AssetURL" like="(doc|docx)$">
                <mt:ignore>MS Word</mt:ignore>
                <mt:SetVar name="class" value=" icon-docx" append="1">
            <mt:elseif tag="AssetURL" like="(ppt|pptx)$">
                <mt:ignore>MS PowerPoint</mt:ignore>
                <mt:SetVar name="class" value=" icon-pptx" append="1">
            </mt:if>
            <li><a href="<mt:AssetURL>" class="<mt:var name="class">" target="_blank"><mt:ContentLabel></a></li>
        </mt:ContentField>
    <mt:if name="__last__"></ul></mt:if>
</mt:Contents>