web-dev-qa-db-fra.com

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?

7themingmedia
10
silkAdmin

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

4
Ryan Price

Voici un code basé sur Ryan's réponse .

  1. Copiez et collez le code de theme_image_style dans le template.php de votre thème.
  2. remplacer theme dans theme_image_style avec le 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 actuel, j'ai donc utilisé $variables['style_name'] au lieu. 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);
}
4
kapex

tiliser 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 cela par le biais de theme_image_style () est qu'il remplace la fonction de sortie pour un seul champ, et si vous avez plusieurs champs à différents endroits ... trop de THEME_field__field_photo__team($variables) réalisant 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);

}
4
Duncanmoo

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 ayant 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 }

1
nikan

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.

1
Tony Horrocks

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