コンテンツタイプ「基本ページ」に画像フィールドを追加し、「ディスプレイの管理」オプションを使用して、ページの上部に画像フィールドを表示しました。ただし、画像にはスタイリングがなく、スタイルを追加できるように画像にクラスを追加する方法を一生理解することはできません。
3 に答える
上記の答えは、CSSをターゲットにすることが唯一の必要性である場合に役立ちます。しかし、IMGタグの期間にクラスを追加する必要がありました。これが私が問題を解決した方法です。これはおそらく最善の方法ではなく、確かに唯一の方法ではありませんが、有効な「Drupalの方法」であり、機能します。テンプレートのtemplate.phpファイルを開きます。
次の関数を貼り付けます。この関数は、使用シナリオに合わせて変更およびカスタマイズする必要があります。たとえば、<TEMPLATENAME>
テンプレート名に置き換えて、必要に応じてクラスを追加または削除する必要があります。
function <TEMPLATENAME>_preprocess_image(&$variables) {
// If this image is of the type 'Staff Photo' then assign additional classes to it:
if ($variables['style_name'] == 'staff_photo') {
$variables['attributes']['class'][] = 'lightbox';
$variables['attributes']['class'][] = 'wideborder';
}
}
クラスを画像に追加するタイミングを決定するために「if」ステートメントを作成しましたが、必要に応じてカスタマイズする必要があります。すべての画像フィールド画像にクラスが必要な場合は、完全に削除するか、フロントページなどにのみ適用したい場合は、「if drupal_is_front_page()」と表示される場合があります。
私の場合、スタッフの写真の画像スタイル([構成]>[メディア]>[画像スタイル])を作成し、if句を追加して、指定した画像スタイルの画像にのみ優先クラスを適用しました。それは素晴らしい方法だと思いますが、好きなことをすることができます。
これで、「スタッフ写真」の画像スタイルの画像フィールドを含むノードを表示しているときはいつでも、クラスが魔法のようにIMGタグに表示されます。これはまさに私が必要としていたものです。
CCKを使用している場合、ほぼ確実に、画像にすでに関連付けられているクラス(または少なくとも画像をラップするdiv上のクラス)があります。CCKは、クラス内のほぼすべてをラップします。画像を右クリックし、[要素の検査]をクリックして再確認してください。
ただし、本当にクラスを追加する必要がある場合は、テーマ開発者モジュールを使用して、オーバーライドするテーマ関数またはテンプレートファイルを見つけることができます。詳細については、テーマ開発者のスクリーンキャストを確認してください。
この関数を使用する場合、Drupalはクラスを追加しますが、フロントページにエラー「通知:未定義のインデックス:template_preprocess_imageのstyle_name..」が表示されます。
「_style」を貼り付けて大丈夫です。
function <TEMPLATENAME>_preprocess_image_style(&$variables) {
// If this image is of the type 'Staff Photo' then assign additional classes to it:
if ($variables['style_name'] == 'staff_photo') {
$variables['attributes']['class'][] = 'lightbox';
$variables['attributes']['class'][] = 'wideborder';
}
}