Görüntü stiliyle oluşturulan Görüntüye CSS özelliği nasıl eklenir

Hemen hemen tüm başlıkta. Ben bir görüntü tarzı tema fonksiyonu ile oluşturulan görüntülere bir CSS sınıfları eklemek istiyorum, böylece çıktı benziyor:

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

Bunun için yine de var mı?

Temanızın template.php dosyasında tema işlevlerini geçersiz kılmak istiyorsanız, bir YOURTHEME_image_style () işlevi oluşturabilirsiniz:

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

İşte Ryan'ın cevabına dayanan bazı kodlar .

1. Theme_image_style kodunu kopyalayıp temanızın template.php dosyasına yapıştırın .
2. yerine themede theme_image_styleTemanızın adıyla.

3. işleve aşağıdaki satırları ekleyin

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

Bunun yerine 'my-class'gerçek stilin adını kullanmak istedim, $variables['style_name']bunun yerine kullandım . Resim stili adları her zaman geçerli css sınıf adlarıdır, bu nedenle bu yaklaşımla ilgili bir sorun olmamalıdır. İşlev şöyle görünmelidir:

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

Önişleme işlevini kullan

JS / jQuery yoluyla ekleme yapmak dağınıktır ve içerik ajax yüklüyse kesilir.

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

        }

    }

}

Neden bunun için theme_image_style () kullanmıyorum

Bunu theme_image_style () ile yapmanın sorunu, sadece bir alan için çıkış işlevini geçersiz kılmasıdır, farklı yerlerde birden fazla alanınız varsa ... THEME_field__field_photo__team($variables)theme_image_style () kullanarak yukarıdaki ile aynı olan çok fazla şey şöyle görünür:

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

}

Sınıfı eklemenin nedeni görüntüler için fazladan css sağlamaksa, dom ağacında bir üst seviyeye giderek bunu atlatabilirsiniz. Resimleriniz benzer bir sınıfa sahip bir alan divine dahil edilmelidir .field-type-image. Bunu göz önünde bulundurarak, görüntüleri seçen bir seçici yazabilirsiniz:
div.field-type-image img {border: 1px solid #ccc }

veya aşağıdakiler gibi daha spesifik bir örnek:

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

Bence bunu altyazılar için kullanmak istiyorsunuz. Etrafta çok av yaptıktan sonra Jquery kullanın. Bu şey Drupal 7 içindir.

js dosyanızı oluşturun. Buna caption.js deyin. Buna başka bir şey diyebilirsiniz. Temanızın içinde bir yerde saklayın.

Theme.info dosyanızı düzenleyip komut dosyaları ekleyerek komut dosyasının çağrıldığından emin olun [] = pathtoyourfile / caption.js

caption.js aşağıdaki kodu içermelidir

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

Kendi seçiciniz için .views-field-field-useimage img'yi değiştirin.

Boş önbellek düğmesine basın ve bir deneyin.

Bu cevap için bir öneri .

Değiştir

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

için

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

böylece resim stili adı sınıf dizisine eklenir ve hiçbir şey istemeden ezilmez.

Tam snippet:

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