コンテンツへの画像の貼り付け(3) IMCEモジュールを使う

投稿者:Administrator 投稿日時:2011/09/05(月) 17:41

とにかく、画像を簡単にアップロードして本文に貼り付けたいのです。いろいろなやり方がありそうですが、まずは「画像のアップロード」「本文への貼り付け」だけを簡単にできれば良いので、IMCEというモジュールを使ってみることにします。

1.まずは普通のやり方で、モジュールをインストールします。

2.「管理セクション」→「サイトの環境設定」→「IMCE」で、設定ページを開きます。

3.Common Settings をクリックして展開し、「Enable inline image/file insertion into plain textareas:」のフィールドに「edit-body」と入力して「設定の保存」をクリックします。

ここまで設定したら、「コンテンツの作成」→「ページ」(または「ストーリー」...)で、コンテンツの編集ページを開くと、「本文:」フィールドの下に「Insert image or link.」と表示されます。

imageをクリックすると「File Browser」という名のウィンドウが表示されますので、「アップロード」をクリックしてファイルを選択し、さらに「アップロード」をクリックするとファイルがアップロードされて、リスト内に表示されます。このとき、環境設定(Profile)の「Maximum image resolution:」(デフォルトでは1200px x 1200px)に応じて画像がリサイズされる場合があります。

そして、ファイルを選択して「Insert File」をクリックすると、自動的に img タグを生成して本文中に挿入してくれます。

towerbridge_1.jpg

ふつうのHTMLタグですから「入力書式」で「Full HTML」を選択しなければなりません。

ここでは、挿入されたタグの部分を下記のように書き換えています。

<img src="/sites/default/files/towerbridge_1.jpg" width="1200" height="900" alt="towerbridge_1.jpg" />

<img src="/sites/default/files/towerbridge_1.jpg" width="100%" alt="towerbridge_1.jpg" />

IMCE で検索すると、WYSIWYG エディターとの連携に関する内容が多いようですが、現時点ではなるべくプレーンな状態の記事にしておきたいので、ここではWYSIWYGエディターは導入しないことにします。