필드를 보려면 스타일 속성 추가

뷰의 각 제목 필드에 스타일 속성을 추가하고 싶습니다. 색상에 대해 하나의 필드를 만들었습니다. 다음과 같이 결과를 다시 쓰려고했습니다.

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

그러나 스타일 속성이 제거됩니다. Drupal 7을 사용하고 있습니다.

도움을 주셔서 감사합니다.

아래 화면과 같이 스타일 설정을 사용하여 클래스를 제목 필드로 설정할 수 있습니다. 스타일 설정에서 사용자 토큰 대체를 사용하여 클래스를 제목 필드로 설정할 수 있습니다.

작은 자바 스크립트 또는 jquery를 사용하여 제목 클래스 클래스를 읽고 CSS 속성을 사용하여 클래스 이름과 동일한 색상을 설정하십시오 .

이 필드에 대한 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. 이전 게시물의 이미지와 마찬가지로 색상 값을 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 . '"';
}

anil 제안 필드에 이름을 추가하고 테마 폴더에서 style.css를 열고 ".my-css-name"을 입력 한 다음 원하는 CSS 결과를 입력하십시오.

.my-css-name {색상 : 빨간색; 배경 : 녹색; }

나는 비슷한 것을 만들고 있는데 여기 내가 한 일이 있습니다.

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를 사용하여 필요한 모든 것을 인쇄하고 스타일을 필터링하지 않을 수 있습니다.

나는이 같은 문제가 있었고 이름이 지정된 템플릿을 만들어서 해결했습니다.

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

템플릿 파일에서 매우 도움이되었습니다. 그것 없이는 이것을 알아낼 수 없었습니다.

내가 찾을 수있는 가장 쉬운 해결책은 값을 데이터 속성으로 삽입하는 것이 었습니다. 그런 다음 JavaScript에서 데이터 필드의 값을 가져 와서 변경 사항을 반영하도록 CSS를 업데이트합니다.