• Home
  • Movable Type
  • MTAppjQuery
  • MTAppjQuery でフィールドごとにアイテムのアップロード先ディレクトリを変更する

MTAppjQuery でフィールドごとにアイテムのアップロード先ディレクトリを変更する

今日は MTAppjQuery を利用したカスタマイズとして、 あるコンテンツタイプに設定した複数のアセット系フィールドについて、フィールドごとに別のアップロード先ディレクトリを自動でセットする方法をご紹介します。

コンテンツフィールドを作成

例として下記のような3つのコンテンツフィールドを作成します。

  • 画像
  • アセット
  • ビデオ
Clean Shot 2021 07 13 12 39 15

user.js でカスタマイズ

下記のコードを user.js に追記します。コードの内容はコード中にコメントとして書き込みました。

(function($){
  'use strict';

  // リンクボタンにパラメーを追加するための jQuery プラグイン
  $.fn.MTAppAddParamsToLink = function(options){
    const op = $.extend({
      params: ''
    }, options);
    if (op.params === '') {
      return;
    }
    return this.each(function(){
      let href = $(this).attr('href');
      if (!href) {
        return;
      }
      href += ('&' + op.params);
      $(this).attr('href', href);
    });
  };
  // END リンクボタンにパラメーを追加するための jQuery プラグイン

  // コンテンツデータ編集画面のときで、かつコンテンツタイプIDが 4 のときに以下を実行する
  if (mtappVars.screen_id === 'edit-content-type-data' && mtappVars.content_type_id === 4) {

    // 画像フィールド
    $('#contentField19 a.mt-open-dialog').MTAppAddParamsToLink({
      params: 'extra_path=foo'
    });

    // アセットフィールド
    $('#contentField20 a.mt-open-dialog').MTAppAddParamsToLink({
      params: 'extra_path=bar'
    });

    // ビデオフィールド
    $('#contentField21 a.mt-open-dialog').MTAppAddParamsToLink({
      params: 'extra_path=baz'
    });
  }
  // END コンテンツデータ編集画面のときで、かつコンテンツタイプIDが 4 のときに以下を実行する

  // アセットのダイアログ内で下記のコードを実行する
  if (mtappVars.params.dialog) {
    // 上段のコードでセットした extra_path を取得
    const extraPath = mtappVars.params.extra_path || '';
    if (extraPath) {

      $('#extra_path').val(extraPath);
    }
  }
  // END アセットのダイアログ内で下記のコードを実行する

})(jQuery);

これで下図のようにフィールドごとに別のアップロード先ディレクトリがセットされました。

Clean Shot 2021 07 13 13 46 15
Clean Shot 2021 07 13 13 46 35
Clean Shot 2021 07 13 13 46 46

コード中段の #contentField19 部分はブラウザの開発者ツールで確認してください。

Clean Shot 2021 07 13 13 52 20

または、 #contentField19 の数字の部分をテンプレート編集画面の右サイドバーで確認して差し替えてください。

Clean Shot 2021 07 13 13 54 49

MTAppjQuery について

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

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

MTAppjQuery の詳細を見る

MTAppjQuery