1.8. Image:画像の操作、プリセット。

Drupal はテキストページだけでなく、画像も扱えます。そのために、Image モジュールを有効にする必要があります。Image モジュールを使うと、ノードに写真を添付し、これらの写真を必要なサイズで表示できます。さらに、異なる場所で、これらのサイズは変えられます。ですから例えば、ノードのティーザーでは小さな写真を、完全なノードではすでに大きな写真を使えます。

過去のレッスンで、素材タイプ Employee を作成しました。employee コンテンツタイプの Manage fields を開き、画像フィールドを追加しましょう。

これで、employee を作成/編集するフォームに画像アップロードフィールドが表示されます:

この画像は employee のページに表示されますが、元のサイズで、Image フィールドのラベル付きです。出力を構成するには、Employee コンテンツタイプの設定の Manage display タブに移動する必要があります。

画像フィールドを上に移動し、フィールド名の出力を削除し、歯車（設定）をクリックして、表示される画像のサイズを設定しましょう。デフォルトで、すでにサイズ――プリセット:Large (480x480)、Medium (220x220)、Thumbnail (100x100)――があります。ティーザーには Thumbnail を、完全なノードには Medium を設定しましょう。また、ティーザーでは、画像を employee ノードへのリンクにします:

これで、ティーザーのリストでは、employee は employee の完全なページへのリンクになります。

既成のプリセット Large、Medium、Thumbnail に加えて、画像用の独自のサイズを作成できます。Configuration - Image styles ページに移動しましょう。

/admin/config/media/image-styles

そこには既存のプリセットと add image style ボタンが見られます:

150x150 ピクセルにして、そう名付けましょう。プリセット編集ページで、追加できるアクションが見られます:

Convert - 画像を別の形式に変換します。

Crop - スケーリングせずに写真を切り抜きます。

Desaturate - 写真を白黒にします。

Resize - 比率を維持せずにサイズを変更します。

Rotation - 写真を目的の角度に回転させます。

Scale - 比率を維持しながらサイズを変更します。

複数のアクションを選択できます。例えば、Scale150x150 を行い、次に写真を白黒にしましょう。

Scale:

それでは、Manage display ページに戻り、employee のティーザー用に 150x150 プリセットを通じた画像フィールドの出力を設定しましょう。

これで、employee のティーザーは次のように見えます:

これで、Drupal で写真をアップロードする方法と、それらを必要な方法で表示する方法が分かりました。続くレッスンでは、同様の方法でフォトギャラリーを作る方法を見ていきます。