カスタムフィールドグループ
カスタムフィールドグループとは、単体の項目であるカスタムフィールドを複数まとめて取り扱うことができる機能です。カスタムフィールドの項目を追加したり、削除したりすることができます。
カスタムフィールドグループはカスタムフィールドと同じように画像やテキストのカスタムフィールドを組み合わせて使えます。
カスタムフィールドグループのサンプル
例）画像とテキスト、テキストエリアを組み合わせたカスタムフィールドグループです。
<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 から始まります）
