Como adicionar um atributo CSS à imagem gerada com estilo de imagem

Praticamente tudo no título. Gostaria de adicionar classes CSS às imagens geradas por uma função de tema no estilo de imagem, para que a saída se pareça com:

<img class="MYCLASS" alt="" src="site.com/sites/default/files/styles/profile_picture/public/pictures/picture-1-1318455022.jpg" typeof="foaf:Image"> 

Existe alguma maneira de fazer isso?

Se você estiver confortável substituindo as funções do tema no template.php do seu tema, basta criar uma função YOURTHEME_image_style ():

http://api.drupal.org/api/drupal/modules--image--image.module/function/theme_image_style/7

Aqui está um código com base na resposta de Ryan .

1. Copie e cole o código de theme_image_style no template.php do seu tema.
2. substituir themeno theme_image_stylecom o nome de seu tema.

3. adicione as seguintes linhas à função

     $variables['attributes'] = array(
         'class' => 'my-class',
     );

Em vez de 'my-class'querer usar o nome do estilo real, usei $variables['style_name']. Os nomes de estilo de imagem sempre são nomes de classe css válidos; portanto, não deve haver problemas com essa abordagem. A função deve ficar assim:

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);
}

Use a função de pré-processo

Você deseja que essa classe na imagem real, a adição de JS / jQuery seja confusa e quebre se o conteúdo estiver carregado com 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';

        }

    }

}

Por que não uso theme_image_style () para isso

O problema de fazer isso por theme_image_style () é que ele substitui a função de saída para apenas um campo, e se você tiver vários campos em lugares diferentes ... muitos THEME_field__field_photo__team($variables)alcançando o mesmo que o descrito acima usando theme_image_style () ficaria assim:

// 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);

}

Se a razão pela qual você deseja adicionar a classe é fornecer um css extra para as imagens, você pode contornar isso indo para um nível superior na árvore do dom. Suas imagens devem ser incluídas em um campo div que tenha uma classe como .field-type-image. Com isso em mente, você pode escrever um seletor que escolha as imagens, algo como:
div.field-type-image img {border: 1px solid #ccc }

ou um mais específico como:

div.field-type-image div.field-items div.field-item img {border: 1px solid #ccc }

Eu acho que você deseja usar isso para legendas. Depois de muita procura, use o Jquery. Esse material é para o Drupal 7.

crie seu arquivo js. Chame de caption.js. Você pode chamar de outra coisa. Armazene-o dentro do seu tema em algum lugar.

Verifique se o script foi chamado editando seu arquivo theme.info e adicionando scripts [] = pathtoyourfile / caption.js

caption.js deve conter o seguinte código

(function ($) {
Drupal.behaviors.caption = {
attach: function(context, settings) {
$('.views-field-field-useimage img').addClass('caption');
  }}})
(jQuery);

Substitua .views-field-field-useimage img pelo seu próprio seletor.

Aperte o botão de cache vazio e tente.

Uma sugestão para esta resposta .

Mudar o

$variables['attributes'] = array(
  'class' => $variables['style_name'],
);

para

$variables['attributes']['class'][] = $variables['style_name'];

portanto, o nome do estilo da imagem é anexado à matriz da classe e nada é pressionado inadvertidamente.

Snippet completo:

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);
}