画像をアップロードするカスタムフィールドの作成

画像をアップロードするカスタムフィールド

例)PNGファイルをアップロードするカスタムフィールド(カスタムフィールドの変数:topVisual)

<!-- アップロード済みのファイルのプレビューエリア -->
<!-- BEGIN topVisual@path:veil -->
<img src="%{ARCHIVES_DIR}{topVisual@path}" width="{topVisual@x}" height="{topVisual@y}" alt="{topVisual@alt}" /><br />
<input type="hidden" name="topVisual@old" value="{topVisual@path}" />
<input type="hidden" name="topVisual@secret" value="{topVisual@secret}" />
<label for="input-checkbox-topVisual@edit">
  <input type="checkbox" name="topVisual@edit" value="delete" id="input-checkbox-topVisual@edit" />削除
</label><br /><!-- END topVisual@path:veil -->
<!-- イメージファイルをアップロードするフィールド -->
<input type="file" name="topVisual" size="20" />
<input type="hidden" name="field[]" value="topVisual" />
<input type="hidden" name="topVisual:extension" value="image" />
<input type="text" name="topVisual@alt" value="{topVisual@alt}" />
<input type="hidden" name="topVisual@extension" value="png" />
<input type="hidden" name="topVisual@filename" value="topVisual.png" />
<input type="hidden" name="topVisual@width" value="820" />


記述の解説

画像をアップしたプレビュー【必須】

<img src="%{ARCHIVES_DIR}{topVisual@path}" width="{topVisual@x}" height="{topVisual@y}" alt="{topVisual@alt}" />

画像のデータを保持するための記述【必須】

<input type="hidden" name="topVisual@old" value="{topVisual@path}" />
<input type="hidden" name="topVisual@secret" value="{topVisual@secret}" />

画像を削除するチェックボックス【必須】

<label for="input-checkbox-topVisual@edit">
  <input type="checkbox" name="topVisual@edit" value="delete" id="input-checkbox-topVisual@edit" />削除
</label>

画像のカスタムフィールドであることの記述【必須】

<input type="hidden" name="topVisual:extension" value="image" />

画像のaltの指定【任意】

<input type="text" name="topVisual@alt" value="{topVisual@alt}" />

画像の拡張子を指定【任意】

<input type="hidden" name="topVisual@extension" value="png" />

画像のファイル名を指定【任意】

<input type="hidden" name="topVisual@filename" value="topVisual.png" />

画像のサイズを指定【任意】

<input type="hidden" name="topVisual@width" value="820" />

画像のサイズはさまざまな指定方法があります。横幅でリサイズしたり、縦幅でリサイズしたり、正方形にトリミングしたり、最大・最小サイズなど指定することができます。複数のサイズの画像を生成したいときは複数のサイズを指定してください。

<input type="hidden" name="フィールド名@width" value="画像の幅の数値" />
<input type="hidden" name="フィールド名@height" value="画像の高さの数値" />
<input type="hidden" name="フィールド名@size" value="画像の長辺の数値" />
<input type="hidden" name="フィールド名@tinyWidth" value="画像(小)の幅の数値" />
<input type="hidden" name="フィールド名@tinyHeight" value="画像(小)の高さの数値" />
<input type="hidden" name="フィールド名@tinySize" value="画像(小)の長辺の数値" />
<input type="hidden" name="フィールド名@largeWidth" value="画像(大)の幅の数値" />
<input type="hidden" name="フィールド名@largeHeight" value="画像(大)の高さの数値" />
<input type="hidden" name="フィールド名@largeSize" value="画像(大)の長辺の数値" />
<input type="hidden" name="フィールド名@squareWidth" value="画像(正方形)の幅の数値" />
<input type="hidden" name="フィールド名@squareHeight" value="画像(正方形)の高さの数値" />
<input type="hidden" name="フィールド名@squareSize" value="画像(正方形)の長辺の数値" />