2010-09-17 7 views
5

tôi cần phải quấn hình ảnh vào đánh dấu bổ sung để tạo thêm kiểu dáng css. Tôi muốn có một cái gì đó như thế: <p><span><img src="path/to/image" alt="alt"/></span></p>.Drupal: Cách quấn hình ảnh nội tuyến vào đánh dấu bổ sung

Các hình ảnh được bổ sung trực tiếp vào nút cụ thể sử dụng các module sau:

  1. http://drupal.org/project/insert
  2. http://drupal.org/project/image
  3. http://drupal.org/project/cck -> ImageField

Dưới đây là nội dung của node của tôi [ type] .tpl.php:

<div id="article"> 
    <div id="article-header"> 
     <h2><?php print $title; ?></h2> 
     <?php if ($submitted): ?> 
      <p class="created"><?php echo date("d. F Y - H:i", $created).t(' von ').$name; ?></p> 
     <?php endif; ?> 
    </div> 

    <div class="article-body"> 
     <?php print $content; ?> 
    </div> 

    <?php if ($links): ?> 
     <div class="extra-links"> 
      <?php print $links; ?> 
     </div> 
    <?php endif; ?> 
</div> 

<?php if($node->comment == 0 && isset($node->comment_count) && $node->comment_count < 1): ?> 
    <div id="comments"> 
     <p class="note">Kommentare geschlossen</p> 
    </div> 
<?php endif; ?> 

Tôi nghĩ tôi phải làm điều gì đó với $content. Nhưng tôi thực sự không có ý tưởng. Bất kỳ đề xuất?

Trả lời

3

Nếu bạn đang sử dụng mô đun chèn thì có tùy chọn thêm "Lớp CSS bổ sung" vào hình ảnh trong cài đặt để chèn vào trường hình ảnh.

Điều này sẽ thêm một lớp học vào <img> (nhưng nó sẽ không quấn một khoảng khoảng <img> như bạn muốn). Sử dụng lớp này bạn có thể làm tùy chỉnh css bạn muốn.

Cách tiếp cận này có một số hãy cẩn thận

  1. Bạn sẽ cần phải sử dụng các mô-đun bộ lọc WYSIWYG (http://drupal.org/project/wysiwyg_filter) để ngăn chặn các lớp khỏi bị tước ra từ thẻ img (hoặc bạn sẽ cần phải sử dụng các định dạng đầy đủ html mà rõ ràng không phải là ý tưởng hay nếu các quản trị viên không nhập nội dung trên trang web)
  2. Bạn cần cho phép thuộc tính lớp cho thẻ trong cài đặt WYSIWYG. Tuy nhiên theo các tùy chọn nâng cao đảm bảo bạn cho phép các lớp được phép.
  3. Bạn nên vô hiệu hóa Filter HTML như bạn đang sử dụng bộ lọc WYSIWYG

nên quy tắc của bạn cho thẻ sẽ giống như thế img [src | tựa đề | alt | lớp!]. Đảm bảo lớp bạn muốn, ví dụ: custom-css-class được đưa vào danh sách trắng theo phần quy tắc nâng cao cho WYSIWYG

Chỉnh sửa: Ok Tôi hiểu yêu cầu của bạn tốt hơn bây giờ.

  1. Đối imagefields rằng KHÔNG inline (tức là trong các lĩnh vực nội dung), bạn có thể ghi đè lên nội dung field.tpl.php bằng cách đổi tên nó để nội dung field- [FIELD_NAME] .tpl.php Bạn có thể bọc hình ảnh bằng bất kỳ thẻ nào bạn muốn trong tệp này. Xin xem http://www.advantagelabs.com/drupal-colonoscopy-or-how-theme-cck-field-drupal-6

  2. Đối với hình ảnh có nội tuyến và bạn vẫn muốn thêm một số gói HTML bạn có thể sử dụng http://drupal.org/project/customfilter Đây là một mô-đun tuyệt vời (khó khăn để sử dụng nhưng nó hoạt động !!).Bạn có thể tìm kiếm cho thẻ và thêm tùy ý nội dung xung quanh nó. Xem http://drupal.org/node/210551 cho tài liệu

+0

Cảm ơn bạn đã trả lời của bạn, nhưng đây không phải là những gì tôi cần phải làm. Tôi có thể chọn hình ảnh của tôi chỉ đơn giản bằng '#article img {}' trong tệp css của tôi và làm một số kiểu dáng css rắn trên đó. Nhưng tôi cần đánh dấu bổ sung để giải quyết vấn đề bố cục của tôi. Bạn có lẽ nên biết rằng tôi cần phải sử dụng nhiều hình ảnh nền css. Css 3 và Javascript (jQuery) không phải là một tùy chọn. – gearsdigital

+0

Bạn có thể ghi đè content-field.tpl.php cho các trường ảnh và sử dụng bộ lọc tùy chỉnh (xem câu trả lời đã chỉnh sửa ở trên) –

+0

NoParrots, mô-đun bộ lọc tùy chỉnh là một gợi ý tuyệt vời nhưng lại gây khó khăn cho tôi :). http://drupal.org/project/wysiwyg_imageupload Đã thêm HTML tùy chỉnh theo mặc định. Tôi đã thay đổi mô-đun cho các mối quan tâm của mình và nó hoạt động tốt ngay bây giờ. Cảm ơn một lần nữa rất nhiều :) – gearsdigital