画像スタイルで生成された画像にCSS属性を追加する方法

タイトルのほとんどすべて。出力が次のようになるように、画像スタイルのテーマ関数を介して生成された画像に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

ライアンの回答に基づいたコードを次に示します。

1. コードをtheme_image_styleからテーマのtemplate.phpにコピーして貼り付けます。
2. 置き換えthemeでtheme_image_styleあなたのテーマの名前で。

3. 関数に次の行を追加します

     $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ツリーの上位レベルに移動することでこれを回避できます。画像は、のようなクラスを持つフィールドdivに含める必要があります.field-type-image。これを念頭に置いて、次のような画像を選択するセレクターを作成できます。
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);
}