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

Movable Type 7 において、MTAppjQueryを使ってアセットのアップロード時にフォルダを指定する部分をドロップダウンリストにする例をご紹介します。

この記事は弊社 bit part 合同会社が提供している Movable Type プラグイン「MTAppjQuery」の利用を前提としております。MTAppjQuery って何?という方は弊社の「MTAppjQuery」の製品ページをご覧ください。

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>
Published 2020-06-09
Updated 2020-06-09

「MTAppjQuery」カテゴリの記事一覧