• Home
  • Movable Type
  • MTAppjQuery
  • MTAppjQueryを使ってアセットのアップロード時にフォルダを指定する部分をドロップダウンリストにする(MT7版)

MTAppjQueryを使ってアセットのアップロード時にフォルダを指定する部分をドロップダウンリストにする(MT7版)

Movable Type 7 のアセットのアップロード画面(ダイアログや個別ページ)において、アップロード先のフォルダを指定する部分のテキストボックスをドロップダウンリストに変更する方法をご紹介します。

まず、「ウェブページ > フォルダ」でフォルダを作成しておきます。

Folder 20200609164355 min

そして、インデックステンプレートのuser.js に下記のコードを追加してください。

(function($){
  'use strict';

  /*<mt:Ignore>==============================

  アセットのアップロード時にフォルダ指定する部分をドロップダウンリストに変更する
  
  ==============================</mt:Ignore>*/
  /* ---
  <mt:SetVarBlock name="selectFolder">
    <select id="extra_path" name="extra_path" class="custom-select form-control">
      <option selected>選択してください</option>
      <mt:Folders show_empty="1">
      <option value="<mt:FolderBasename>"><mt:FolderLabel /></option>
      </mt:Folders>
    </select>
  </mt:SetVarBlock>
  ---*/
  const $extraPath = $('#extra_path');
  if ($extraPath.length) {
    const value = $extraPath.val();
    const html = '<mt:Var name="selectFolder" compress="3" encode_js="1" />';
    $extraPath.replaceWith(html);
    if (value) {
      $('#extra_path').val(value);
    }
  }

})(jQuery);

今回は「フォルダ」ベースにしましたが、ドロップダウンリストを「カテゴリ」ベースにしたい場合は mt:Folders タグに関連する部分を下記のようにカテゴリ関連のタグに書き換えてください。

<mt:SetVarBlock name="selectFolder">
  <select id="extra_path" name="extra_path" class="custom-select form-control">
    <option selected>選択してください</option>
    <mt:Categories show_empty="1">
    <option value="<mt:CategoryBasename>"><mt:CategoryLabel /></option>
    </mt:Categories>
  </select>
</mt:SetVarBlock>

MTAppjQuery について

Movable Type の管理画面をフロントエンドの知識だけで簡単にカスタマイズすることができます。

クライアントの満足度を高めるためにぜひお使いください。

MTAppjQuery の詳細を見る

MTAppjQuery