ホーム > サポート・マニュアル > チュートリアル > カスタムフィールド > カスタムフィールドで画像をアップロードできるようにする

チュートリアル

カスタムフィールドを作成して、画像をアップロードできるようにする方法を説明します。(v1.3.0より)

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

例)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" />

各記述の説明

3行目:アップロードした画像の表示【必須】

標準サイズ:normal / 画像(小):tiny / 画像(大):large 正方形サイズ(v.1.5.0より追加):square / 画像(正方形)

例)各画像サイズの記述例

<!-- BEGIN topVisual@normal:veil --><img src="%{ARCHIVES_DIR}{topVisual@path}" width="{topVisual@x}" height="{topVisual@y}" alt="{topVisual@alt}" /><!-- END topVisual@normal:veil --><br />
<!-- BEGIN topVisual@tiny:veil --><img src="%{ARCHIVES_DIR}{topVisual@tinyPath}" width="{topVisual@tinyX}" height="{topVisual@tinyY}" alt="{topVisual@tinyAlt}" /><!-- END topVisual@tiny:veil --><br />
<!-- BEGIN topVisual@large:veil --><img src="%{ARCHIVES_DIR}{topVisual@largePath}" width="{topVisual@largeX}" height="{topVisual@largeY}" alt="{topVisual@largeAlt}" /><!-- END topVisual@large:veil --><br />
<!-- BEGIN topVisual@square:veil --><img src="%{ARCHIVES_DIR}{topVisual@squarePath}" width="{topVisual@squareX}" height="{topVisual@squareY}" alt="{topVisual@squareAlt}" /><!-- END topVisual@square:veil --><br />

4行目:画像がアップロードされなかった場合に既存のアップロードされている画像の情報を送信する記述【必須】

<input type="hidden" name="フィールド名@old" value="{フィールド名@path}" />

5〜8行目:アップロードしてある画像を削除する記述【任意】

<label for="input-checkbox-フィールド名@edit">
	<input type="checkbox" name="フィールド名@edit" value="delete" id="input-checkbox-フィールド名@edit" /> 削除
</label>

10行目:ファイルを入力する記述【必須】

<input type="file" name="フィールド名" />

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

<input type="hidden" name="field[]" value="フィールド名" />

12行目:通常のフィールドではなく、拡張フィールドであることの記述【必須】

<input type="hidden" name="フィールド名:extension" value="image" />

13行目:altの指定【任意】

<input type="text" name="フィールド名@alt" value="{フィールド名@alt}" />

14行目:アップロードする画像の拡張子を指定【任意】

拡張子を指定し、画像の形式も自働的に変換されます。

<input type="hidden" name="フィールド名@extension" value="拡張子" />

15行目:アップロードする場所とファイル名を指定【任意】

カスタムフィールドからアップロードされた画像は、/archives/bid/内に格納されます。(その他の場所にはアップロードできません。)

<input type="hidden" name="フィールド名@filename" value="アップロードする画像のパス" />

16行目:アップロードする画像の大きさを指定【任意】

幅(width)と高さ(height)を指定します。幅と高さどちらかを指定すると指定した大きさを元に縦横比に合わせて画像がリサイズされます。「size」は画像の長辺を指定します。

<input type="hidden" name="フィールド名@width" value="画像の幅の数値" />
<input type="hidden" name="フィールド名@height" value="画像の高さの数値" />
<input type="hidden" name="フィールド名@size" value="画像の長辺の数値" />

画像(小)と(大)と(正方形)の大きさを指定することもできます。指定した場合にのみ、画像(小)と(大)と(正方形)の画像が作成されます。 *正方形画像はv.1.5.0からの機能になります。

画像(小)の場合
tinyWidth, tinyHeight, tinySize
画像(大)の場合
largeWidth, largeHeight, largeSize
画像(正方形)の場合
squareWidth, squareHeight, squareSize

例)各画像サイズの記述例

<input type="hidden" name="topVisual@tinyWidth" value="90" />
<input type="hidden" name="topVisual@tinyHeight" value="90" />
<input type="hidden" name="topVisual@tinySize" value="90" />
<input type="hidden" name="topVisual@largeWidth" value="600" />
<input type="hidden" name="topVisual@largeHeight" value="600" />
<input type="hidden" name="topVisual@largeSize" value="600" />
<input type="hidden" name="topVisual@squareSize" value="200" />


携帯アクセス解析