1.8. Image - 画像の操作、画像スタイル。

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

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

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

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

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

これで、ティーザーのリストでは、employee は完全な employee ページへのリンクになります。また、既成の画像スタイル Large、Medium、Thumbnail に加えて、画像用の独自のサイズを作成できます。Configuration - Image Styles に移動しましょう

/admin/config/media/image-styles

そこには、すでに存在する画像スタイルと add image styles ボタンが見られます。

サイズは 150x150 ピクセルで、ナビゲートしやすいようにそう名付けましょう。編集ページで、追加できるアクションが見られます:

Convert - 写真を目的の解像度に変換します。

Crop - スケーリングせずに写真を切り抜くだけです。

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

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

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

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

Scale and crop - 比率を維持しながらサイズを変更し、次に大きい方の辺に沿って切り取ります。

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

スケーリング:

次のように見えるはずです:

それでは、フィールド表示管理ページに戻り、ティーザーの employee 用に画像スタイル 150x150 を設定しましょう。

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

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