カスタムフィールドグループ

カスタムフィールドグループとは、単体の項目であるカスタムフィールドを複数まとめて取り扱うことができる機能です。カスタムフィールドの項目を追加したり、削除したりすることができます。
カスタムフィールドグループはカスタムフィールドと同じように画像やテキストのカスタムフィールドを組み合わせて使えます。

カスタムフィールドグループのサンプル

カスタムフィールドグループのサンプル

例）画像とテキスト、テキストエリアを組み合わせたカスタムフィールドグループです。

<table class="js-fieldgroup-sortable">
  <!-- BEGIN bfd_field_unit_group:loop -->
  <tr class="sortable-item">
    <td class="item-handle">
      <div class="acms-form-group"><span class="acms-icon acms-icon-sort2"></span></div>
      <a class="item-delete acms-btn-admin acms-btn-admin-danger block-level" href="#" onclick="return false;">削除</a>
    </td>
    <td>
      <table class="nestTable">
        <tr>
          <th>小画像</th>
          <th>小見出しとURL</th>
          <th>小概要</th>
        </tr>
        <tr>
          <td>
              <!-- BEGIN bfd_field_unit_image:veil -->
              <img src="%{ARCHIVES_DIR}{bfd_field_unit_image@path}" />
              <!-- END bfd_field_unit_image:veil -->
              <br />
              <label><input type="checkbox" name="bfd_field_unit_image@edit[{i}]" value="delete" />削除</label>
              <input type="file" name="bfd_field_unit_image[{i}]" class="acms-form-width-full" />
              <input type="hidden" name="bfd_field_unit_image@width[{i}]" value="200" />
            </td>
            <td>
              <div class="acms-form-group">
                <input type="text" name="bfd_field_unit_lead[{i}]" value="{bfd_field_unit_lead}" class="acms-form-width-full" />
              </div>
              <input type="text" name="bfd_field_unit_url[{i}]" value="{bfd_field_unit_url}" class="acms-form-width-full" />
            </td>
            <td>
              <textarea name="bfd_field_unit_summary[{i}]" class="acms-form-width-full" >{bfd_field_unit_summary}</textarea>
            </td>
        </tr>
      </table>
    </td>
  </tr>
    <!-- END bfd_field_unit_group:loop -->
    <tr class="sortable-item item-template">
      <td class="item-handle">
        <span class="acms-icon acms-icon-sort2"></span>
      </td>
      <td>
        <table>
          <tr>
            <th>小画像</th>
            <th>小見出しとURL</th>
            <th>小概要</th>
          </tr>
          <tr>
            <td>
              <input type="file" name="bfd_field_unit_image[]" class="acms-form-width-full" />
              <input type="hidden" name="bfd_field_unit_image@width[]" value="200" />
            </td>
            <td>
              <div class="acms-form-group">
                <input type="text" name="bfd_field_unit_lead[]" value="" class="acms-form-width-full" />
              </div>
              <input type="text" name="bfd_field_unit_url[]" value="" class="acms-form-width-full" />
            </td>
            <td>
              <textarea name="bfd_field_unit_summary[]" class="acms-form-width-full" ></textarea>
            </td>
          </tr>
        </table>
      <input type="hidden" name="bfd_field_unit_image@old[{i}]" value="{bfd_field_unit_image@path}" />
    </td>
  </tr>
  <tfoot>
      <tr>
      <td colspan="3">
        <input type="button" class="item-insert acms-btn-admin" value="項目を追加する" />
      </td>
    </tr>
  </tfoot>
</table>

<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_lead" />
<input type="hidden" name="field[]" value="bfd_field_unit_lead" />
<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_url" />
<input type="hidden" name="field[]" value="bfd_field_unit_url" />
<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_summary" />
<input type="hidden" name="field[]" value="bfd_field_unit_summary" />

<input type="hidden" name="bfd_field_unit_image:extension" value="image" />
<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_image@path" />
<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_image@x" />
<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_image@y" />
<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_image@edit" />
<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_image@old" />
<input type="hidden" name="field[]" value="bfd_field_unit_image" />
<input type="hidden" name="field[]" value="@bfd_field_unit_group" />

カスタムフィールドグループ内で使用可能なclass属性

カスタムフィールドグループ内では、いくつかの特殊なclass属性の記述があります。これらは、実際にブラウザ上で表示される際に機能します。

js-fieldgroup-sortable

このclass属性が適用されている範囲内で、カスタムフィールドグループが使用できます。 ひな形となり、この要素の内容が追加されます。

item-handle

このclass属性が記述されている要素が、順番を変更する時に「つかむ(ドラッグする)」部分になります。js-fieldgroup-sortable内で使用可能です。

item-delete

このclass属性が記述されている要素で、該当するカスタムフィールドグループが削除できます。js-fieldgroup-sortable内で使用可能です。

item-max

このclass属性が記述されている要素のvalueにある値がカスタムフィールドグループに挿入できる項目の最大数となります。例えば以下のソースコードで、7以上の項目を追加しようとすると警告文が表示されます。js-fieldgroup-sortable内で使用可能です。

<input type="hidden" class="item-max" value="6" />

例で使用したカスタムフィールドの解説

カスタムフィールドの定義

カスタムフィールドのグループ名（@bfd_field_unit_group）とカスタムフィールド変数名（bfd_field_unit_lead）をセットで定義します。

<input type="hidden" name="@カスタムフィールドのグループ名[]" value="カスタムフィールド変数名" />
<input type="hidden" name="field[]" value="カスタムフィールド変数名" />

カスタムフィールドのグループ名（@bfd_field_unit_group）はカスタムフィールドのグループ名を記述しています。

<input type="hidden" name="field[]" value="@カスタムフィールドのグループ名" />

テンプレートに表示する

エントリーカスタムフィールドで作成した場合は、Entry系モジュールのentry:loop内にカスタムフィールドグループを記述してください。

<!-- BEGIN bfd_field_unit_group:loop -->
<div style="width:200px; float:left; margin-right:20px;">
<!-- BEGIN bfd_field_unit_image:veil -->
<img src="%{ARCHIVES_DIR}{bfd_field_unit_image@path}" alt="" width="200">
<!-- END bfd_field_unit_image:veil -->
<h3><a href="%{HTTP_ROOT}{bfd_field_unit_url}">{bfd_field_unit_lead}</a></h3>
<p>{bfd_field_unit_summary}</p>
</div>
<!-- END bfd_field_unit_group:loop -->

上記のような bfd_field_unit_group:loop のブロック中に変数を書くことで複数件のデータを表示させるのがカスタムフィールドグループの利用としては一般的ですが、ループさせずに 2番目だけ 表示させたいという場合には、{bfd_field_unit_lead[1]} のような記述でも「小見出し2です」を表示させることが可能です。（配列の添字は 0 から始まります）