タイトルのほとんどすべて。出力が次のようになるように、画像スタイルのテーマ関数を介して生成された画像にCSSクラスを追加したいと思います。
<img class="MYCLASS" alt="" src="site.com/sites/default/files/styles/profile_picture/public/pictures/picture-1-1318455022.jpg" typeof="foaf:Image">
とにかくそうすることはありますか?
テーマのtemplate.phpでテーマ関数をオーバーライドすることに抵抗がない場合は、YOURTHEME_image_style()関数を作成するだけです。
http://api.drupal.org/api/drupal/modules--image--image.module/function/theme_image_style/7
以下は、Ryanの answer に基づくコードです。
theme_image_style
のtheme
をテーマの名前に置き換えます。関数に次の行を追加します
$variables['attributes'] = array(
'class' => 'my-class',
);
'my-class'
の代わりに、実際のスタイルの名前を使用したかったので、代わりに$variables['style_name']
を使用しました。画像スタイル名は常に有効なcssクラス名であるため、このアプローチで問題はないはずです。関数は次のようになります。
function MYTHEME_image_style($variables) {
// Determine the dimensions of the styled image.
$dimensions = array(
'width' => $variables['width'],
'height' => $variables['height'],
);
image_style_transform_dimensions($variables['style_name'], $dimensions);
$variables['width'] = $dimensions['width'];
$variables['height'] = $dimensions['height'];
$variables['attributes'] = array(
'class' => $variables['style_name'],
);
// Determine the url for the styled image.
$variables['path'] = image_style_url($variables['style_name'], $variables['path']);
return theme('image', $variables);
}
プリプロセス機能を使用
実際の画像にそのクラスが必要です。JS/ jQueryを介した追加は面倒で、コンテンツがajaxでロードされている場合は機能しません。
_function THEMENAME_preprocess_field(&$variables) {
if($variables['element']['#field_name'] == 'field_photo'){
foreach($variables['items'] as $key => $item){
$variables['items'][ $key ]['#item']['attributes']['class'][] = 'img-circle';
}
}
}
_
これにtheme_image_style()を使用しない理由
Theme_image_style()を使用してこれを行う際の問題は、1つのフィールドの出力関数をオーバーライドすることです。異なる場所に複数のフィールドがある場合...テーマが多すぎる場合、THEME_field__field_photo__team($variables)
は、theme_image_styleを使用して上記と同じです()は次のようになります。
_// Override the field 'field_photo' on the content type 'team'
function THEMENAME_field__field_photo__team($variables) {
// Determine the dimensions of the styled image.
$dimensions = array(
'width' => $variables['width'],
'height' => $variables['height'],
);
image_style_transform_dimensions($variables['style_name'], $dimensions);
$variables['width'] = $dimensions['width'];
$variables['height'] = $dimensions['height'];
$variables['attributes'] = array(
'class' => $variables['img-circle'],
);
// Determine the URL for the styled image.
$variables['path'] = image_style_url($variables['style_name'], $variables['path']);
return theme('image', $variables);
}
_
クラスを追加する理由が画像に追加のcssを提供することである場合、domツリーの上位レベルに移動することでこれを回避できます。画像は、.field-type-image
のようなクラスを持つフィールドdivに含める必要があります。これを念頭に置いて、次のような画像を選択するセレクターを作成できます。div.field-type-image img {border: 1px solid #ccc }
または次のようなより具体的なもの:
div.field-type-image div.field-items div.field-item img {border: 1px solid #ccc }
これをキャプションとして使いたいと思います。いろいろ試してから、Jqueryを使用してください。これはDrupal 7.用です。
jsファイルを作成します。 caption.jsと呼びます。あなたはそれを別のものと呼ぶことができます。テーマのどこかに保存します。
Theme.infoファイルを編集し、scripts [] = pathtoyourfile/caption.jsを追加して、スクリプトが呼び出されることを確認します
caption.jsには次のコードを含める必要があります
(function ($) {
Drupal.behaviors.caption = {
attach: function(context, settings) {
$('.views-field-field-useimage img').addClass('caption');
}}})
(jQuery);
独自のセレクターを.views-field-field-useimage imgに置き換えます。
空のキャッシュボタンを押して、実行してください。
この答え の提案。
変更
$variables['attributes'] = array(
'class' => $variables['style_name'],
);
に
$variables['attributes']['class'][] = $variables['style_name'];
そのため、画像のスタイル名がクラス配列に追加され、誤って押しつぶされることはありません。
完全なスニペット:
function MYTHEME_image_style($variables) {
// Determine the dimensions of the styled image.
$dimensions = array(
'width' => $variables['width'],
'height' => $variables['height'],
);
image_style_transform_dimensions($variables['style_name'], $dimensions);
$variables['width'] = $dimensions['width'];
$variables['height'] = $dimensions['height'];
$variables['attributes']['class'][] = $variables['style_name'];
// Determine the url for the styled image.
$variables['path'] = image_style_url($variables['style_name'], $variables['path']);
return theme('image', $variables);
}