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

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

この記事は弊社 bit part 合同会社が提供している 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

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

Clean Shot 2021 07 13 13 52 20

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

Clean Shot 2021 07 13 13 54 49
Published 2021-07-13
Updated 2021-07-13

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