如何向使用图像样式生成的图像添加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

这是基于Ryan的答案的一些代码。

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（）执行此操作的问题在于，它仅覆盖一个字段的输出函数，如果您在不同位置具有多个字段，该怎么办...太多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文件并添加脚本来确保脚本被调用[] = 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);
}