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

サンプルを使うと、画像のようなレイアウトにできます

入力フォーム、テキストエリア、画像の項目を含んだカスタムフィールドグループのサンプルです。
カスタムフィールドグループを利用したい方はぜひ参考にしてください。

<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 />
      (&nbsp;<a class="item-delete" href="#" onclick="return false;">×</a>&nbsp;)
    </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 -->