วิธีเพิ่มแอตทริบิวต์ CSS ไปยังรูปภาพที่สร้างด้วยสไตล์รูปภาพ


10

ค่อนข้างมากทั้งหมดในชื่อเรื่อง ฉันต้องการเพิ่มคลาส CSS ลงในรูปภาพที่สร้างขึ้นผ่านฟังก์ชั่นชุดรูปแบบสไตล์รูปภาพเพื่อให้ผลลัพธ์ดูเหมือน:

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

อย่างไรก็ตามมีการทำเช่นนั้น?

คำตอบ:


4

หากคุณสะดวกสบายในการเอาชนะฟังก์ชั่นชุดรูปแบบใน template.php ของชุดรูปแบบคุณสามารถสร้างฟังก์ชัน YOURTHEME_image_style () ได้:

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


ตอนนี้ฉันต้องบอกว่าฟังก์ชั่นชุดรูปแบบยังคงโกรธแค้นมากสำหรับฉันในตอนนี้ คุณจะมีลิงค์ไปยังแหล่งข้อมูลที่สามารถอธิบายได้หรือไม่?
silkAdmin

ดังนั้นความคิดคือการคัดลอกรหัสบนหน้าที่เชื่อมโยงไปยังไฟล์ template.php ของชุดรูปแบบของคุณ (หากธีมของคุณไม่มีให้ทำ) จากนั้นเปลี่ยนคำว่า "theme" ใน theme_image_style เป็นชื่อธีมของคุณซึ่งอาจ เป็น zen_image_style หรือ garland_image_style ฯลฯ
Ryan ราคา

4

นี่คือรหัสบางอย่างขึ้นอยู่กับไรอันตอบ

  1. คัดลอกและวางรหัสจากtheme_image_styleลงในแม่แบบของธีมของคุณ
  2. แทนที่themeในtheme_image_styleที่มีชื่อของธีมของคุณ
  3. เพิ่มบรรทัดต่อไปนี้ในฟังก์ชั่น

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

แทนที่จะ'my-class'ฉันต้องการใช้ชื่อสไตล์จริงดังนั้นฉันจึงใช้$variables['style_name']แทน ชื่อสไตล์รูปภาพเป็นชื่อคลาส css ที่ถูกต้องเสมอดังนั้นจึงไม่มีปัญหากับวิธีการนี้ ฟังก์ชั่นควรมีลักษณะเช่นนี้:

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

4

ใช้ฟังก์ชัน preprocess

คุณต้องการให้คลาสนั้นบนรูปภาพที่แท้จริงเพิ่มผ่าน JS / jQuery ยุ่งเหยิงและแตกถ้าเนื้อหาถูกโหลด 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';

        }

    }

}

ทำไมฉันไม่ใช้ theme_image_style () สำหรับสิ่งนี้

ปัญหาในการทำเช่นนี้ผ่าน theme_image_style () คือมันแทนที่ฟังก์ชันเอาต์พุตสำหรับฟิลด์เดียวถ้าคุณมีหลายฟิลด์ในสถานที่ที่แตกต่างกัน ... มากเกินไปที่จะTHEME_field__field_photo__team($variables)ได้รับเช่นเดียวกับข้างต้นโดยใช้ theme_image_style () จะมีลักษณะเช่นนี้:

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

}

1
ตกลงการใช้ตัวประมวลผลล่วงหน้าเป็นวิธีที่ดีในการไปที่นี่ เนื่องจากตัวประมวลผลล่วงหน้าของฟิลด์สามารถเรียกได้หลายครั้งต่อหน้าสิ่งที่เกี่ยวกับการใช้ตัวประมวลผลล่วงหน้าโหนดแทน? สำหรับเขตข้อมูล 'field_images' $variables['content']['field_images'][$key]['#item']['attributes']['class'][] = [your_css_class]คุณสามารถเพิ่มการเรียนผ่านทาง
mesch

คุณอาจจะเรียกสิ่งนี้โดยใช้ตัวประมวลผลล่วงหน้าของโหนดว่าจะมีประสิทธิภาพมากกว่า
Duncanmoo

1
สิ่งนี้ช่วยให้ฉันเพิ่มคุณสมบัติเพื่อให้สอดคล้องกับข้อมูลเมตาของ Schema.org ขอบคุณ!
แพทริค

1

หากเหตุผลที่คุณต้องการเพิ่มคลาสคือให้ css พิเศษสำหรับรูปภาพคุณสามารถหลีกเลี่ยงสิ่งนี้ได้โดยไปที่ระดับสูงสุดในทรี dom รูปภาพของคุณควรรวมอยู่ใน div field ที่มีคลาสเหมือน.field-type-imageกัน ด้วยสิ่งนี้ในใจคุณสามารถเขียนตัวเลือกที่เลือกภาพได้เช่น:
div.field-type-image img {border: 1px solid #ccc }

หรือเฉพาะเจาะจงมากขึ้นเช่น:

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


1

ฉันคิดว่าคุณต้องการใช้สิ่งนี้สำหรับคำบรรยายภาพ หลังจากการล่าสัตว์ไปรอบ ๆ ใช้ Jquery สิ่งนี้สำหรับ Drupal 7

สร้างไฟล์ js ของคุณ เรียกว่า caption.js คุณสามารถเรียกมันอย่างอื่น เก็บไว้ในธีมของคุณที่ไหนสักแห่ง

ตรวจสอบให้แน่ใจว่าสคริปต์ถูกเรียกโดยแก้ไขไฟล์ theme.info ของคุณและเพิ่มสคริปต์ [] = pathtoyourfile / caption.js

caption.js ควรมีรหัสต่อไปนี้

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

แทนที่ .views-field-fieldimage img สำหรับตัวเลือกของคุณเอง

กดปุ่มแคชที่ว่างเปล่าและปล่อยมันไป


0

คำแนะนำสำหรับคำตอบนี้

เปลี่ยน

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

ถึง

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

ดังนั้นชื่อสไตล์ของภาพจะถูกผนวกเข้ากับอาร์เรย์ของคลาสและไม่มีการบีบอัดโดยไม่ตั้งใจ

ตัวอย่างเต็ม:

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);
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.