เพิ่มแอตทริบิวต์สไตล์เพื่อดูฟิลด์


12

ฉันต้องการเพิ่มสไตล์ของสไตล์ให้กับแต่ละฟิลด์ในมุมมองของฉัน ฉันสร้างฟิลด์หนึ่งสี ฉันพยายามเขียนผลลัพธ์เช่นนี้ใหม่:

<h2 style="color: [field_color];">[title_1]</h2>

แต่แอตทริบิวต์สไตล์จะถูกลบ ฉันใช้ Drupal 7

ความช่วยเหลือใด ๆ ที่ชื่นชม


ทำไมจึงถูกลบออก คุณลองใช้ช่องข้อความทั่วโลกแทนหรือไม่?
Alex Gill

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

คุณมีตัวเลือกในการเพิ่มฟิลด์ 'ข้อความทั่วโลก' ฟิลด์นี้จะต้องไปหลังจากฟิลด์อื่น ๆ ที่คุณเพิ่มไว้แล้ว จากนั้นคุณสามารถใช้โทเค็นในฟิลด์ที่กำหนดเองนี้เพื่อสร้างสิ่งที่คล้ายกับสิ่งที่คุณทำด้านบน จากนั้นคุณสามารถซ่อนฟิลด์ที่แสดงในฟิลด์ที่กำหนดเอง
Alex Gill

1
ตัวเลือกที่ดีที่สุดของคุณคือการสร้างไฟล์เทมเพลตที่กำหนดเองสำหรับฟิลด์นี้หรือใช้คลาสตามโทเค็นที่กล่าวถึงด้านล่าง
Alex Gill

1
หากคุณดูที่ 'ขั้นสูง' ทางด้านขวามือจะมีตัวเลือกสำหรับ 'ข้อมูลธีม' ที่นี่จะให้คำแนะนำเกี่ยวกับเทมเพลต
Alex Gill

คำตอบ:


4

คุณสามารถตั้งค่าคลาสเป็นฟิลด์หัวเรื่องโดยใช้การตั้งค่าสไตล์ตามที่แสดงด้านล่าง คุณสามารถเปลี่ยนโทเค็นของผู้ใช้ในการตั้งค่าสไตล์เพื่อตั้งค่าคลาสเป็นฟิลด์หัวเรื่อง

ป้อนคำอธิบายรูปภาพที่นี่

การใช้ javascript หรือ jquery ขนาดเล็กอ่านคลาสของฟิลด์หัวเรื่องและตั้งค่าสีเหมือนกับชื่อคลาสโดยใช้คุณสมบัติCSS


2
บางทีโซลูชันของคุณอาจใช้งานได้ แต่ฉันต้องแก้ไขอย่างไรโดยไม่ใช้จาวาสคริปต์ เป็นไปได้ไหม
Ksn

2
คุณไม่สามารถฉีดค่าฟิลด์ลงในสไตล์โดยตรงเนื่องจากปัญหาด้านความปลอดภัย .. ดูปัญหาได้ที่นี่drupal.org/node/853880
Anil Sagar

