Cách thêm thuộc tính CSS vào Ảnh được tạo bằng kiểu ảnh

Khá nhiều tất cả trong tiêu đề. Tôi muốn thêm một lớp CSS vào hình ảnh được tạo thông qua chức năng chủ đề kiểu hình ảnh, để đầu ra trông như sau:

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

Có cách nào để làm như vậy?

Nếu bạn cảm thấy thoải mái khi ghi đè các chức năng chủ đề trong template.php của chủ đề, bạn chỉ có thể tạo chức năng YOUTHEME_image_style ():

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

Đây là một số mã dựa trên câu trả lời của Ryan .

1. Sao chép và dán mã từ theme_image_style vào template.php của chủ đề của bạn.
2. thay thế themetrong theme_image_styletên của chủ đề của bạn.

3. thêm các dòng sau vào hàm

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

Thay vì 'my-class'tôi muốn sử dụng tên của phong cách thực tế, vì vậy tôi đã sử dụng $variables['style_name']thay thế. Tên kiểu ảnh luôn là tên lớp css hợp lệ, vì vậy sẽ không có vấn đề gì với cách tiếp cận này. Các chức năng sẽ trông như thế này:

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

Sử dụng chức năng tiền xử lý

Bạn muốn lớp đó trên hình ảnh thực tế, việc thêm thông qua JS / jQuery rất lộn xộn và bị phá vỡ nếu nội dung được tải 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';

        }

    }

}

Tại sao tôi không sử dụng theme_image_style () cho việc này

Vấn đề với việc thực hiện điều này thông qua theme_image_style () là nó ghi đè hàm đầu ra cho chỉ một trường, nếu bạn có nhiều trường ở các vị trí khác nhau ... thì quá nhiều THEME_field__field_photo__team($variables)việc đạt được như trên sử dụng theme_image_style () sẽ như thế này:

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

}

Nếu lý do bạn muốn thêm lớp là để cung cấp thêm một số css cho hình ảnh, thì bạn có thể phá vỡ điều này bằng cách đi đến một cấp cao hơn trong cây dom. Hình ảnh của bạn nên được bao gồm trong một div trường có một lớp như thế nào .field-type-image. Với ý nghĩ này, bạn có thể viết một bộ chọn chọn hình ảnh, đại loại như:
div.field-type-image img {border: 1px solid #ccc }

hoặc một cái cụ thể hơn như:

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

Tôi nghĩ rằng bạn muốn sử dụng điều này cho chú thích. Sau khi săn lùng nhiều, hãy sử dụng Jquery. Công cụ này là dành cho Drupal 7.

tạo tập tin js của bạn. Gọi nó là caption.js. Bạn có thể gọi nó là cái gì khác. Lưu trữ nó trong chủ đề của bạn ở đâu đó.

Đảm bảo tập lệnh được gọi bằng cách chỉnh sửa tệp theme.info của bạn và thêm tập lệnh [] = pathtoyourfile / caption.js

caption.js nên chứa mã sau

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

Thay thế .view-field-field-useimage img cho bộ chọn của riêng bạn.

Nhấn nút bộ nhớ cache trống và cho nó đi.

Một gợi ý cho câu trả lời này .

Thay đổi

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

đến

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

vì vậy tên kiểu ảnh được gắn vào mảng lớp và không có gì vô tình bị bẹp.

Đoạn trích đầy đủ:

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