image フィールド

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

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

モジュール実装例

{
    "interface": {
        "fields": {
            "imagefieldsample": {
                "fieldType": "input",
                "type": "image",
                "label": "画像",
                "filenameAutoSetter": "ifEmpty",
                "format": {
                    "maxWidth": 1600,
                    "maxHeight": 2400,
                    "mimeType": "image/png",
                    "quality": 0.92
                },
                "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",
    "format": {
        "maxWidth": 1600,
        "maxHeight": 2400,
        "mimeType": "image/png",
        "quality": 0.92
    },
    "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 のような相対パスがセットされる場合があります。

フォーマット

format オプションを設定すると、画像登録時に自動的な加工処理を施すことができます。

maxWidth

format.maxWidth に数値が指定されている場合、登録された画像の幅がこの値より大きいとき、この値を幅としてリサイズされます。 リサイズ後の高さは、アスペクト比を維持して計算されます。

デフォルトは 1800 です。

maxHeight

format.maxHeight に数値が指定されている場合、登録された画像の高さがこの値より大きいとき、この値を高さとしてリサイズされます。 リサイズ後の幅は、アスペクト比を維持して計算されます。

デフォルトは 2400 です。

mimeType

ここに画像の mimeType を指定すると、登録された画像の種類が変換されます。 image/png、image/jpeg、image/gif、image/webp が指定できます。

省略した場合、入力された元画像のフォーマットを引き継ぎます。

quality

image/jpeg や image/webp のような非可逆圧縮を使う画像フォーマットの画質です。 0 〜 1 の間の数値で指定します。

デフォルトは 0.92 です。

バリデーション

required

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

min-height:value

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

max-height:value

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

min-width:value

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

max-width:value

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

min-filesize:value

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

max-filesize:value

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