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

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


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

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


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

<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="hidden" name="bfd_field_unit_image@old[{i}]" value="{bfd_field_unit_image@path}" />
		<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>
</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の記述がある要素が、順番を変更する時に「つかむ(ドラッグする)」部分になります。

item-delete

このclassの記述がある要素で、該当するカスタムフィールドグループが削除できます。

item-max

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

<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 -->