Cómo agregar un atributo CSS a la imagen generada con estilo de imagen

Casi todo en el título. Me gustaría agregar clases de CSS a las imágenes generadas a través de una función de tema de estilo de imagen, para que la salida se vea así:

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

Hay alguna manera de hacerlo ?

Si se siente cómodo anulando las funciones de tema en template.php de su tema, puede crear una función YOURTHEME_image_style ():

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

Aquí hay un código basado en la respuesta de Ryan .

1. Copie y pegue el código de theme_image_style en el template.php de su tema.
2. sustituir themeen theme_image_styleel nombre de su tema.

3. agregue las siguientes líneas a la función

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

En lugar de 'my-class'querer usar el nombre del estilo real, entonces usé en su $variables['style_name']lugar. Los nombres de estilo de imagen son siempre nombres de clase CSS válidos, por lo que no debería haber ningún problema con este enfoque. La función debería verse así:

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

Usar la función de preproceso

Desea esa clase en la imagen real, agregar a través de JS / jQuery es desordenado y se rompe si el contenido se carga 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 qué no uso theme_image_style () para esto?

El problema al hacer esto a través de theme_image_style () es que anula la función de salida para un solo campo, ¿qué pasa si tiene múltiples campos en diferentes lugares ... demasiados THEME_field__field_photo__team($variables)logrando lo mismo que el anterior usando theme_image_style () se vería así:

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

}

Si la razón por la que desea agregar la clase es para proporcionar un poco de CSS adicional para las imágenes, puede evitar esto yendo a un nivel superior en el árbol de dom. Sus imágenes deben incluirse en un campo div que tenga una clase como .field-type-image. Con esto en mente, puede escribir un selector que elija las imágenes, algo así como:
div.field-type-image img {border: 1px solid #ccc }

o uno más específico como:

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

Creo que quieres usar esto para los subtítulos. Después de buscar mucho, usa Jquery. Esto es para Drupal 7.

crea tu archivo js. Llámalo caption.js. Puedes llamarlo de otra manera. Guárdelo dentro de su tema en algún lugar.

Asegúrese de que se llama al script editando su archivo theme.info y agregando scripts [] = pathtoyourfile / caption.js

caption.js debe contener el siguiente código

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

Sustituya .views-field-field-useimage img por su propio selector.

Presiona el botón de caché vacío y pruébalo.

Una sugerencia para esta respuesta .

Cambiar el

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

a

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

por lo que el nombre del estilo de imagen se agrega a la matriz de clase y nada se aplasta inadvertidamente.

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