Bagaimana cara menambahkan atribut CSS ke Gambar yang dihasilkan dengan gaya gambar

Cukup banyak dalam judul. Saya ingin menambahkan kelas CSS ke gambar yang dihasilkan melalui fungsi tema gaya gambar, sehingga hasilnya terlihat seperti:

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

Apakah ada cara untuk melakukannya?

Jika Anda nyaman mengesampingkan fungsi tema di template.php tema Anda, Anda bisa membuat fungsi YOURTHEME_image_style ():

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

Ini beberapa kode berdasarkan jawaban Ryan .

1. Salin dan tempel kode dari theme_image_style ke template.php tema Anda.
2. ganti themedi theme_image_styledengan nama tema Anda.

3. tambahkan baris berikut ke fungsi

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

Alih-alih 'my-class'saya ingin menggunakan nama gaya yang sebenarnya, jadi saya $variables['style_name']malah menggunakannya . Nama gaya gambar selalu merupakan nama kelas css yang valid, jadi seharusnya tidak ada masalah dengan pendekatan ini. Fungsi seharusnya terlihat seperti ini:

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

Gunakan fungsi preproses

Anda ingin kelas itu pada gambar yang sebenarnya, menambahkan melalui JS / jQuery berantakan dan rusak jika konten dimuat 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';

        }

    }

}

Mengapa saya tidak menggunakan theme_image_style () untuk ini

Masalah dengan melakukan ini melalui theme_image_style () adalah bahwa ia menimpa fungsi output hanya untuk satu bidang, bagaimana jika Anda memiliki beberapa bidang di tempat yang berbeda ... terlalu banyak THEME_field__field_photo__team($variables)mencapai yang sama seperti di atas menggunakan theme_image_style () akan terlihat seperti ini:

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

}

Jika alasan Anda ingin menambahkan kelas adalah untuk memberikan beberapa css tambahan untuk gambar, maka Anda dapat menghindari ini dengan pergi ke tingkat atas di pohon dom. Gambar Anda harus dimasukkan dalam bidang div yang memiliki kelas seperti .field-type-image. Dengan mengingat hal ini, Anda dapat menulis pemilih yang memilih gambar, seperti:
div.field-type-image img {border: 1px solid #ccc }

atau yang lebih spesifik seperti:

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

Saya pikir Anda ingin menggunakan ini untuk teks. Setelah banyak berburu, gunakan Jquery. Barang ini untuk Drupal 7.

buat file js Anda. Sebut saja caption.js. Anda bisa menyebutnya sesuatu yang lain. Simpan di dalam tema Anda di suatu tempat.

Pastikan skrip dipanggil dengan mengedit file theme.info Anda dan menambahkan skrip [] = pathtoyourfile / caption.js

caption.js harus berisi kode berikut

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

Ganti img. View-field-field-useimage untuk pemilih Anda sendiri.

Tekan tombol cache kosong dan cobalah.

Saran untuk jawaban ini .

Mengubah

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

untuk

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

jadi nama gaya gambar ditambahkan ke array kelas dan tidak ada yang tergencet secara tidak sengaja.

Cuplikan lengkap:

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