จากนั้นคุณต้องเขียนคลาส css แยกกันสำหรับแต่ละสี แต่นี่เป็นกรณีที่แย่ที่สุดเพราะคุณต้องเขียน 16 ล้านคลาส :( Javascript หรือ jquery น่าจะดีกว่า
Mathankumar

2
อนึ่งฉันลองใช้วิธีแก้ปัญหาของคุณแล้ว แต่ Drupal ลบ # ออกจากสีดังนั้นฉันจึงพบวิธีแก้ไขปัญหาอื่นด้วย jQuery ฉันเพิ่มข้อมูลคุณลักษณะลงในฟิลด์: <h2 data-color = "[field_color]"> [title_1] </h2> ฉันได้ตรวจสอบโซลูชันอื่น ๆ ด้วยเทมเพลต แต่ฉันไม่สามารถหาวิธีแก้ไขได้
Ksn

1

คุณสามารถสร้าง tpl สำหรับฟิลด์นี้ (ตัวอย่าง: views-view-field-MY-VIEW-NAME-page.tpl.php) ใน tpl นี้คุณสามารถเพิ่มโทเค็นที่เขียนสิ่งนี้:

<h2 style="color: <?php print $field->last_tokens['[field_color]'] ?>;"><?php print $field->last_tokens['[title_1]'] ?></h2>

1

ฉันต้องรวมค่าของเขตข้อมูลเป็นสีแบบอินไลน์สำหรับเขตข้อมูลเฉพาะ หลังจากเรียกดูเว็บเพื่อหาโซลูชันที่ปรับแต่งได้ง่ายฉันลงเอยด้วยการทำสิ่งนี้:

  1. เพิ่มค่าของสีเป็นโทเค็น CSS คลาสเหมือนภาพในโพสต์ก่อนหน้า
  2. เขียนใหม่ฟังก์ชั่นhook_preprocess_views_view_field ()เช่นนี้:

     function hook_preprocess_views_view_fields(&$vars) {
      $view = $vars['view'];
    
      // Loop through the fields for this view.
      $previous_inline = FALSE;
      $vars['fields'] = array(); // ensure it's at least an empty array.
      foreach ($view->field as $id => $field) {
    
        // render this even if set to exclude so it can be used elsewhere.
        $field_output = $view->style_plugin->get_field($view->row_index, $id);
        $empty = $field->is_value_empty($field_output, $field->options['empty_zero']);
        if (empty($field->options['exclude']) && (!$empty || (empty($field->options['hide_empty']) && empty($vars['options']['hide_empty'])))) {
          $object = new stdClass();
          $object->handler = & $view->field[$id];
          $object->inline = !empty($vars['options']['inline'][$id]);
    
          $object->element_type = $object->handler->element_type(TRUE, !$vars['options']['default_field_elements'], $object->inline);
          if ($object->element_type) {
            $class = '';
            if ($object->handler->options['element_default_classes']) {
              $class = 'field-content';
            }
    
            if ($classes = $object->handler->element_classes($view->row_index)) {
              if ($class) {
                $class .= ' ';
              }
              $class .= $classes;
            }
    
            $class_array = explode(' ', $class);
            foreach ($class_array as $cid => $candidate) {
              // Find the color hex code.
              if (preg_match('/([a-f]|[A-F]|[0-9]){3}(([a-f]|[A-F]|[0-9]){3})?\b/', $candidate)) {
                $style = 'color:#' . $candidate . ';';
                unset($class_array[$cid]);
              }
            }
    
            $pre = '<' . $object->element_type;
            if ($class) {
              $pre .= ' class="' . implode(' ', $class_array) . '"';
            }
            if ($style) {
              $pre .= ' style="' . $style . '"';
            }
            $field_output = $pre . '>' . $field_output . '</' . $object->element_type . '>';
          }
    
          // Protect ourself somewhat for backward compatibility. This will prevent
          // old templates from producing invalid HTML when no element type is selected.
          if (empty($object->element_type)) {
            $object->element_type = 'span';
          }
    
          $object->content = $field_output;
          if (isset($view->field[$id]->field_alias) && isset($vars['row']->{$view->field[$id]->field_alias})) {
            $object->raw = $vars['row']->{$view->field[$id]->field_alias};
          }
          else {
            $object->raw = NULL; // make sure it exists to reduce NOTICE
          }
    
          if (!empty($vars['options']['separator']) && $previous_inline && $object->inline && $object->content) {
            $object->separator = filter_xss_admin($vars['options']['separator']);
          }
    
          $object->class = drupal_clean_css_identifier($id);
    
          $previous_inline = $object->inline;
          $object->inline_html = $object->handler->element_wrapper_type(TRUE, TRUE);
          if ($object->inline_html === '' && $vars['options']['default_field_elements']) {
            $object->inline_html = $object->inline ? 'span' : 'div';
          }
    
          // Set up the wrapper HTML.
          $object->wrapper_prefix = '';
          $object->wrapper_suffix = '';
    
          if ($object->inline_html) {
            $class = '';
            if ($object->handler->options['element_default_classes']) {
              $class = "views-field views-field-" . $object->class;
            }
    
            if ($classes = $object->handler->element_wrapper_classes($view->row_index)) {
              if ($class) {
                $class .= ' ';
              }
              $class .= $classes;
            }
    
            $object->wrapper_prefix = '<' . $object->inline_html;
            if ($class) {
              $object->wrapper_prefix .= ' class="' . $class . '"';
            }
            $object->wrapper_prefix .= '>';
            $object->wrapper_suffix = '</' . $object->inline_html . '>';
          }
    
          // Set up the label for the value and the HTML to make it easier
          // on the template.
          $object->label = check_plain($view->field[$id]->label());
          $object->label_html = '';
          if ($object->label) {
            $object->label_html .= $object->label;
            if ($object->handler->options['element_label_colon']) {
              $object->label_html .= ': ';
            }
    
            $object->element_label_type = $object->handler->element_label_type(TRUE, !$vars['options']['default_field_elements']);
            if ($object->element_label_type) {
              $class = '';
              if ($object->handler->options['element_default_classes']) {
                $class = 'views-label views-label-' . $object->class;
              }
    
              $element_label_class = $object->handler->element_label_classes($view->row_index);
              if ($element_label_class) {
                if ($class) {
                  $class .= ' ';
                }
    
                $class .= $element_label_class;
              }
    
              $pre = '<' . $object->element_label_type;
              if ($class) {
                $pre .= ' class="' . $class . '"';
              }
              $pre .= '>';
    
              $object->label_html = $pre . $object->label_html . '</' . $object->element_label_type . '>';
            }
          }
    
          $vars['fields'][$id] = $object;
        }
      }
    
    }
    

อย่างที่คุณเห็นฉันได้เพิ่มบรรทัดเหล่านี้:

$style = '';
$class_array = explode(' ', $class);
foreach ($class_array as $cid => $candidate) {
  // Find the color hex code.
  if (preg_match('/([a-f]|[A-F]|[0-9]){3}(([a-f]|[A-F]|[0-9]){3})?\b/', $candidate)) {
    $style = 'color:#' . $candidate . ';';
    unset($class_array[$cid]);
  }
}

และเปลี่ยนบรรทัดใต้:

$pre = '<' . $object->element_type;
if ($class) {
  $pre .= ' class="' . implode(' ', $class_array) . '"';
}
if ($style) {
  $pre .= ' style="' . $style . '"';
}

0

เพิ่มชื่อลงในฟิลด์ anil ที่แนะนำจากนั้นเปิด style.css ในโฟลเดอร์ธีมของคุณและพิมพ์ ".my-css-name" แล้วตามด้วยผลลัพธ์ css ที่ต้องการเช่น:

.my-css-name {color: red; พื้นหลัง: สีเขียว; }


0

ฉันแค่ทำสิ่งที่คล้ายกันและนี่คือสิ่งที่ฉันทำ:

1- สร้างมุมมองพร้อมฟิลด์สีและชื่อเรื่อง

2- สร้างแบบกำหนดเอง "views-view-fields.tpl" สำหรับมุมมองนั้น (เทมเพลตที่กำหนดเองเฉพาะสำหรับฟิลด์สีแสดงให้ฉันเห็นข้อผิดพลาด)

3- ที่field->contentบรรทัดเพิ่ม / แทนที่สิ่งที่คุณต้องการ ....<h2 style="color: #<?php print $field->content; ?>">

/ / / / จากนี้ไปฉันไม่ได้ทดสอบ แต่มันน่าจะใช้ได้ดี // //

4- ยกเว้นฟิลด์หัวเรื่องและแสดงในส่วนหัว / กลุ่ม

5- สร้างแบบกำหนดเอง "views-view-unformatted.tpl" สำหรับมุมมองนั้น

6- ในมุมมองนี้เราเพิ่มหลัง<?php print $title; ?></h2> <?php print $row; ?>(เราเพิ่มชื่อและปิดแท็ก H เปิดในเทมเพลตแรก)


แก้ไขล่าสุด:

คุณสามารถใช้มุมมอง PHP เพื่อพิมพ์ทุกอย่างที่คุณต้องการและสไตล์จะไม่ถูกกรอง


0

ฉันมีปัญหาเดียวกันนี้และแก้ไขมันด้วยการสร้างเทมเพลตที่ชื่อว่า

views-view-field--field_name_here.tpl.php

ในกรณีของฉันรหัสที่ฉันใช้ในการสร้าง HTML ที่ฉันต้องการคือ:

<?php

$bg_color = $variables["row"]->field_field_button_background_color[0]["raw"]["rgb"];
$link_title = $variables["row"]->field_field_slideshow_item_cta_link[0]["raw"]["title"];
$link_url = $variables["row"]->field_field_slideshow_item_cta_link[0]["raw"]["url"];

echo '<a style="background-color:'.$bg_color.'" href="'.$link_url.'">'.$link_title.'</a>';

การเปิดใช้งานโมดูล Devel และการใช้งาน

dpm($row);

ในไฟล์เทมเพลตมีประโยชน์มาก ไม่สามารถหาสิ่งนี้ได้หากไม่มีมัน


0

วิธีที่ง่ายที่สุดที่ฉันสามารถหาได้คือใส่ค่าเป็นแอตทริบิวต์ data จากนั้นใน JavaScript ของฉันฉันใช้ค่าจากเขตข้อมูลและอัปเดต CSS เพื่อให้สอดคล้องกับการเปลี่ยนแปลง

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