画像の操作(Drupal 7)

~ Working with images 和訳 ~

イメージモジュール(Drupal 7ではコアに組み込まれました)はウェブサイト内の画像の表示、操作などの機能を担います。イメージツールキットによって、画像のリサイズや各種調整などの処理を行う「画像スタイル」の設定が可能となり、また各コンテンツにフィールドAPIによるイメージフィールドを設置することが出来ます。

イメージモジュールはDrupal 7からはコアモジュール(本体機能の一部)として提供されます。Drupal 6では追加的なコントリビュートモジュールとして使用します。

Drupal 7のイメージモジュールはこれまでのイメージフィールドモジュールと、イメージキャッシュモジュール、そしてDrupal 6のイメージモジュールの機能を統合したものです。

使い方

コンテンツタイプにイメージフィールドを追加する

Drupalのデフォルトの設定では、「画像」フィールドを持つのは「記事(article)」コンテンツタイプだけですが、これは「ページ」コンテンツタイプやカスタムコンテンツタイプなど、他のコンテンツタイプにも追加できます。「画像」フィールドはこのほかにもユーザープロファイルやコメント、タクソノミータームなどにも追加できます。「画像」フィールドはいくつでも追加できますし、それぞれに許可する拡張子やサイズ、保存するディレクトリーなどを設定することが出来ます。

画像がどのように表示されるようにするかといった設定は、「画像スタイル」(後で説明します)で行います。

コンテンツタイプへの画像フィールドの追加手順:

  1. 「管理」 > 「サイト構築」 > 「コンテンツタイプ」 で画像フィールドを追加したいコンテンツタイプを選びます。
  2. 「フィールドの管理」をクリック。
  3. ラベル(例えば「商品画像」など)を入力、フィールド名を定義して「- フィールドタイプを選択 -」で「画像」を選択します。
  4. 次の画面で画像をいくつ追加できるようにするかを決めます(デフォルトは1です)。
  5. オプションでデフォルトの画像を選択します。
  6. 許可する拡張子、画像ファイルのサイズの上限、ファイルを保存するサブディレクトリなどを設定します。
  7. 設定を保存します。

Drupal 7のカスタムフィールドについてのさらに詳しい情報はField UI documentationをご覧ください。

コンテンツに画像を追加する

コンテンツに画像を追加するには以下のようにします。:

  1. 「管理」 > 「コンテンツの追加」でコンテンツタイプを選びます。
  2. 画像フィールドが表示されているはずです(上で設定したものです)。「ファイルを選択」ボタンをクリックしてアップロードする画像を選択します。
  3. 代替テキストを入力します。これはアクセシビリティやSEOに有効とされるものです。
  4. コンテンツを保存します。

画像はノード編集フォームの操作で追加/削除されます。ノードが削除されると、そのノードに関連付けされた画像はすべて削除されます。

画像の埋め込み

インサートモジュールを使うと、イメージモジュールでノードに画像を追加する際に、例えばノード本文のテキストの中に埋め込む形に出来ます。ボタンをクリックすることで簡単に適切なパスとスタイルを備えたimgタグを追加できます。CSSのフロート属性の設定とともに、後で説明する画像スタイルを適切に設定してください。ドキュメントテキストの左右どちらに配置するかといった設定が出来ます。

この場合このままでは画像が2度表示されてしまうので、コンテンツタイプの「表示設定」で埋め込み表示にした画像を非表示にしてください。

画像スタイル

画像スタイルを使用することによって、オリジナル画像に影響を与えることなく、画像の切り抜き、リサイズ、回転、彩度の調整などが出来ます。デフォルトでは「thumbnail」、「medium」、「large」の3つのサイズが用意されています。thumbnail(サムネイル)は、例えばイメージギャラリーのようなコンテンツタイプのティーザー(一覧表示)で表示されるような用途を想定しています。

画像スタイルのエフェクトを変更すると、それまでに生成された画像スタイルの画像はすべて更新されます。画像スタイルの名前は、生成された画像のパスに使用されています。

 

  1. 「管理」 > 「環境設定」 > 「メディア」 > 「画像スタイル」 にアクセス。
  2. 「スタイルの追加」もしくは変更したい画像スタイルをクリック。
  3. スタイルを設定する際に、画像の切り抜き、リサイズ、回転、彩度の調整などのエフェクトを追加することが出来ます(エフェクトの種類は他のコントリビュートモジュールをインストールすることによって様々なものが追加できます)。例えば画像の切り抜き、スケールと彩度の調整などのエフェクトを統合したり、正方形になるように作成したり、グレースケールにしたり出来ます。
  4. 設定を保存します。

画像スタイルを設定することにより、コンテンツタイプの表示の設定でそれを選択できるようになります。デフォルト、ティーザーの表示の設定で、それぞれ別の画像スタイルを用いることも出来ます。

画像スタイルの適用:

  1. 「管理」 > 「サイト構築」 > 「コンテンツタイプ」 > 「表示の管理」 にアクセス。
  2. セカンダリータブの「デフォルト」か「ティーザー」をクリック。
  3. 画像フィールドの歯車のボタンをクリックすると、画像スタイルのセレクトボックスが表示されます。ここではリンクの設定(ノード単体ページにリンク、オリジナル画像にリンク、あるいはリンクなし)も出来ます。
  4. 設定を保存します。
  5. コンテンツを表示させると、画像スタイルが適用されているはずです。

画像のクオリティ設定

画像のクオリティを設定することが出来ます。クオリティを上げればファイルサイズが大きくなることも考慮してください。

  1. 「管理」 > 「環境設定」 > 「メディア」 > 「画像ツールキット」 にアクセス。
  2. JPEGのクオリティ(0 ~ 100%)を入力。
  3. 設定を保存します。

画像&ギャラリー設定におけるトラブルシューティング

いくつかの事情により、画像をギャラリーに追加するような機能は、クリーンURLが有効になっていないと機能しないことがあります。クリーンURLについて詳しくはこちら。[バグレポート]

画像スタイルのフラッシュと再構築

Drupal 6のイメージキャッシュモジュールはDrupal 7ではコアに取り込まれたため、イメージモジュールの「フラッシュ(キャッシュのクリア)」オプションは変更となりました。Drupal 7では、この「フラッシュ(キャッシュのクリア)」は無くなりましたが、画像スタイルを保存する際に自動的にフラッシュ(画像キャッシュをクリア)されます。

Drupal 6について

Drupal 6ではイメージモジュールはコアには含まれていません。追加的なコントリビュートモジュールを別途インストールすることにより、画像を扱うのに便利なさまざまな機能を利用できるようになります。

コア: 
Drupal7