Hinzufügen eines CSS-Attributs zu einem mit dem Bildstil generierten Bild

So ziemlich alles im Titel. Ich möchte Bildern, die über eine Bildstil-Themenfunktion generiert wurden, eine CSS-Klasse hinzufügen, damit die Ausgabe wie folgt aussieht:

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

Gibt es sowieso dazu?

Wenn Sie die Themenfunktionen in der template.php Ihres Themas überschreiben möchten, können Sie einfach eine Funktion YOURTHEME_image_style () erstellen:

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

Hier ist ein Code, der auf Ryans Antwort basiert .

1. Kopieren Sie den Code aus theme_image_style und fügen Sie ihn in die template.php Ihres Themas ein.
2. ersetzen themein theme_image_stylemit dem Namen Ihr Thema ist.

3. Fügen Sie der Funktion die folgenden Zeilen hinzu

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

Anstatt 'my-class'den Namen des tatsächlichen Stils verwenden zu wollen, habe ich $variables['style_name']stattdessen verwendet. Bildstilnamen sind immer gültige CSS-Klassennamen, daher sollte dieser Ansatz kein Problem darstellen. Die Funktion sollte folgendermaßen aussehen:

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

Verwenden Sie die Vorverarbeitungsfunktion

Sie möchten, dass diese Klasse im eigentlichen Image angezeigt wird. Das Hinzufügen über JS / jQuery ist unübersichtlich und bricht ab, wenn der Inhalt ajax geladen ist.

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';

        }

    }

}

Warum ich dafür nicht theme_image_style () verwende

Das Problem bei der Ausführung über theme_image_style () besteht darin, dass die Ausgabefunktion für nur ein Feld überschrieben wird. Wenn Sie mehrere Felder an verschiedenen Stellen haben ... würden zu viele THEME_field__field_photo__team($variables), die mit theme_image_style () dasselbe wie oben erreichen, folgendermaßen aussehen:

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

}

Wenn der Grund, warum Sie die Klasse hinzufügen möchten, darin besteht, zusätzliche CSS für die Bilder bereitzustellen, können Sie dies umgehen, indem Sie zu einer oberen Ebene im Dom-Baum wechseln. Ihre Bilder sollten in einem Feld div enthalten sein, das eine Klasse wie hat .field-type-image. In diesem Sinne können Sie einen Selektor schreiben, der die Bilder auswählt, etwa:
div.field-type-image img {border: 1px solid #ccc }

oder eine spezifischere wie:

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

Ich denke, Sie möchten dies für Untertitel verwenden. Verwenden Sie nach langem Jagen Jquery. Dieses Zeug ist für Drupal 7.

Erstellen Sie Ihre JS-Datei. Nennen Sie es caption.js. Sie können es etwas anderes nennen. Speichern Sie es irgendwo in Ihrem Thema.

Stellen Sie sicher, dass das Skript aufgerufen wird, indem Sie Ihre Datei theme.info bearbeiten und scripts [] = pathtoyourfile / caption.js hinzufügen

caption.js sollte den folgenden Code enthalten

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

Ersetzen Sie .views-field-field-useimage img durch Ihren eigenen Selektor.

Drücken Sie die leere Cache-Taste und probieren Sie es aus.

Ein Vorschlag für diese Antwort .

Ändere das

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

zu

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

Daher wird der Name des Bildstils an das Klassenarray angehängt und nichts wird versehentlich gequetscht.

Vollständiger Ausschnitt:

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