画像と画像タイトルを重ねて表示する
画像のタイトル属性は通常ブラウザ上ではマウスオーバーで表示されますが、これを画像に並べて、あるいは重ねて表示して、マウスオーバーしなくても読めるようにすると、画像の説明が分かりやすくなりますよね。
Drupal7でこの処理をするにはいくつかの方法が考えられます。
フィールドテンプレートのオーバーライド
Drupal7ではmodules/field/themeディレクトリの中にfield.tpl.phpというテンプレートファイルがあります。これがfieldのデフォルト出力になっていて、画像もテキストも共通です。ラベルと、入力された値の数（デルタ値）分、値を繰り返し出力する他、フィールドタイプと奇数番目か偶数番目かをクラス属性として出力しているだけのシンプルなものです。
このファイルをコピーして、対象となるフィールド名に沿って名前を付け、出力するテーマフォルダに保存するとそのフィールドの出力がオーバーライドされます。（Cacheのクリアが必要です）
名前の付け方は、例えばimagesフィールドであれば、field--field-images.tpl.phpとなります。最初の区切りはハイフン2つです。
<div class="<?php print $classes; ?>"<?php print $attributes; ?>> <?php if (!$label_hidden): ?> <div class="field-label"<?php print $title_attributes; ?>><?php print $label ?>: </div> <?php endif; ?> <div class="field-items"<?php print $content_attributes; ?>> <?php foreach ($items as $delta => $item): ?> <div class="field-item <?php print $delta % 2 ? 'odd' : 'even'; ?>"<?php print $item_attributes[$delta]; ?>><?php print render($item); ?><?php if($item['#item']['title']):print '<div><span>'.$item['#item']['title'].'</span></div>';endif ?></div> <?php endforeach; ?> </div></div>$item['#item']['title']でタイトル属性の内容を出力しています。
あとはCSSでfield-itemに対してposition:relativeとfloat、field-item > divに対してposition:absoluteを設定して、下のような一覧出力が出来上がりです。
画像のサイズやトリミングは画像キャッシュで設定しておいて、コンテンツの出力設定画面で選択します。colorboxやlightboxモジュールを使ってモーダルウィンドウ表示するとカッコ良くなります。
Field collectionモジュール
スクリプトは書きたくない、出来る限り管理画面で出力設定したいという向きには、Field collectionというモジュールがあります。フィールドを管理画面だけで出力設定するには、画像タイトルは画像の単なる属性なので、新たにテキストフィールドを設置する必要が生じます。
画像とテキストフィールドをひとつにまとめてくれるのがこのField collectionです。
モジュールをインストールしたらコンテンツタイプのフィールドの管理画面でフィールドタイプとしてField collectionが選択できるようになります。ウィジェットをembedにして値の数は無制限にしておきます。
次に、サイト構築>Field collectionsを開くと、コンテンツタイプ画面で追加したフィールドが一覧表示されます。このフィールド管理で新たに画像フィールドとテキストフィールドを追加し、表示管理画面で、ラベルの表示や、画像のフォーマットを設定します。
ここで注意が必要なのは、複数の値を扱えるようにするには、Field collectionフィールドに複数、あるいは無制限を設定し、入れ子になった画像やテキストフィールドは値を１にすることです。つまり既存のフィールドをField collectionとして扱えるケースは少なく、新規にフィールドを設置することが前提になる、と考えたほうがいいでしょうね。
下の電車の画像の内、最後の2枚だけこのField collectionで出力した画像で、その上のフィールドテンプレートのオーバーライドした画像と全く同じ見た目にしたものです。
何かと使い回しのできる方法で、一覧に並べる他、jQueryのスクリプトやField slideshowモジュールと絡めてスライドショーにしたりもできますが、他のコンテンツタイプでの使い回しとかを考えると、タイトルだけならテンプレートのオーバーライドの方法がマッチベターかなと思います。
タイトルをText areaにして長文を入力する、この他にも入れ子フィールドを追加するといった場合は、Field collectionが威力を発揮するはずです。
写真は20倍ズームコンデジで撮った天王寺駅での国鉄型電車、関東では絶滅した車種もまだまだ元気で活躍しています。