複雑なカスタムフィールドグループのサンプル
サンプルを使うと、画像のようなレイアウトにできます
入力フォーム、テキストエリア、画像の項目を含んだカスタムフィールドグループのサンプルです。
カスタムフィールドグループを利用したい方はぜひ参考にしてください。
<table class="js-fieldgroup-sortable">
<!-- BEGIN bfd_field_unit_group:loop -->
<tr class="sortable-item">
<td class="item-handle">
<img width="17" height="17" class="arrowHandle" src="/images/admin_arrow_vertical.gif" />
<br />
( <a class="item-delete" 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}]" />
<input type="hidden" name="bfd_field_unit_image@width[{i}]" value="200" />
</td>
<td>
<input type="text" name="bfd_field_unit_lead[{i}]" value="{bfd_field_unit_lead}" size="30" />
<br /><br />
%{HTTP_ROOT}
<br /><input type="text" name="bfd_field_unit_url[{i}]" value="{bfd_field_unit_url}" size="15" />
</td>
<td>
<textarea name="bfd_field_unit_summary[{i}]" cols="40" rows="5" class="formSizeL">{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"><img width="17" height="17" class="arrowHandle" src="/images/admin_arrow_vertical.gif" /></td>
<td>
<table class="nestTable">
<tr>
<th>小画像</th>
<th>小見出しとURL</th>
<th>小概要</th>
</tr>
<tr>
<td>
<input type="file" name="bfd_field_unit_image[]" />
<input type="hidden" name="bfd_field_unit_image@width[]" value="200" />
</td>
<td>
<input type="text" name="bfd_field_unit_lead[]" value="" size="30" />
<br /><br />
%{HTTP_ROOT}
<br /><input type="text" name="bfd_field_unit_url[]" value="" size="15" />
</td>
<td>
<textarea name="bfd_field_unit_summary[]" cols="40" rows="5" class="formSizeL"></textarea>
</td>
</tr>
</table>
</td>
</tr>
<tfoot>
<tr>
<td colspan="3"><input type="button" class="item-insert btnAddition" 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" />
管理画面での表示
出力側のHTMLのサンプル
出力するHTMLのサンプルです。
<h2>複雑なカスタムフィールドのサンプル</h2>
<!-- BEGIN_MODULE Blog_Field -->
<!-- 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 -->
<!-- END_MODULE Blog_Field -->