Добавить атрибут стиля в поля просмотра

12

Я хотел бы добавить атрибут стиля для каждого поля заголовка в моем представлении. Я создал одно поле для цвета. Я попытался переписать результат так:

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

Но атрибут стиля будет удален. Я использую Drupal 7.

Любая помощь приветствуется.

views  theming 
— KSN
источник
Почему это удалено? Вы пытались использовать глобальное текстовое поле вместо?
— Алекс Гилл
Спасибо за ваш ответ! Что вы имеете в виду под глобальным текстовым полем? Настройки на мой взгляд: Формат: Неформатированный список Показать: Поля
— Ksn
У вас есть возможность добавить поле «глобальный текст». Это поле должно идти после любых других полей, которые вы уже добавили. Затем вы можете использовать токены в этом настраиваемом поле, чтобы создать аналогично тому, что вы сделали выше. Затем вы можете скрыть поля, которые отображаются в настраиваемом поле.
— Алекс Гилл
1
Лучше всего создать файл шаблона для этого поля или использовать класс на основе токена, упомянутого ниже.
— Алекс Гилл
1
Если вы посмотрите в разделе «Дополнительно» с правой стороны, есть опция «Информация о теме», здесь она даст вам несколько советов по шаблонам.
— Алекс Гилл

Ответы:

4

Вы можете установить класс в поле заголовка, используя настройки стиля, как показано ниже на экране. Вы можете заменить токены в настройках стиля, чтобы установить класс в поле заголовка.

введите описание изображения здесь

Используя небольшой javascript или jquery, прочитайте поле класса заголовка и установите цвет, совпадающий с именем класса, используя свойство CSS .

— Анил Сагар
источник
2
Может быть, ваше решение работает, но я, что решить эту проблему без JavaScript. Это возможно?
— Ksn
2
Вы не можете напрямую внедрить значение поля в свойство стиля из-за проблем безопасности. См. Проблему
— Анил Сагар
Затем вам нужно написать отдельный класс 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; фон: зеленый; }

— aaronStarK
источник
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);

в файле шаблона было очень полезно. Не мог бы понять это без этого.

— evanmcd
источник
0

Самым простым решением, которое я смог найти, было вставить значение в качестве атрибута данных. Затем в моем JavaScript я беру значение из поля данных и обновляю CSS, чтобы отразить изменение.

— Hawkee
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.