Comment ajouter un attribut CSS à une image générée avec un style d'image

Presque tout dans le titre. Je voudrais ajouter une classe CSS aux images générées via une fonction de thème de style d'image, de sorte que la sortie ressemble à:

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

Y a-t-il un moyen de le faire?

Si vous êtes à l'aise avec la substitution de fonctions de thème dans le template.php de votre thème, vous pouvez simplement créer une fonction YOURTHEME_image_style ():

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

Voici un code basé sur la réponse de Ryan .

1. Copiez et collez le code de theme_image_style dans le template.php de votre thème.
2. remplacer themedans theme_image_stylele nom de votre thème.

3. ajoutez les lignes suivantes à la fonction

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

Au lieu de 'my-class'je voulais utiliser le nom du style réel, j'ai donc utilisé à la $variables['style_name']place. Les noms de style d'image sont toujours des noms de classe css valides, donc cette approche ne devrait pas poser de problème. La fonction devrait ressembler à ceci:

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

Utiliser la fonction de prétraitement

Vous voulez que cette classe sur l'image réelle, l'ajout via JS / jQuery est désordonné et se casse si le contenu est chargé en 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';

        }

    }

}

Pourquoi je n'utilise pas theme_image_style () pour cela

Le problème avec ce faisant par theme_image_style () est qu'elle l' emporte sur la fonction de sortie pour un seul champ, si vous avez plusieurs champs dans différents endroits ... trop de THEME_field__field_photo__team($variables)réaliser la même chose que ci - dessus en utilisant theme_image_style () ressemblerait à ceci:

// 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 raison pour laquelle vous souhaitez ajouter la classe est de fournir des CSS supplémentaires pour les images, vous pouvez contourner cela en accédant à un niveau supérieur dans l'arborescence dom. Vos images doivent être incluses dans un champ div qui a une classe comme .field-type-image. Dans cet esprit, vous pouvez écrire un sélecteur qui sélectionne les images, quelque chose comme:
div.field-type-image img {border: 1px solid #ccc }

ou plus spécifique comme:

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

Je pense que vous voulez l'utiliser pour les sous-titres. Après avoir beaucoup chassé, utilisez Jquery. Ce truc est pour Drupal 7.

créez votre fichier js. Appelez-le caption.js. Vous pouvez l'appeler autrement. Stockez-le quelque part dans votre thème.

Assurez-vous que le script est appelé en modifiant votre fichier theme.info et en ajoutant des scripts [] = pathtoyourfile / caption.js

caption.js doit contenir le code suivant

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

Remplacez .views-field-field-useimage img par votre propre sélecteur.

Appuyez sur le bouton de cache vide et essayez-le.

Une suggestion pour cette réponse .

Changer la

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

à

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

donc le nom du style d'image est ajouté au tableau de classe et rien n'est écrasé par inadvertance.

Extrait complet:

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