Come aggiungere un attributo CSS a Immagine generata con stile immagine

Praticamente tutto nel titolo. Vorrei aggiungere una classe CSS alle immagini generate tramite una funzione tema stile immagine, in modo che l'output assomigli a:

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

C'è un modo per farlo?

Se ti senti a tuo agio nel sovrascrivere le funzioni del tema nel template.php del tuo tema, puoi semplicemente creare una funzione YOURTHEME_image_style ():

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

Ecco un po 'di codice basato sulla risposta di Ryan .

1. Copia e incolla il codice da theme_image_style nel template.php del tuo tema.
2. sostituire themein theme_image_stylecon il nome del vostro tema.

3. aggiungere le seguenti righe alla funzione

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

Invece di 'my-class'voler usare il nome dello stile attuale, così ho usato $variables['style_name']invece. I nomi degli stili di immagine sono sempre nomi di classi CSS validi, quindi non ci dovrebbero essere problemi con questo approccio. La funzione dovrebbe apparire così:

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

Usa la funzione di preelaborazione

Volete quella classe sull'immagine reale, l'aggiunta tramite JS / jQuery è disordinata e si interrompe se il contenuto è caricato 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';

        }

    }

}

Perché non uso theme_image_style () per questo

Il problema nel farlo tramite theme_image_style () è che sovrascrive la funzione di output per un solo campo, cosa succede se hai più campi in luoghi diversi ... troppi THEME_field__field_photo__team($variables)raggiungendo lo stesso di quanto sopra usando theme_image_style () sarebbe simile a questo:

// 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 il motivo per cui desideri aggiungere la classe è fornire alcuni CSS aggiuntivi per le immagini, puoi aggirare questo andando ad un livello superiore nella struttura ad albero dei dom. Le tue immagini dovrebbero essere incluse in un campo div che ha una classe simile .field-type-image. Con questo in mente, puoi scrivere un selettore che raccoglie le immagini, qualcosa del tipo:
div.field-type-image img {border: 1px solid #ccc }

o uno più specifico come:

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

Penso che tu voglia usarlo per i sottotitoli. Dopo molte battute di caccia, usa Jquery. Questa roba è per Drupal 7.

crea il tuo file js. Chiamalo caption.js. Puoi chiamarlo qualcos'altro. Conservalo nel tuo tema da qualche parte.

Assicurati che lo script venga richiamato modificando il file theme.info e aggiungendo script [] = pathtoyourfile / caption.js

caption.js dovrebbe contenere il seguente codice

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

Sostituisci .views-field-field-useimage img per il tuo selettore.

Premi il pulsante cache vuoto e provalo.

Un suggerimento per questa risposta .

Cambiare il

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

per

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

quindi il nome dello stile dell'immagine viene aggiunto alla matrice della classe e nulla viene inavvertitamente schiacciato.

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