Pickles 2

image フィールド

画像の入力欄を作成します。

ただし、このフィールドは <img>要素は出力しません。 src属性の中身だけを提供することに注意してください。

モジュール実装例

{
    "interface": {
        "fields": {
            "imagefieldsample": {
                "fieldType": "input",
                "type": "image",
                "label": "画像",
                "filenameAutoSetter": "ifEmpty",
                "validate":[
                    "required",
                    "min-height:600",
                    "max-height:600",
                    "min-width:800",
                    "max-width:800",
                    "min-filesize:80000",
                    "max-filesize:100000"
                ]
            }
        }
    }
}

image フィールドは、 src属性値だけを出力します。従って、テンプレート側では、 img要素や、CSSの url() 関数などに包んだ記述をする必要があります。

<!-- template.html.twig の実装例 -->
<img src="{{ imagefieldsample }}" />

filenameAutoSetter オプションは、画像ファイル名の自動設定の動作を設定します。 このオプションは Broccoli v0.3.16 で追加されました。 次の値のいずれかを設定できます。

ifEmpty (デフォルト)
画像ファイル名が未入力だった場合に限り、選択したファイル名から自動的に取得します。
always
画像ファイルを選択しなおすたびに、選択したファイル名から自動的に取得します。
random
選んだ画像名に関わらず、自動的にランダムなファイル名を設定します。

旧Broccoli標準記法での実装例

<img src="{&{"input":{
    "type": "image",
    "name": "imagefieldsample",
    "label": "画像",
    "filenameAutoSetter": "ifEmpty",
    "validate":[
        "required",
        "min-height:600",
        "max-height:600",
        "min-width:800",
        "max-width:800",
        "min-filesize:80000",
        "max-filesize:100000"
    ]
}}&}" />

データ型

{
    "resKey": "(リソースキー)",
    "path": "./index_files/resources/resource-name.png",
    "resType": "",
    "webUrl": ""
}

image フィールドは resourceMgr に画像リソースを１つ登録します。 resourceMgr が発行したリソースのキーが resKey に格納されます。

resType には、次のいずれかの値が入ります。

(空白)
画像ファイルを登録する場合の値です。
web
ウェブ上の画像URLを登録する場合の値です。

resType が web のとき、 webUrl にそのURLがセットされます。 webUrl は http:// や https:// から始まるウェブアドレスや、 /common/images/sample.png のような絶対パス、および ./xxx_files/sample.png のような相対パスがセットされる場合があります。

バリデーション

required

画像の登録を必須とします。

min-height:value

画像の最小の高さを指定します。

max-height:value

画像の最大の高さを指定します。

min-width:value

画像の最小の幅を指定します。

max-width:value

画像の最大の幅を指定します。

min-filesize:value

画像の最大のファイルサイズを指定します。

max-filesize:value

画像の最大のファイルサイズを指定します。

back to top