Imagesの最近のブログ記事

Drupalで最も悩む所は、イメージのアップロードである事に疑いありません。最も必要な部分であるのにそれを導入するだけで、訳が分からなくなってしまいます。これは機能が非常に豊富にあるためですが、いろいろと覚えていくと、実際に使いこなせれば、かなり便利な事に気がつきます。

Drupal6までは、サムネールを作るだけでImage Cache、ImageAPI、ImageFieldなどのモジュール導入も必要で、画像表示するだけなのにとても面倒なものでした。しかし、これはDrupal7になってかなり改善されようとしています。Drupal7になってからは、Image Cache、ImageAPI、ImageFieldが標準で装備されるようになりました。

あらかじめモジュールの設定で、縮小、リサイズ、回転、切り抜きなどの処理を組み合わせて設定（プリセッションと呼ぶらしい）しておけば、その後にユーザーがアップロードする画像には自動的にこの設定が適用されます。

最初にコンテンツタイプの追加

最初に、コンテンツタイプで、フィールドに画像を追加する必要があります。これで１つのコンテンツで1つの画像がとりあえずアップロード出来るようになります。これを増加させたければ、コンテンツタイプでImage Fieldを作成した後で、その編集画面に「Number OF Values」というものがあるので、これを有効にしましょう。場合によっては、無制限に拡張する事も可能ですが、安全を考えると10ぐらいが適当な所かと思います。

Structure > Content Types > Article (Or "Basic Page" or "Blog Entry") > Edit > Manage Fields > Image > Edit > Number OF Values

Change this to desired number of images for this content type. Save.

Insertモジュールを使う

ここからがポイントで、イメージをアップロードしただけでは、記事の中に反映されません。そこで、Insertモジュールを使う事によって、アップロードしたイメージを記事の中に取り込む事が出来るようになります。ボタンをクリックするだけで取り込めるので非常に気軽に取り込む事が出来るようになります。

Image resize filterで取り込んだイメージの加工

Image resize filterモジュールを使えば、取り込んだイメージの大きさを自由に変更して画像を投稿する事が出来るようになります。これは、Wordpressでは標準である機能ですが、Drupalではこのモジュールは必修と言っても良いモジュールでしょう。

Image Cache モジュールは、Drupal7からCore になったというだけあって、非常に優れたモジュールらしいです。単にResizeするというだけではなくて、切り取ったり、回転したりなどの作業を行う事ができる優れたモジュールです。最初にImageCacheの設定画面に行って、新しい「Preset」というものを作成します。これが幾つも作成出来るので、場合によって違うPresetを利用していけるという具合になっています。



New Actions

Add Crop - Crop an image to the rectangle specified by the given offsets and dimensions.
Add Deprecated Scale - Precursor to Scale and Crop. Has inside and outside dimension
support. This action will be removed in ImageCache 2.1).
Add Desaturate - Convert an image to grey scale.
Add Resize - Resize an image to an exact set of dimensions, ignoring aspect ratio.
Add Rotate - Rotate an image.
Add Scale - Resize an image maintaining the original aspect-ratio (only one value necessary).
Add Scale And Crop - Resize an image while maintaining aspect ratio, then crop it to the specified dimensions.
Add Sharpen - Sharpen an image using unsharp masking.

インド人の英語でちょっと聞きにくい

このImage Resize Filterは、imageのサイズをユーザー側で自由に調整するというモジュールです。一般のユーザーが投稿する時にイメージ画像の大きさを変更出来れば便利じゃないの？という事で生まれたモジュールらしいです。確かにマウスだけでイメージが変更出来るとなると、この上なく便利ではありますね。

Effortless Inline Thumbnails: Image Resize Filter
 

There are a lot of approaches for resizing images (ImageCache, Image, iMCE, and many others). However when building a site for a simple user (no previous web experience), I found that all of these approaches required too much effort on the part of the end user. Why can't a user just resize an image in their WYSIWYG, and not worry about the size of the image at all? That's the goal accomplished by the Image Resize Filter. Despite its extremely techie-sounding name, it's ridiculously easy to use. It provides inline resizing of images to match any <img> tag in any HTML inserted in any Drupal textarea that supports filtering.

Effortless Inline Thumbnails: Image Resize Filter
Effortless Inline Thumbnails: Image Resize Filter

Insertモジュールをインストールする事によって、Content TypeのContent Managementの場所にInsertの設定が出てきます。 この設定で、Enable Insert Buttonを有効にしなければ、画像をアップロードしたとしてもinsertが出てくる事はありません。ここを有効にする事によって、画像をアップロードして、かつ「ノード」にそれを挿入していくという事が可能になります。

挿入の設定場所

この方法が画像を挿入する方法としては最も簡単だと思いました。最初にコンテンツタイプを追加して、そこで「イメージフィールド」を追加します。追加したイメージフィールドの中で、設定からInsert項目を選んで設定を行う事が出来ます。

最初に入れられるイメージの数は、デフォルトで1枚になっています。これを増やしたい場合には、イメージフィールドの設定のGlobal SettingからValueという項目で、幾つでも画像を追加出来るようにする事が出来ます。Unlimitedとしておけば、イメージファイルを何枚でも増やす事が出来ますが、安全上は良い事ではないかもしれません。

追加した「イメージフィールド」の「設定」にある「Insert部分」


Insert is a utility that makes inserting images and links to files into text areas or WYSIWYGs much easier. It adds a simple JavaScript-based button to FileField and ImageField widgets. When used with ImageField and ImageCache, images may be inserted into text areas with a specific ImageCache preset.

Requirements

•CCK (2.5 or higher! D6 only.)
Recommended projects
Insert doesn't do much without FileField or some other supporting module installed. The following all work well with Insert:

•FileField (D6 only)
•ImageField (D6 only)
•ImageCache (D6 only)
Note in Drupal 7, all these modules are built into core.

 

Drupal7のField Slideshowモジュールは、Drupal6の時のような煩雑さがありません。

Compared to Views slideshows, building the slideshow from multiple nodes, this module builds it from a single node, if you're using a multi-valued Image field.

http://drupal.org/project/field_slideshow

Drupal6までは、imagesをどのようにNodeの中に入れるかが非常に悩ましいのです。Drupal7になると、標準でimage cacheとimage fieldが組み込まれていますが、これはDrupal6まではありませんので、先にこれを組み込む必要性が出てきます。 ここでは、参考までに様々なビデオをあげておきますが、基本的には「Field」に表示した画像を「insert」を使って取り込むのがスマートな方法ではないのかな？と思います。

以下のビデオが音声は無いですけど
Drupal Tutorial - Using Images in Nodes


Inserting an Image in Drupal
これはimage Assistモジュールを利用した手法です。image Assistは管理者だけがアップロードするならば、それも悪くないでしょうけど、多くの人がアップロードするならば、このような画面は混乱する可能性があります。

ImageCache Actions


Filefield Inline Images
(ウザイ広告が最初に表示されるかも)
Filefield insert
Image Risize Filter


このイメージについて