Movable Type: FreeLayoutCustomFieldの登録と出力方法

 

ウェブページのFreeLayoutCustomFieldでリピーターで登録したものを出力する方法。

 

<mt:If tag="PageData_voice_fiels">
  <mt:PageData_voice_fielsBlock>
  <mt:SetVarBlock name="left_img"><mt:FLCFAsset field="img"><mt:AssetURL ></mt:FLCFAsset></mt:SetVarBlock>
  <div class="left_img_block">
    <div class="left_box">
      <img src="<mt:If name="left_img" eq="">
        ../images/common/dummy.jpg
      <mt:Else>
        <mt:FLCFAsset field="_myitem_content"><mt:AssetURL ></mt:FLCFAsset>
      </mt:If>" alt="">
    </div>
    <div class="right_box">
      <p class="left_border"><span class="en_ttl"><$mt:FLCFValue name="title"$></span></p>
      <p class="txt"><$mt:FLCFValue name="txt"$></p>
    </div>
  </div>
  </mt:PageData_voice_fielsBlock>
</mt:If>

 

 

1行目
<mt:If tag="PageData_voice_fiels">カスタムフィールドで登録したFreeLayoutCustomFieldのタグを指定

2行目
<mt:PageData_voice_fielsBlock>カスタムフィールドで登録したFreeLayoutCustomFieldのタグにBlockをつけてリピーターフィールドを繰り返して出力させます

14行目
<$mt:FLCFValue name="txt"$>これでFreeLayoutCustomFieldで登録した名前を指定して出力させます

 

 

FreeLayoutCustomFieldの登録画面について

 

フィールドの定義

fields:
  img:
    type: image
    label: 項目名
    class: ext_check
  ttl:
    type: text
    label: 項目名
    class: ext_check
  txt:
    type: textarea
    label: 項目名
    class: ext_check
options:
  multiple: 1
  sortable: 1

 

レイアウト用HTML

<table class="voice_table">
  <tr>
    <th>画像</th><td>{{img}}</td>
  </tr>
  <tr>
    <th>部門・名前</th><td>{{ttl}}</td>
  </tr>
  <tr>
    <th>本文</th><td>{{txt}}</td>
  </tr>
</table>

 

レイアウト用CSS

<style>
.voice_table {
  width: 100%;
}
.voice_table th {
  width: 20%;
}
.voice_table td {
  width: 80%;
}
.voice_table td input[type=text],
.voice_table td textarea {
  box-sizing: border-box;
  padding: 6px 12px;
  width: 100%;
  margin-bottom: 10px;
  border-radius: 5px;
}
.voice_table td textarea {
  height: 5em;
}
</style>

 

category cloud