it-swarm-vi.com

Làm thế nào để bạn thêm một lớp CSS vào một mảng kết xuất?

Trong tệp mẫu, trước print render($content['field_image']); Tôi muốn thêm một lớp CSS vào hình ảnh trong $content['field_image'] kết xuất mảng. Tôi có thể làm cái này như thế nào? Đây là mảng kết xuất:

Array
(
[#theme] => field
[#weight] => 2
[#title] => Image
[#access] => 1
[#label_display] => hidden
[#view_mode] => full
[#language] => und
[#field_name] => field_image
[#field_type] => image
[#field_translatable] => 1
[#entity_type] => node
[#bundle] => ll_basic_page
[#object] => stdClass Object
[#items] => Array
    (
        [0] => Array
            (
                [fid] => 6777
                [alt] => alt text
                [title] => 
                [uid] => 1
                [filename] => imageFile.jpg
                [uri] => public://imageFile.jpg
                [filemime] => image/jpeg
                [filesize] => 28742
                [status] => 1
                [timestamp] => 1314312382
                [rdf_mapping] => Array
                    (
                    )
            )
    )
[#formatter] => image
[0] => Array
    (
        [#theme] => image_formatter
        [#item] => Array
            (
                [fid] => 6777
                [alt] => alt text
                [title] => 
                [uid] => 1
                [filename] => imageFile.jpg
                [uri] => public://imageFile.jpg
                [filemime] => image/jpeg
                [filesize] => 28742
                [status] => 1
                [timestamp] => 1314312382
                [rdf_mapping] => Array ()
            )
        [#image_style] => 
        [#path] => 
    )
)

Và đây là đầu ra HTML:

<div class="field field-name-field-image field-type-image field-label-hidden" thmr="thmr_96">
  <div class="field-items">
    <div class="field-item even">
      <span thmr="thmr_97">
        <span thmr="thmr_98">
          <img typeof="foaf:Image" src="http://..../sites/default/files/imageFile.jpg" alt="alt text" />
        </span>
      </span>
    </div>
  </div>
</div>

Tôi đã thử thêm một lớp vào $content['field_image']['#attributes']['class'], nhưng nó không hoạt động.
[.__.] Bạn có biết làm thế nào tôi có thể đạt được những gì tôi đang cố gắng làm không?

6
Mark

Tôi tin rằng nó sẽ là:

$content['field_image'][0]['#attributes']['class'][] = 'my-class';

Hoặc để gán nó cho mọi phần tử,

foreach (element_children($content['field_image'] as $key) {
  $content['field_image'][$key]['#attributes']['class'][] = 'my-class';
}
8
tim.plunkett

Các giải pháp trên không hiệu quả với tôi (và không được mô tả rõ ràng trong mọi trường hợp). Đây là cách tôi giải quyết vấn đề chính xác này. Đây có lẽ không phải là cách tốt nhất và chắc chắn không phải là cách duy nhất, nhưng nó là một "cách thức Drupal" hợp lệ và hoạt động. Mở tệp template.php cho mẫu của bạn.

Dán vào chức năng sau, bạn sẽ phải MODIFY và tùy chỉnh cho kịch bản sử dụng của mình. Ví dụ: bạn phải thay thế <TEMPLATENAME> Bằng tên mẫu của bạn và thêm hoặc trừ các lớp theo ý muốn và những thứ khác, như bạn sẽ thấy.

function <TEMPLATENAME>_preprocess_image(&$variables) {
    // If this image is of the type 'Staff Photo' then assign additional classes to it:
    if ($variables['style_name'] == 'staff_photo') {
        $variables['attributes']['class'][] = 'lightbox';
        $variables['attributes']['class'][] = 'wideborder';
    }
}

Tôi đã tạo một câu lệnh "if" để xác định khi nào lớp sẽ được thêm vào hình ảnh, nhưng bạn sẽ phải tùy chỉnh theo cách bạn muốn - bạn có thể loại bỏ nó hoàn toàn nếu bạn muốn một lớp trên TẤT CẢ hình ảnh trường hình ảnh hoặc bạn có thể nói if (drupal_is_front_page()) nếu bạn chỉ muốn nó được áp dụng trên trang đầu, v.v.

Trong trường hợp MY, tôi đã tạo kiểu ảnh (Cấu hình> Phương tiện> Kiểu ảnh) cho Ảnh nhân viên và thêm mệnh đề if để chỉ áp dụng các lớp ưa thích của tôi cho ảnh của Kiểu ảnh được chỉ định đó. Tôi nghĩ đó là một cách tuyệt vời để làm điều đó, nhưng bạn có thể làm những gì bạn thích.

Bây giờ, bất cứ khi nào tôi đang xem một nút chứa trường hình ảnh với kiểu ảnh của "Ảnh nhân viên", các lớp sẽ xuất hiện một cách kỳ diệu trong thẻ IMG, đây chính là thứ tôi cần.

4
Matt F

Vấn đề này dường như đã được khắc phục trong lõi 7.23

Trong nút tpl thêm cái này ở trên cùng:

<?php
$content['field_name'][0]['#item']['attributes']['class'][] = 'your-class';
?>
2
FVANtom

Bạn cũng có thể làm một cái gì đó như thế này:

  $array['container']['#prefix'] = '<div id = "container">';
  $array['container']['#suffix'] = '</div>';
2
starsinmypockets

Nếu bạn cần một số điều kiện để áp dụng lớp, bạn sẽ cần thu thập thông tin trường trang.

Bạn có thể làm điều đó với hàm template_preprocess_field(&$variables).

template_preprocess_field(&$variables) {
  if ($variables['element']['#field_type'] == 'image') {
        $variables['items'][0]['#item']['attributes']['class'][] = 'your-class';
  }
}
0
Aporie

Đối với những người trong "trường - trường-image.tpl.php", hãy sử dụng:

$item['#item']['attributes']['class'][] = 'your-class';
0
ben.hamelin

Tôi đang tìm kiếm một giải pháp tương tự, nhưng để tạo kiểu cho một yếu tố đầu vào mẫu chứ không phải hình ảnh. Bên trong Commerce_coupon.checkout_pane.inc tùy chỉnh của tôi bao gồm tôi đã thêm một mảng #attribut chứa các lớp cần thiết.

Vì vậy, nếu bạn đang tìm kiếm một giải pháp vướng víu mô-đun thay vì nhúng mẫu, đây có thể là một giải pháp thay thế tốt.

Chạy trên Drupal 7,39

  $pane_form['coupon_add'] = array(
    '#type' => 'button',   
    '#value' => t('Add coupon'),    
    '#name' => 'coupon_add',    
    '#limit_validation_errors' => array(),    
    '#ajax' => array(    
      'callback' => 'commerce_coupon_add_coupon_callback',    
      'wrapper' => 'commerce-checkout-coupon-ajax-wrapper',    
    ),
    '#attributes' => array('class' => array('btn', 'btn-13')),
0
rawdesk.be